主要是在后台实现数据的条件查询，然后将按条件查询出来的结果返回给前端，重载表格。
这里实现环境我使用的是.net mvc框架。
1.首先定义查询按钮;
<button id="reloadBtn" class="layui-btn" data-type="reload">搜索</button>
2.定义要查询时需要传递的值，比如我这里是针对工夹具的某个属性，主要传递两个值，一个是所选择的查询条件，另一个是查询值，前端部分代码如下：
<div class="layui-form-item"><div class="layui-input-inline"><div class="layui-form"><select name="cdSelect" lay-verify="" lay-filter="test" id="conditionSelect"><option value="fixure_id">按编号查询</option><option value="Name">按夹具名称查询</option><option value="Model">按夹具模组查询</option><option value="PartNo">按夹具料号查询</option><option value="UserdFor">按用途查询</option><option value="UsedCount">按使用次数查询</option><option value="Location">按库位查询</option><option value="RegDate">按入库日期查询</option><option value="workcell">按工作部查询</option></select></div></div><div class="layui-input-inline"><input class="layui-input" name="conditionInput" id="conditionInput" autocomplete="off"></div><button id="reloadBtn" class="layui-btn" data-type="reload">搜索</button></div>
3.然后是对于layui.table组件中的相关定义;
这里最重要的参数是table.render中的id。 id的定义用法：设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件，它是表格容器的索引，你在下文诸多地方都将会见识它的存在。值得注意的是：从 layui 2.2.0 开始，该参数也可以自动从<table id="test"></table>中的 id 参数中获取。（摘自layui.table官方文档）
table.render的代码如下:
var table = layui.table;//方法级渲染table.render({elem: '#LAY_table_user', url: '/Storage/GetFixureData', title: '工夹具列表', cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增, cols: [[{checkbox: true, fixed: true }, {field: 'fixure_id', title: '编号', width: 80, sort: true, fixed: true }, {field: 'Name', title: '夹具名称', width: 200 }, {field: 'Model', title: '夹具模组', width: 130, sort: true }, {field: 'PartNo', title: '夹具料号', width: 300 }, {field: 'UsedFor', title: '用途', width: 150 }, {field: 'UsedCount', title: '使用次数', sort: true, width: 120 }, {field: 'Location', title: '库位', sort: true, width: 80 }, {field: 'RegDate', title: '入库日期', width: 100 }, {field: 'workcell', title: '工作部', sort: true, width: 90 }, {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 80 }]], toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板, defaultToolbar: ['filter', 'exports', 'print', {//自定义头部工具栏右侧图标。如无需自定义，去除该参数即可title: '提示', layEvent: 'LAYTABLE_TIPS', icon: 'layui-icon-tips'}], id: 'testReload', page: true, limits: [3, 5, 10] //一页选择显示3,5或10条数据, limit: 10 //一页显示10条数据, parseData: function (res) {//将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据var result;if (this.page.curr) {result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);}else {result = res.data.slice(0, this.limit);}return {"code": res.code, //解析接口状态"msg": res.msg, //解析提示文本"count": res.count, //解析数据长度"data": result //解析数据列表};}});
这里我的id设置为了testReload
4.编写查询按钮点击的事件方法
$("#reloadBtn").click(function (ev) {console.info("reload");var conditionSelect = $("#conditionSelect").val();var conditionInput = $("#conditionInput").val();table.reload('testReload', {url: '/Storage/ConditionSelect', where: {conditionSelect: conditionSelect,conditionInput: conditionInput} //设定异步数据接口的额外参数});})
where中传递的两个值可以在后台controller的相应方法的参数中获取。
5.后台的controller中的action方法（其中有许多自定义的方法，有相应的注释，理解即可）
/// <summary>/// 按条件查询工夹具信息/// </summary>/// <param name="conditionSelect"></param>/// <param name="conditionInput"></param>/// <returns></returns>public ActionResult ConditionSelect(string conditionSelect,string conditionInput){//查询语句string sqlValue = "SELECT * from fixure_detail_view where " + conditionSelect + " like '%" + conditionInput + "%' ORDER BY fixure_id+0";//使用自定义的数据库查询类进行查询SqlDataReader sdr = SqlHelper.ExecuteReader(sqlValue);//如果查询结果为空，则返回空JSON对象if (sdr.HasRows==false){return Json(new{code = 1,msg = " 没有找到相关记录，请更换查询条件或查询关键字试试",count = 0,data = ""}, JsonRequestBehavior.AllowGet);}//将查询结果序列化，转化为json数组字符串string jts = SqlHelper.ToJsonArrayString(sdr);//将json数组字符串转化为对应的list，mvc传递json数据要对其进行反序列化才能正确传递List<fixure_detail_view> list = Newtonsoft.Json.JsonConvert.DeserializeObject<List<fixure_detail_view>>(jts);var result = new{code = 0,msg = "",count = list.Count,data = list,};return Json(result, JsonRequestBehavior.AllowGet);}
参考:Layui的数据表格的多条件查询
