1.实例
创建一个table实例最简单的方式是，在页面放置一个元素 <table id="demo"></table>，然后通过 table.render() 方法指定该容器，如下所示：
<!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 src="/layui/layui.js"></script> <script> layui.use('table', function(){ var table = layui.table; //第一个实例 table.render({ elem: '#demo' ,height: 312 ,url: '/demo/table/user/' //数据接口 ,page: true //开启分页 ,cols: [[ //表头 {field: 'id', title: 'ID', 80, sort: true, fixed: 'left'} ,{field: 'username', title: '用户名', 80} ,{field: 'sex', title: '性别', 80, sort: true} ,{field: 'city', title: '城市', 80} ,{field: 'sign', title: '签名', 177} ,{field: 'experience', title: '积分', 80, sort: true} ,{field: 'score', title: '评分', 80, sort: true} ,{field: 'classify', title: '职业', 80} ,{field: 'wealth', title: '财富', 135, sort: true} ]] }); }); </script> </body> </html>
2.方法渲染
将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个 选择器：
<table id="demo" lay-filter="test"></table>
var table = layui.table; //执行渲染 table.render({ elem: '#demo' //指定原始表格元素选择器（推荐id选择器） ,height: 315 //容器高度 ,cols: [{}] //设置表头 //,…… //更多参数参考右侧目录：基本参数选项 });
3.自动渲染
在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。其特点在上文也有阐述。你需要关注的是以下三点：
1) 带有 class="layui-table" 的 <table> 标签。
2) 对标签设置属性 lay-data="" 用于配置一些基础参数
3) 在 <th> 标签中设置属性lay-data=""用于配置表头信息
<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test"> <thead> <tr> <th lay-data="{field:'id', 80, sort: true}">ID</th> <th lay-data="{field:'username', 80}">用户名</th> <th lay-data="{field:'sex', 80, sort: true}">性别</th> <th lay-data="{field:'city'}">城市</th> <th lay-data="{field:'sign'}">签名</th> <th lay-data="{field:'experience', sort: true}">积分</th> <th lay-data="{field:'score', sort: true}">评分</th> <th lay-data="{field:'classify'}">职业</th> <th lay-data="{field:'wealth', sort: true}">财富</th> </tr> </thead> </table>
4.转换静态表格
可通过init方法转换
<table lay-filter="demo"> <thead> <tr> <th lay-data="{field:'username', 100}">昵称</th> <th lay-data="{field:'experience', 80, sort:true}">积分</th> <th lay-data="{field:'sign'}">签名</th> </tr> </thead> <tbody> <tr> <td>贤心1</td> <td>66</td> <td>人生就像是一场修行a</td> </tr> <tr> <td>贤心2</td> <td>88</td> <td>人生就像是一场修行b</td> </tr> <tr> <td>贤心3</td> <td>33</td> <td>人生就像是一场修行c</td> </tr> </tbody> </table>
执行js方法就可以了
var table = layui.table; //转换静态表格 table.init('demo', { height: 315 //设置高度 ,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致 //支持所有基础参数 });
5.基础参数
1.elem：指定原始 table 容器的选择器或 DOM，方法渲染方式必填
2.cols：设置表头。值是一个二维数组。方法渲染方式必填
3.url：异步数据接口相关参数。其中 url 参数为必填项
4.toolbar：开启表格头部工具栏区域，该参数支持四种类型值：
- toolbar: '#toolbarDemo' //指向自定义工具栏模板选择器
- toolbar: '<div>xxx</div>' //直接传入工具栏模板字符
- toolbar: true //仅开启工具栏，不显示左侧模板
- toolbar: 'default' //让工具栏左侧显示默认的内置模板
5.defaultToolbar：该参数可自由配置头部工具栏右侧的图标按钮
6.设定容器宽度。table容器的默认宽度是跟随它的父元素铺满，你也可以设定一个固定值，当容器中的内容超出了该宽度时，会自动出现横向滚动条。
7.height：设定容器高度，string/number
8.cellMinWidth：全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth
9.done：数据渲染完的回调。你可以借此做一些其它的操作
10.data：直接赋值数据。既适用于只展示一页数据，也非常适用于对一段已知数据进行多页展示。
11.totalRow：是否开启合计行区域。
12.page：开启分页（默认：false）
13.limit：每页显示的条数（默认：10）
14.limits：每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
注意：优先级低于 page 参数中的 limits 参数
15.loading：是否显示加载条（默认：true）。如果设置 false，则在切换分页时，不会出现加载条。该参数只适用于 url 参数开启的方式
16.title：定义 table 的大标题（在文件导出等地方会用到）
17.text：自定义文本，如空数据时的异常提示等。
18.autoSort：默认 true，即直接由 table 组件在前端自动处理排序。
若为 false，则需自主排序，通常由服务端直接返回排序好的数据。
19.initSort：初始排序状态。用于在数据表格渲染完毕时，默认按某个字段排序。
20.id：设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件，它是表格容器的索引，你在下文诸多地方都将会见识它的存在。
21.skin：设定表格各种外观、尺寸等
6.表头参数
如果你采用的是方法渲染，cols 是一个二维数组，表头参数设定在数组内；如果你采用的自动渲染，表头参数的设定应放在 <th> 标签上
1.field：设定字段名。字段名的设定非常重要，且是表格数据列的唯一标识
2.title：设定标题名称
3.width：设定列宽，若不填写，则自动分配；若填写，则支持值为：数字、百分比
请结合实际情况，对不同列做不同设定。
4.minWidth：局部定义当前常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth
5.type：设定列类型。可选值有：
- normal（常规列，无需设定）
- checkbox（复选框列）
- radio（单选框列，layui 2.4.0 新增）
- numbers（序号列）
- space（空列）
6.LAY_CHECKED：是否全选状态（默认：false）。必须复选框列开启后才有效，如果设置 true，则表示复选框默认全部选中。
7.fixed：固定列。可选值有：left（固定在左）、right（固定在右）。一旦设定，对应的列将会被固定在左或右，不随滚动条而滚动。
8.hide：是否初始隐藏列，默认：false。
9.totalRow：是否开启该列的自动合计功能，默认：false。
10.totalRowText：用于显示自定义的合计文本。
11.sort：是否允许排序（默认：false）。如果设置 true，则在对应的表头显示排序icon，从而对列开启排序功能。
12.unresize：是否禁用拖拽列宽（默认：false）。默认情况下会根据列类型（type）来决定是否禁用，如复选框列，会自动禁用。而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能。
13.edit：单元格编辑类型（默认不开启）目前只支持：text（输入框）
14.event：自定义单元格点击事件名，以便在 tool 事件中完成对该单元格的业务处理
15.style：自定义单元格样式。即传入 CSS 样式
16.align：单元格排列方式。可选值有：left（默认）、center（居中）、right（居右）
17.colspan：单元格所占列数（默认：1）。一般用于多级表头
18.rowspan：单元格所占行数（默认：1）。一般用于多级表头
19.templet：自定义列模板，模板遵循 laytpl 语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等
20.toolbar：绑定工具条模板。可在每行对应的列中出现一些自定义的操作性按钮
7.自定义列模板
在默认情况下，单元格的内容是完全按照数据接口返回的content原样输出的，如果你想对某列的单元格添加链接等其它元素，你可以借助该参数来轻松实现。这是一个非常实用且强大的功能，你的表格内容会因此而丰富多样。
方式一：绑定模版选择器。
table.render({ cols: [[ {field:'title', title: '文章标题', 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器 ,{field:'id', title:'ID', 100} ]] }); 等价于： <th lay-data="{field:'title', 200, templet: '#titleTpl'}">文章标题</th> <th lay-data="{field:'id', 100}">ID</th>
下述是templet对应的模板，它可以存放在页面的任意位置。模板遵循于 laytpl 语法，可读取到返回的所有数据
<script type="text/html" id="titleTpl"> <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a> </script> 注意：上述的 {{d.id}}、{{d.title}} 是动态内容，它对应数据接口返回的字段名。除此之外，你还可以读取到以下额外字段： 序号：{{ d.LAY_INDEX }} 由于模板遵循 laytpl 语法（建议细读 laytpl文档 ），因此在模板中你可以写任意脚本语句（如 if else/for等）： <script type="text/html" id="titleTpl"> {{# if(d.id < 100){ }} <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a> {{# } else { }} {{d.title}}(普通用户) {{# } }} </script>
方式二：函数转义。templet 支持函数形式，函数返回一个参数 d，包含接口返回的所有字段和数据。如下所示：
table.render({ cols: [[ {field:'title', title: '文章标题', 200 ,templet: function(d){ return 'ID：'+ d.id +'，标题：<span style="color: #c00;">'+ d.title +'</span>' } } ,{field:'id', title:'ID', 100} ]] });
方式三：直接赋值模版字符。事实上，templet 也可以直接是一段 html 内容，如：
templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>' 注意：这里一定要被一层 <div></div> 包裹，否则无法读取到模板
8.绑定工具条模板toolbar
类型：String，默认值：无，通常你需要在表格的每一行加上 查看、编辑、删除 这样类似的操作按钮，而 tool 参数就是为此而生，你因此可以非常便捷地实现各种操作功能。tool 参数和 templet 参数的使用方式完全类似，通常接受的是一个选择器，也可以是一段HTML字符。
下述是 toolbar 对应的模板，它可以存放在页面的任意位置：
<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> 注意：属性 lay-event="" 是模板的关键所在，值可随意定义。
//监听工具条 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，头部工具栏扩展的右侧图标。'); } });
9.异步数据接口
数据的异步请求由以下几个参数组成
url：接口地址。默认会自动传递两个参数：?page=1&limit=30（该参数可通过 request 自定义）
page 代表当前页码、limit 代表每页数据量
method：接口http请求类型，默认：get
where：接口的其它参数。如：where: {token: 'sasasas', id: 123}
contentType：发送到服务端的内容编码类型。如果你要发送 json 内容，可以设置：contentType: 'application/json'
headers：接口的请求头。如：headers: {token: 'sasasas'}
parseData：数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式假设你接口返回的数据为以下格式
{ "status": 0, "message": "", "total": 180, "data": { "item": [{}, {}] } }
table.render({ elem: '#demp' ,url: '' ,parseData: function(res){ //res 即为原始返回的数据 return { "code": res.status, //解析接口状态 "msg": res.message, //解析提示文本 "count": res.total, //解析数据长度 "data": res.data.item //解析数据列表 }; } //,…… //其他参数 });
request：用于对分页请求的参数：page、limit重新设定名称，如：
table.render({ elem: '#demp' ,url: '' ,request: { pageName: 'curr' //页码的参数名称，默认：page ,limitName: 'nums' //每页数据量的参数名，默认：limit } //,…… //其他参数 });
那么请求数据时的参数将会变为：?curr=1&nums=30
response：如果你想重新规定返回的数据格式，那么可以借助 response 参数，如：
table.render({ elem: '#demp' ,url: '' ,response: { statusName: 'status' //规定数据状态的字段名称，默认：code ,statusCode: 200 //规定成功的状态码，默认：0 ,msgName: 'hint' //规定状态信息的字段名称，默认：msg ,countName: 'total' //规定数据总数的字段名称，默认：count ,dataName: 'rows' //规定数据列表的字段名称，默认：data } //,…… //其他参数 });
10.数据渲染完的回调
无论是异步请求数据，还是直接赋值数据，都会触发该回调。可以利用该回调做一些表格以外元素的渲染。
table.render({ //其它参数在此省略
done: function(res, curr, count){
//如果是异步请求数据方式，res即为你接口返回的信息。
//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
console.log(res);
//得到当前页码
console.log(curr);
//得到数据总量
console.log(count);
}
});
11.头部工具栏右侧图标defaultToolbar
类型：Array，默认值：["filter","exports","print"]
- filter: 显示筛选图标
- exports: 显示导出图标
- print: 显示打印图标
table.render({ //其它参数在此省略
defaultToolbar: ['filter', 'print', 'exports', {
title: '提示' //标题
,layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
,icon: 'layui-icon-tips' //图标类名
}]
});
12.自定义文本text
table 模块会内置一些默认的文本信息，如果想修改，你可以设置以下参数达到目的。
table.render({ //其它参数在此省略
text: {
none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
}
});
13.初始排序initSort
用于在数据表格渲染完毕时，默认按某个字段排序。
//“方法级渲染”配置方式 table.render({ //其它参数在此省略 initSort: { field: 'id' //排序字段，对应 cols 设定的各字段名 ,type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序 } }); 等价于（“自动化渲染”配置方式） <table class="layui-table" lay-data="{initSort:{field:'id', type:'desc'}}" lay-filter="test"> …… </table>
14.表格外观
skin：line （行边框风格）row （列边框风格）nob （无边框风格） 用于设定表格风格，若使用默认风格不设置该属性即可
even：true/false 若不开启隔行背景，不设置该参数即可
size：lg/sm 用于设定表格尺寸，若使用默认尺寸不设置该属性即可
15.获取选中行
语法：table.checkStatus('ID')，其中 ID 为基础参数 id 对应的值
【自动化渲染】 <table class="layui-table" lay-data="{id: 'idTest'}"> …… </table> 【方法渲染】 table.render({ //其它参数省略 id: 'idTest' });
var checkStatus = table.checkStatus('idTest'); //idTest 即为基础参数 id 对应的值 console.log(checkStatus.data) //获取选中行的数据 console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件 console.log(checkStatus.isAll ) //表格是否全选
16.监听复选框选中
table.on('checkbox(test)', function(obj){
console.log(obj.checked); //当前是否选中状态
console.log(obj.data); //选中行的相关数据
console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
});