搜索问题:
$("#searchBtn").click(function () {
//这里以搜索为例
tableIns.reload({
where: {"idCard":$("#idCard").val(),
"phoneNum":$("#phoneNum").val(),
"userName":$("#userName").val(),
"type":$("#userSelect").val()}
,page: {
curr: 1 //重新从第 1 页开始
}
});
});
注意:搜索为button标签,自带事件,不会完成重载,需要改为div
// 表格渲染
var tableIns = table.render({
elem: '#userTable' //指定原始表格元素选择器(推荐id选择器)
, height: vipTable.getFullHeight() //容器高度
, cols: [[ //标题栏
{checkbox: true, sort: false, fixed: true, space: true}
, {field: 'id', title: '序号', width: 80, type:'numbers'}
, {field: 'type', title: '类型', width: 120}
, {field: 'id', title: 'ID', width: 120}
, {field: 'name', title: '用户名', width: 180}
, {field: 'nickname', title: '昵称', width: 180}
, {field: 'authority', title: '权限', width: 180}
, {field: 'identityDocument', title: '身份证号', width: 180}
, {field: 'phone', title: '手机', width: 180}
, {fixed: 'right', title: '操作', width: 250, align: 'center', toolbar: '#barOption'} //这里的toolbar值是模板元素的选择器
]]
, id: 'dataCheck'
, url: ipAddress + "admin/user/query"
, method: 'get'
, page: true
, limits: [5, 10, 30, 50]
, limit: 5 //默认采用30
, loading: false
, where: {"idCard":$("#idCard").val(),
"phoneNum":$("#phoneNum").val(),
"userName":$("#userName").val(),
"type":$("#userSelect").val()}
, done: function (res, curr, count) {
//如果是异步请求数据方式,res即为你接口返回的信息。
//如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
// console.log(res);
//得到当前页码
// console.log(curr);
//得到数据总量
// console.log(count);
}
});
接口返回的数据需要为以下格式:
{ "code" : ""
,"msg" : ""
,"count" : ""
,"data" :[]
}
才会自动填入表格
data中的数据名需要跟表格的列的
一致
表格内数据判断后填写值:
1.
{field: 'identityDocument', title: '身份证号', width: 180, templet: '#emptyIdCard'}
<script type="text/html" id="emptyIdCard">
{{# if(d['identityDocument']){ }}
{{ d['identityDocument'] }}
{{# } else { }}
<span>未实名认证</span>
{{# } }}
</script>
{field: 'type', title: '类型', width: 120, templet: '#userType'}
<script type="text/html" id="userType">
{{# if(d['type'] == '0'){ }}
注册用户
{{# } else if(d['type'] == '1'){ }}
vip用户
{{# } else if(d['type'] == '2'){ }}
管理员
{{# } }}
</script>
2.
{ // 在表格对象cols属性中添加
field: 'visible',
title: '是否显示在单本古籍描述页面',
unresize: true,
filter: "isShow",
sort: false,
templet: function (d) {
if (d.visible == 1 && d.necessary == 1) {
return'<input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="显示|隐藏">';
} else {
return'<input type="checkbox" name="close" lay-skin="switch" lay-text="显示|隐藏">';
}
}
}
监听工具条:
<!-- 表格操作按钮集 -->
<script type="text/html" id="barOption">
<a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-mini layui-btn-normal" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="del">删除</a>
</script>
table.on('tool(userEdit)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
var tr = obj.tr; //获得当前行 tr 的DOM对象
if(layEvent === 'detail'){ //查看
//do somehing
} else if(layEvent === 'del'){ //删除
layer.confirm('确定删除该数据吗?', function(index){
// 删除代码
});
});
} else if(layEvent === 'edit'){ //编辑
}
});
点击增加向表格中加入一条数据
$("#addTable").click(function(){
var data1={"LAY_TABLE_INDEX" : 5
,"caption" : "分類"
,"id" : 7
,"isMain": 1
,"name" : "分類"
,"necessary" : 1
,"visible" : 1};
oldData.data.push(data1);
table.reload('userTable',{
data : oldData
});
});
如果 出现 Layui hint: The ID option was not found in the table instance 这个错误 需要在表格渲染时加入id字段
表格单元格 点击事件:
//监听单元格事件 table.on('tool(userTable)', function(obj){ if(obj.event === 'changeShow'){ alert(1); } });
userTable为表格lay-filter的值,changeShow为单元格event的值