主要是在后台实现数据的条件查询，然后将按条件查询出来的结果返回给前端，重载表格。
这里实现环境我使用的是.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);
}
