分类:
前端
html:
<table class="layui-hide" id="test" lay-filter="test"></table> <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button> <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button> <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> </div> </script> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-xs" lay-event="update">更新</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script>
js:
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#test'
, url: '/home/getdata'
, limit: 5
, limits: [5, 10, 15, 20]
, toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
, cols: [[
{ type: 'checkbox', fixed: 'left' }
, { field: 'Id', width: 80, title: 'ID', sort: true }
, { field: 'UserName', title: '用户名' }
, { field: 'Number', title: '学号', sort: true }
, { field: 'UClass', title: '班级' }
, { field: 'CheckType', title: '状态' } //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
, { field: 'IDCard', title: '积分', sort: true }
, { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
]], page: true
});
//头工具栏事件
table.on('toolbar(test)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id);
switch (obj.event) {
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了：' + data.length + ' 个');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选' : '未全选');
break;
//自定义头工具栏右侧图标 - 提示
case 'LAYTABLE_TIPS':
layer.alert('这是工具栏右侧自定义的一个图标按钮');
break;
};
});
//监听行工具事件
table.on('tool(test)', function (obj) {
var data = obj.data;
console.log(obj)
if (obj.event === 'del') {
layer.confirm('真的删除行么', function (index) {
obj.del();
layer.close(index);
});
}
else if ("update" == obj.event) {
alert("你点击了更新");
}
else if (obj.event === 'edit') {
layer.prompt({
formType: 2
, value: data.email
}, function (value, index) {
obj.update({
email: value
});
layer.close(index);
});
}
});
});注意：table.on('tool(test)'
layui绑定事件的时候这里的test并不是表格的id，而是lay-filter="test",所以这里如果没有写lay-filter熟悉事件是绑定不了的。其实可以看到如果是用的id的情况，layui前面也是会加#井号的
评价
