layui+strtus2如何做搜索功能,下面是我写的,后台接不到数据

已采纳
33 468
至于终老
悬赏:10飞吻

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/layui.css" media="all">
<link rel="stylesheet" href="css/style.css" media="all">
<!-- 引入jquery -->
<script type="text/javascript" src="js/jquery1.4.2.js"></script>
</head>
<body>
<blockquote class="layui-elem-quote">
</blockquote>
<div>
<button class="layui-btn layui-btn-primary caozauo-btn"><i class="layui-icon"></i> 查询</button>
<button class="layui-btn layui-btn-primary caozauo-btn"><i class="layui-icon"></i>添加</button>
<button class="layui-btn layui-btn-primary caozauo-btn"><i class="layui-icon"></i>修改</button>
<button class="layui-btn layui-btn-primary caozauo-btn"><i class="layui-icon"></i>删除</button>
<button class="layui-btn layui-btn-primary caozauo-btn" id="MoreSearch"><i class="layui-icon"></i>更多查询条件</button>
</div>

<hr class="layui-bg-gray">
<form class="layui-form" action="" id="SearchContent" name="SearchContent" method="post">
<div class="layui-form-item" style="margin-top:10px">

<div class="layui-inline">
<label class="layui-form-label">日期:</label>
<div class="layui-input-inline">
<input name="startdate" id="date1" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" type="text">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline">
<input name="enddate" id="date2" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" type="text">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">姓名:</label>
<div class="layui-input-inline">
<input name="name" id="xingming" autocomplete="off" class="layui-input" type="text">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">身份证号:</label>
<div class="layui-input-inline">
<input name="sfz" id="sfz" autocomplete="off" class="layui-input" type="text">
</div>
</div>


</div>
<hr class="layui-bg-gray">
<div class="chaxun-btn-wai">
<button id="searchbtn" lay-filter="search" lay-submit class="layui-btn layui-btn-normal chaxun-btn">查询</button>
</div>
</form>

<table id="info"></table>

<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-mini" lay-event="detail">打印</a>
<a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
</script>

<script src="<%=rootPath%>/common/layui/layui.js"></script>
<!--<script src="js/laydate.js"></script>-->
<script>
layui.use(['layer', 'form', 'element', 'laydate', 'jquery', 'table'], function() {

var layer = layui.layer,
form = layui.form,
element = layui.element,
laydate = layui.laydate,
table = layui.table;

form.on('submit(search)',function(data){
alert(1);
tableIns.reload({
where:{
name : '张三'
}
});
});



var tableIns = table.render({
elem:"#info",
url:"/MMRC/mmrc/HZJBXX_showInfo.action",
height:'full-150',
id:'tableReload',
cols:[[
{checkbox: true, LAY_CHECKED: true,fixed:true},//默认全选
{field:'ID', title: '编号', width: 80, sort: true,fixed:true},
{field:'name', title: '姓名', width: 80, sort: true,fixed:true},
{field:'sex', title: '性别', width: 80, sort: true,templet: '#titleTpl'},
{field:'birthday', title: '出生日期', width: 80},
{field:'minzu', title: '民族', width: 80, sort: true},
{field:'jiguan', title: '籍贯', width: 80, sort: true},
{field:'sfz', title: '身份证号', width: 80, sort: true},
{field:'shouji', title: '手机', width: 80, sort: true},
{field:'lianxidianhua', title: '联系电话', width: 80, sort: true},
{field:'hujidizhi', title: '户籍地址', width: 80, sort: true},
{field:'gongzuodanwei', title: '工作单位', width: 80, sort: true},

]],
skin:"row",
even:true,
page:true,
pageIndex:1,
limits:[30,60,90,150,300],
limit:30,
done:function(res, curr, count){
//console.log(res);
//alert(res);
}
});

});

</script>

