<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>table模块快速使用</title> <link rel="stylesheet" href="layui/css/layui.css" media="all"> </head> <body> <table id="demo" lay-filter="test"></table> <!-- 工具栏模板： --> <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="add">添加</button> <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button> <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button> <button class="layui-btn layui-btn-sm" lay-event="basicfun">基础方法</button> </div> </script> <!-- 绑定工具条模板（每行数据最后的操作按钮） --> <script type="text/html" id="barDemo"> <a class="layui-btn 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> <!-- 这里同样支持 laytpl 语法，如： --> {{# if(d.auth > 2){ }} <a class="layui-btn layui-btn-xs" lay-event="check">审核</a> {{# } }} </script> <!-- 自定义列模板 --> <script type="text/html" id="titleTpl"> <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a> </script> <script src="layui/layui.js"></script> <script> layui.use('table', function(){ var table = layui.table; //第一个实例 var tableObj = table.render({ elem: '#demo' ,cols: [[ //表头 {type: 'checkbox', LAY_CHECKED: true} ,{type: 'radio'} ,{type: 'numbers'} ,{type: 'space'} ,{field: 'id', title: 'ID', 80, sort: true, hide: true} ,{field: 'username', title: '用户名', 80, templet: '#titleTpl'} ,{field: 'sex', title: '性别', 80, sort: true, unresize: true, edit: 'text', event: '编辑事件名字', style: 'background-color: #5FB878; color: #fff;', align: 'center'} ,{field: 'city', title: '城市', 80} ,{field: 'sign', title: '签名', 177} ,{field: 'experience', title: '积分', 80, sort: true} ,{field: 'score', title: '评分', 80, sort: true, totalRow: true} ,{field: 'classify', title: '职业', 80} ,{field: 'wealth', title: '财富', 135, sort: true} ,{field: 'do', title: '操作', 300, toolbar: '#barDemo'} ]] //,url: 'js/user.json' //数据接口 //表格头部工具栏区域 ,toolbar: '#toolbarDemo' //头部工具栏右侧图标 ,defaultToolbar: ['filter', 'print', 'exports', { title: '提示' //标题 ,layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用 ,icon: 'layui-icon-tips' //图标类名 },{title: '获取选中行' //标题 ,layEvent: 'getcheckStatus' //事件名，用于 toolbar 事件中使用 ,icon: 'layui-icon-tips' //图标类名 }] //, 312 //宽 //设定容器高度:Number/String //,height: 315 //固定值 //,height: 'full-20' //高度最大化减去差值 //全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。 //,cellMinWidth: 1000 //数据渲染完的回调 ,done: function(res, curr, count){ //如果是异步请求数据方式，res即为你接口返回的信息。 //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度 console.log(res); //得到当前页码 console.log(curr); //得到数据总量 console.log(count); } //数据请求失败的回调 ,error: function(){ } ,data: [{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"wealth":64928690,"classify":"词人","score":27},{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6},{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87},{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34},{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28},{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"wealth":16503371,"classify":"词人","score":14},{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"classify":"词人","score":75},{"id":10010,"username":"user-10","sex":"女","city":"城市-10","sign":"签名-10","experience":1016,"logins":182,"wealth":71294671,"classify":"诗人","score":34},{"id":10011,"username":"user-11","sex":"女","city":"城市-11","sign":"签名-11","experience":492,"logins":107,"wealth":8062783,"classify":"诗人","score":6},{"id":10012,"username":"user-12","sex":"女","city":"城市-12","sign":"签名-12","experience":106,"logins":176,"wealth":42622704,"classify":"词人","score":54},{"id":10013,"username":"user-13","sex":"男","city":"城市-13","sign":"签名-13","experience":1047,"logins":94,"wealth":59508583,"classify":"诗人","score":63},{"id":10014,"username":"user-14","sex":"男","city":"城市-14","sign":"签名-14","experience":873,"logins":116,"wealth":72549912,"classify":"词人","score":8},{"id":10015,"username":"user-15","sex":"女","city":"城市-15","sign":"签名-15","experience":1068,"logins":27,"wealth":52737025,"classify":"作家","score":28},{"id":10016,"username":"user-16","sex":"女","city":"城市-16","sign":"签名-16","experience":862,"logins":168,"wealth":37069775,"classify":"酱油","score":86},{"id":10017,"username":"user-17","sex":"女","city":"城市-17","sign":"签名-17","experience":1060,"logins":187,"wealth":66099525,"classify":"作家","score":69},{"id":10018,"username":"user-18","sex":"女","city":"城市-18","sign":"签名-18","experience":866,"logins":88,"wealth":81722326,"classify":"词人","score":74},{"id":10019,"username":"user-19","sex":"女","city":"城市-19","sign":"签名-19","experience":682,"logins":106,"wealth":68647362,"classify":"词人","score":51},{"id":10020,"username":"user-20","sex":"男","city":"城市-20","sign":"签名-20","experience":770,"logins":24,"wealth":92420248,"classify":"诗人","score":87},{"id":10021,"username":"user-21","sex":"男","city":"城市-21","sign":"签名-21","experience":184,"logins":131,"wealth":71566045,"classify":"词人","score":99},{"id":10022,"username":"user-22","sex":"男","city":"城市-22","sign":"签名-22","experience":739,"logins":152,"wealth":60907929,"classify":"作家","score":18},{"id":10023,"username":"user-23","sex":"女","city":"城市-23","sign":"签名-23","experience":127,"logins":82,"wealth":14765943,"classify":"作家","score":30},{"id":10024,"username":"user-24","sex":"女","city":"城市-24","sign":"签名-24","experience":212,"logins":133,"wealth":59011052,"classify":"词人","score":76},{"id":10025,"username":"user-25","sex":"女","city":"城市-25","sign":"签名-25","experience":938,"logins":182,"wealth":91183097,"classify":"作家","score":69},{"id":10026,"username":"user-26","sex":"男","city":"城市-26","sign":"签名-26","experience":978,"logins":7,"wealth":48008413,"classify":"作家","score":65},{"id":10027,"username":"user-27","sex":"女","city":"城市-27","sign":"签名-27","experience":371,"logins":44,"wealth":64419691,"classify":"诗人","score":60},{"id":10028,"username":"user-28","sex":"女","city":"城市-28","sign":"签名-28","experience":977,"logins":21,"wealth":75935022,"classify":"作家","score":37},{"id":10029,"username":"user-29","sex":"男","city":"城市-29","sign":"签名-29","experience":647,"logins":107,"wealth":97450636,"classify":"酱油","score":27}] ,totalRow: true //是否开启合计行区域 ,page: true //开启分页 ,limit: 10 //每页显示的条数 ,limits: [10,20,30,40,50,60,70,80,90] ,loading: true //是否显示加载条（默认：true）。如果设置 false，则在切换分页时，不会出现加载条。该参数只适用于 url 参数开启的方式 ,title: "用户表" //定义 table 的大标题（在文件导出等地方会用到） //自定义文本 ,text: { none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增 } ,autoSort: false //初始排序:用于在数据表格渲染完毕时，默认按某个字段排序。注：该参数为 layui 2.1.1 新增 ,initSort: { field: 'id' //排序字段，对应 cols 设定的各字段名 ,type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序 } ,id: 'idTest' //设定表格外观 //,skin: 'line' //行边框风格 ,even: true //开启隔行背景 ,size: 'sm' //小尺寸的表格 }); /******基础方法******/ //table.set(options); //设定全局默认参数。options即各项基础参数 //table.on('event(filter)', callback); //事件。event为内置事件名（详见下文），filter为容器lay-filter设定的值 //table.init(filter, options); //filter为容器lay-filter设定的值，options即各项基础参数。例子见：转换静态表格 //table.checkStatus(id); //获取表格选中行（下文会有详细介绍）。id 即为 id 参数对应的值 //table.render(options); //用于表格方法级渲染，核心方法。应该不用再过多解释了，详见：方法级渲染 //table.reload(id, options, deep); //表格重载 //table.resize(id); //重置表格尺寸 //table.exportFile(id, data, type); //导出数据 //table.getData(id); //用于获取表格当前页的所有行数据（layui 2.6.0 开始新增） // 触发头部工具栏事件 table.on('toolbar(test)', function(obj){ console.log(tableObj); console.log(obj); var checkStatus = table.checkStatus(obj.config.id); //获取选中的数据 checkStatus.isAll;//判断是否全选 console.log(checkStatus); //obj.event获取事件名 switch(obj.event){ case 'add': layer.msg('添加'); break; case 'delete': layer.msg('删除'); break; case 'update': layer.msg('编辑'); break; case 'basicfun': /******基础方法******/ var checkStatus = table.checkStatus(obj.config.id); //获取选中的数据 table.resize('idTest'); //执行表格“尺寸结构”的重置，一般写在对应的事件中 //表格重载 tableObj.reload({ // where: { //设定异步数据接口的额外参数，任意设 // aaaaaa: 'xxx' // ,bbb: 'yyy' // //… // }, page: { curr: 1 //重新从第 1 页开始 } }); //导出任意数据 table.exportFile(tableObj.config.id, checkStatus); //data 为该实例中的任意数量的数据 //事实上，该方法也可以不用依赖 table 的实例，可直接导出任意数据： table.exportFile(['名字','性别','年龄'], [ ['张三','男','20'], ['李四','女','18'], ['王五','女','19'] ], 'csv'); //默认导出 csv，也可以为：xls break; }; }); //工具条事件 table.on('tool(test)', 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){ obj.del(); //删除对应行（tr）的DOM结构，并更新缓存 layer.close(index); //向服务端发送删除指令 }); } else if(layEvent === 'edit'){ //编辑 //do something //同步更新缓存对应的值 obj.update({ username: '123' ,title: 'xxx' }); } else if(layEvent === 'LAYTABLE_TIPS'){ layer.alert('Hi，头部工具栏扩展的右侧图标。'); } }); //触发复选框选择 table.on('checkbox(test)', function(obj){ console.log(obj); console.log(obj.checked); //当前是否选中状态 console.log(obj.data); //选中行的相关数据 console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one }); //触发单元格编辑 table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值" console.log(obj.value); //得到修改后的值 console.log(obj.field); //当前编辑的字段名 console.log(obj.data); //所在行的所有相关数据 }); //触发行单击事件 table.on('row(test)', function(obj){ console.log(obj.tr) //得到当前行元素对象 console.log(obj.data) //得到当前行数据 //obj.del(); //删除当前行 //obj.update(fields) //修改当前行数据 }); //触发行双击事件 table.on('rowDouble(test)', function(obj){ //obj 同上 }); //触发排序事件 table.on('sort(test)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值" console.log(obj.field); //当前排序的字段名 console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序） console.log(this); //当前排序的 th 对象 //尽管我们的 table 自带排序功能，但并没有请求服务端。 //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如： table.reload('idTest', { initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式） field: obj.field //排序字段 ,order: obj.type //排序方式 } }); layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type); }); }); </script> </body> </html>