<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>简单例子</title> <link rel="stylesheet" href="css/layui.css"> <style> body{margin: 10px;} .demo-carousel{height: 200px; line-height: 200px; text-align: center;} </style> </head> <body> <script type="text/html" id="switchTpl"> <!-- 这里的 checked 的状态只是演示 --> <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" /> </script> <script type="text/html" id="checkboxTpl"> <!-- 这里的 checked 的状态只是演示 --> <input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" /> </script> <table class="layui-hide" id="demo" lay-filter="test"></table> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> <script src="layui.js"></script> <script> layui.use('table', function(){ var $ = layui.jquery, table = layui.table, form = layui.form; //执行一个 table 实例 table.render({ elem: '#demo' ,height: 420 ,url: '/demo/table/user' //数据接口 ,title: '用户表' ,page: true //开启分页 ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档 ,totalRow: true //开启合计行 ,cols: [[ //表头 {type: 'checkbox', fixed: 'left'} ,{field: 'id', title: 'ID', 80, sort: true, fixed: 'left', totalRowText: '合计：'} ,{field: 'username', title: '用户名', 80} ,{field: 'experience', title: '积分', 80, sort: true, totalRow: true} ,{field: 'sex', title: '性别', 80, sort: true} ,{field: 'score', title: '评分', 80,event: 'setSign', sort: true, totalRow: true} ,{field: 'city', title: '城市', 150} ,{field: 'sign', title: '签名', 200} ,{field:'sex', title:'性别', 85, templet: '#switchTpl', unresize: true} ,{field:'lock', title:'是否锁定', 110, templet: '#checkboxTpl', unresize: true} ,{field: 'classify', title: '职业', 100} ,{field: 'wealth', title: '财富', 135, sort: true, totalRow: true} ,{fixed: 'right', 165, align:'center', toolbar: '#barDemo'} ]] }); //监听头工具栏事件 table.on('toolbar(test)', function(obj){ var checkStatus = table.checkStatus(obj.config.id) ,data = checkStatus.data; //获取选中的数据 switch(obj.event){ case 'add': layer.msg('添加'); break; case 'update': if(data.length === 0){ layer.msg('请选择一行'); } else if(data.length > 1){ layer.msg('只能同时编辑一个'); } else { layer.alert('编辑 [id]：'+ checkStatus.data[0].id); } break; case 'delete': if(data.length === 0){ layer.msg('请选择一行'); } else { layer.msg('删除'); } break; }; }); //监听行工具事件 table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值" var data = obj.data //获得当前行数据 ,layEvent = obj.event; //获得 lay-event 对应的值 if(layEvent == 'detail'){ layer.alert(JSON.stringify(data), { title: '当前行数据：' }); } else if(layEvent === 'del'){ layer.confirm('真的删除行么', function(index){ obj.del(); //删除对应行（tr）的DOM结构 layer.close(index); //向服务端发送删除指令 }); } }); //监听性别操作 form.on('switch(sexDemo)', function(obj){ layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis); }); //监听锁定操作 form.on('checkbox(lockDemo)', function(obj){ layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis); }); }); </script> </body> </html>