</body>
</html>
回帖
  • @至于终老
    去找人家文档看看
    0 回复
  • @至于终老 我是将渲染表格封装成一个方法function addTable(data){},用的是传data的,没用url,然后
    $.ajax({
    type: "POST",
    url: "${path}/mmrc/HZJBXX_showInfo.action",
    data: formdata,
    // dataType: "json",//返回数据格式json,text
    success: function(data) {
    addTable(data);
    //这里如何处理,生成表格
    },

    1 回复
  • @随❤所☆预 理论上也可以封装为 function addTable(url){},
    点击事件
    $().click(function(){
    addTable(url&参数) //直接路径传参
    });
    1 回复
  • 可以写成
    function 方法名(参数){
    layui.use(['layer', 'form', 'element', 'laydate', 'jquery', 'table'], function() {});
    }
    这样你就可以多次调用这个方法
    1 回复
  • 如果你是搜索你表格里面的对应数据,你可以用layui的数据表格重载
    http://www.layui.com/doc/modules/table.html#reload
    0 回复
  • 想通过后台数据库搜索的话,看看你struts有没有写对属性名和是否有setget方法
    0 回复
  • @随❤所☆预 搜索后台数据库,setget方法都写了,现在不知道怎么提交到action里面,
    reload搜的是表格中的数据,不是后台的吗
    0 回复
  • ajax提交 返回相对应的数据
    0 回复
  • @至于终老 你搜索按钮写个ajax方法提交就行了
    0 回复
  • @HI怪叔叔 数据返回之后呢,如何生成表格,我是这么写的

    form.on('submit(search)',function(data){
    var formdata=$("#baseform").serialize();
    alert(formdata);
    $.ajax({
    type: "POST",
    url: "${path}/mmrc/HZJBXX_showInfo.action",
    data: formdata,
    // dataType: "json",//返回数据格式json,text
    success: function(data) {

    //这里如何处理,生成表格
    },
    error: function() {
    alert("查询失败");
    }
    });

    });
    0 回复
  • @随❤所☆预 提交之后如何再生成一个表格呢,还是调用table.render方法吗
    0 回复
  • @随❤所☆预 我写的$.ajax这个$代表的是layui的$还是jquery的$,jquery文件我引入了
    0 回复
  • @至于终老 Jq的
    0 回复
  • @随❤所☆预 layui.use(['layer', 'form', 'element', 'laydate', 'jquery', 'table'], function() {});
    这个可以重复定义吗
    0 回复
  • @随❤所☆预 我现在能查询,也能返回数据了,但是返回的数据不能显示在表格里面,下面是我返回数据的格式,我返回的就是一个json串,不需要再使用eval转换了吧
    {
    "code": 0,
    "msg": "",
    "count": 3,
    "data": [
    {
    "B21": "2、适中",
    "E83": "1、是",
    },
    {
    "B21": "2、适中",
    "E83": "1、是",
    },
    {
    "B21": "2、适中",
    "E83": "1、是",
    }
    ]
    }
    0 回复
  • @至于终老 你data数据里面的数据怎么没属性名,只有数据- -
    0 回复
  • @随❤所☆预 B21,E83就是属性名
    0 回复
  • @至于终老 你返回的都不是你表格要显示的,对应的字段名都不一样,
    0 回复
  • @随❤所☆预 字段太多了,我从里面挑了几个贴上去的
    0 回复
  • @随❤所☆预 现在是这么写的,

    //////////////////////////html///////////////////////////
    <form class="layui-form" action="" id="SearchContent" name="SearchContent" method="post">
    <input name="page" id="page" value="" />
    <input name="limit" id="limit" value="30"/>
    <div class="layui-form-item" style="margin-top:10px">

    <div class="layui-inline">
    <label class="layui-form-label">日期:</label>
    <div class="layui-input-inline">
    <input name="startdate" id="date1" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" type="text">
    </div>
    <div class="layui-form-mid">-</div>
    <div class="layui-input-inline">
    <input name="enddate" id="date2" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" type="text">
    </div>
    </div>

    <div class="layui-inline">
    <label class="layui-form-label">姓名:</label>
    <div class="layui-input-inline">
    <input name="name" id="xingming" autocomplete="off" class="layui-input" type="text">
    </div>
    </div>

    </div>
    <hr class="layui-bg-gray">
    <div class="chaxun-btn-wai">
    <button id="searchbtn" lay-filter="search" lay-submit class="layui-btn layui-btn-normal chaxun-btn">查询</button>
    </div>
    </form>

    <table id="info"></table>
    ////////////////////////js///////////////////////////////////////////////////////////////////////////////

    //第一次进入页面显示数据
    var tableIns = table.render({
    elem:"#info",
    url:"/MMRC/mmrc/HZJBXX_showInfo.action",
    height:'full-150',
    cols:[[
    {checkbox: true, LAY_CHECKED: true,fixed:true},//默认全选
    {field:'id', title: '编号', width: 80, sort: true,fixed:true},
    {field:'name', title: '姓名', width: 80, sort: true,fixed:true},
    {field:'sex', title: '性别', width: 80, sort: true,templet: '#titleTpl'},
    {fixed:'right', width:160, align:'center', toolbar: '#barDemo'}
    ]],
    skin:"row",
    even:true,
    page:true,
    limits:[30,60,90,150,300],
    limit:30,
    done:function(res, curr, count){
    alert(res);
    layui.$("#page").val(curr);
    }
    });

    //查询数据
    form.on('submit(search)',function(data){
    var formdata=$("#SearchContent").serialize().replace(/\+/g,"").replace(/\ +/g,"");
    formdata=decodeURIComponent(formdata,true);
    alert(formdata);
    test(formdata);
    return false;
    });

    //异步提交
    function test(formdata){
    $.ajax({
    type: "POST",
    url: "${path}/mmrc/HZJBXX_showInfo.action",
    data: formdata,
    // dataType: "json",//返回数据格式json,text
    success: function(data1) {
    alert("**********"+data1);
    reloadTable(data1);
    return false;
    },
    error: function() {
    alert("提交失败");
    }
    });
    }

    //重新生成表格
    function reloadTable(data2){
    table.render({
    elem:"#info",
    data:data2,
    height:'full-150',
    cols:[[
    {checkbox: true, LAY_CHECKED: true,fixed:true},//默认全选
    {field:'id', title: '编号', width: 80, sort: true,fixed:true},
    {field:'name', title: '姓名', width: 80, sort: true,fixed:true},
    {field:'sex', title: '性别', width: 80, sort: true,templet: '#titleTpl'},
    {fixed:'right', width:160, align:'center', toolbar: '#barDemo'}
    ]],
    skin:"row",
    even:true,
    page:true,
    limits:[30,60,90,150,300],
    limit:30,
    done:function(res, curr, count){
    layui.$("#page").val(curr);
    }
    });
    }


    0 回复
  • @随❤所☆预 这是返回的数据
    {"code":0,"msg":"","count":3,"data":[{"sex":"男","name":"请问222","id":1},{"sex":"男","name":"任天野","id":2},{"sex":"男","name":"阿斯蒂芬","id":3}]}
    0 回复
  • @至于终老 那不可能不行呀,你截下图,或者仔细找一下
    0 回复
  • @至于终老 改成data:data2.data
    0 回复
  • @随❤所☆预 返回的data2是json串还是object
    0 回复
  • @至于终老 用data只需要获取json字符串里面的data数据就行了,其他不用,用url就要给他状态和页数
    0 回复
  • @随❤所☆预 我现在要从后台查询出数据,那是应该使用url还是data
    0 回复
  • @至于终老 你喜欢那种都行,个人觉的还是data好,会自动帮你分好页,不用后台搞分页,但看见有人说数据太多就不是太好了,我也不知道
    0 回复
  • @至于终老 其实你那两个方法可以写在以前的,没必要分2部分
    0 回复
  • @随❤所☆预 我刚才添加了一条数据,为什么这条数据没有显示出来
    0 回复
  • @至于终老 添加要重新渲染表格才行- -或者表格重载,我是直接刷新页面[汗] ,你可以试下表格重载
    http://www.layui.com/doc/modules/table.html#reload
    0 回复
近期热议
layui 2.1.5 发布,局部细节优化 68
预告一下,下一个版本 table 模块会大幅增强 49
开放 layui 官方交流二群 28
table 里面的删除按钮怎么操作 24
经多人举报,某 layui 千人群存在管理员恶意误导行为 23
form事件提交以后,后台返回的json怎么获取? 22
数据表格 自定义响应体 无反应 22
layui图标显示问题 21
数据表格的使用问题!!急求大佬帮忙解决 21
java后台快速开发框架automain发布,前端部分支持且仅支持layui 19
layui

微信扫码关注 layui 公众号