列表：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="__STATIC__/add/layui/css/layui.css" media="all"> <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --> </head> <body> <div class="layui-btn-group demoTable"> <button class="layui-btn" data-type="getCheckData">获取选中行数据</button> <button class="layui-btn" data-type="getCheckLength">获取选中数目</button> <button class="layui-btn" data-type="isAll">验证是否全选</button> </div> <table class="layui-table" lay-data="{height:'', url:'{:url('Achievementactivity/fenye')}', page:true, id:'test2', skin: 'row', even: true, id:'idTest'}" lay-filter="demo"> <thead> <tr> <th lay-data="{type:'checkbox'}">ID</th> <th lay-data="{field:'id', sort: true}">ID</th> <th lay-data="{field:'title'}">标题</th> <th lay-data="{field:'status', sort: true, templet: '#sexTpl'}">状态</th> <th lay-data="{field:'start_time'}">开始时间</th> <th lay-data="{field:'end_time'}">结束时间</th> <th lay-data="{field:'is_check',sort: true}">核算</th> <th lay-data="{fixed: 'right', align:'center', toolbar: '#barDemo'}">操作</th> </tr> </thead> </table> <!-- 日志弹出层 --> <div id="tanchu" style="display: none"> <table class="layui-hide" id="rizhi" lay-filter="rizhi"></table> </div> <!-- <table class="layui-hide" ></table> <script type="text/html" > <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" > <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="__STATIC__/js/jquery.min.js" charset="utf-8"></script> <script src="__STATIC__/add/layui/layui.js" charset="utf-8"></script> <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> <script type="text/html" id="usernameTpl"> <a href="/?table-demo-id={{d.id}}" class="layui-table-link" target="_blank">{{ d.title }}</a> </script> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" href='{:url("Achievementactivity/layuiadd")}'>添加</a> <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-xs" lay-event="rizhi">日志</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> <script> layui.use('table', function(){ var table = layui.table; //监听表格复选框选择 table.on('checkbox(demo)', function(obj){ //console.log(obj) }); //监听工具条 table.on('tool(demo)', function(obj){ var data = obj.data; if(obj.event === 'detail'){ // 自动获取id layer.msg('ID：'+ data.id + ' 的查看操作'); } else if(obj.event === 'del'){ layer.confirm('真的删除'+data.id+'行么', function(index){ obj.del(); layer.close(index); }); } else if(obj.event === 'edit'){ layer.alert('编辑行：<br>'+ JSON.stringify(data)) } else if(obj.event === 'rizhi') { //页面层 layer.open({ type: 1, skin: 'layui-layer-rim', //加上边框 area: ['95%', '500px'], //宽高 title:'日志详情', content:$("#tanchu"), // 日志弹框列表 js 实现代码 success: function(layero, index){ layui.use('table', function(){ var table = layui.table; var cols = [[ //标题栏 {field:'id', title: 'ID', sort: true} ,{field:'title', title: '标题'} ,{field:'status', title: '状态', sort: true}, {field:'start_time', title: '开始时间', sort: true} ]] //展示已知数据 table.render({ elem: '#rizhi' , url: '{:url("Achievementactivity/fenye")}' ,size:'sm' ,cols:cols ,even: true , height: '420' ,page: true //是否显示分页 }); }); } }); //layer.msg('日志ID：'+ data.id + ' 的日志操作'); } }); var $ = layui.$, active = { getCheckData: function(){ //获取选中数据 var checkStatus = table.checkStatus('idTest'), data = checkStatus.data; layer.alert(JSON.stringify(data)); } ,getCheckLength: function(){ //获取选中数目 var checkStatus = table.checkStatus('idTest') ,data = checkStatus.data; layer.msg('选中了：'+ data.length + ' 个'); } ,isAll: function(){ //验证是否全选 var checkStatus = table.checkStatus('idTest'); layer.msg(checkStatus.isAll ? '全选': '未全选') } }; $('.demoTable .layui-btn').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); }); </script> <script type="text/html" id="sexTpl"> {{# if(d.status === '0'){ }} <span style="color: #ff0023;">未上架</span> {{# } else if(d.status === '1'){ }} <span >已上架</span> {{# } else if(d.status === '2'){ }} <span style="color: #009688;" >已下架</span> {{# } }} </script> <script type="text/html" id="barDemo1"> <a class="layui-btn layui-btn-xs" lay-event="edit">工具性按钮</a> </script> <!-- <script> layui.use('table', function(){ var table = layui.table; table.render({ elem: '#test' ,url:'{:url("Achievementactivity/fenye")}' ,toolbar: '#toolbarDemo' ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可 title: '提示' ,layEvent: 'LAYTABLE_TIPS' ,icon: 'layui-icon-tips' }] ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档 layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 //,curr: 5 //设定初始在第 5 页 ,groups: 1 //只显示 1 个连续页码 ,first: true //不显示首页 ,last: true //不显示尾页 } ,cols: [[ {type:'checkbox'} ,{field:'id', title: 'ID', sort: true} ,{field:'title', title: '标题'} ,{field:'status', title: '状态', sort: true} ,{field:'start_time', title: '开始时间'} ,{field:'end_time', title: '结束时间', minWidth: 150} ,{field:'is_check', 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(obj.event === 'edit'){ layer.prompt({ formType: 2 ,value: data.email }, function(value, index){ obj.update({ email: value }); layer.close(index); }); } }); }); </script> --> </body> </html>