模块： layui.use('table', function(){ var table = layui.table; });
官网文档：https://www.layui.com/doc/modules/table.html
目录
简单表格
<!-- 注意class、layui参数、方法 -->
<!-- 方法渲染 -->
<table class="layui-table" id="simple"></table>
<script>
layui.use('table', function(){
var table = layui.table;
table.render( {
elem:'#simple',
url:'./dist/layuiadmin/json/table/user.js', // 注意json内数据格式
cellMinWidth: 80, // 全局定义常规单元格的最小宽度，layui2.2.1新增
cols:[[
// 表头，对应数据格式，此示例只设置3格
// 若不填写width列宽将自动分配
{field:'id', title:'ID', width:80, sort:true, fixed:'left'},
{field:'username', title:'姓名'},
{field:'sex', title:'性别', width:80, sort:true}
]]
// 默认不开启分页(即false)，若要开启，设置：
// page:true,
// 若不想通过url获取数据也可用data设置赋值已知数据
// data:[{"id":"101", "username":"小A", "sex":"男"},{...},{...}]
});
} )
</script>
<!-- 自动渲染 -->
<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', width:80, sort: true}">ID</th>
<th lay-data="{field:'username', width:80}">用户名</th>
<th lay-data="{field:'sex', width:80, sort: true}">性别</th>
<th lay-data="{field:'city'}" colspan="3">地址</th>
</tr>
<tr> <!-- 二级表头，按序显示在设置了colspan的一级表头下 -->
<th lay-data="{field:'province', width:80}">省</th>
<th lay-data="{field:'city', width:120}">市</th>
<th lay-data="{field:'county', width:300}">详细</th>
</tr>
<!-- 继续 tr 将显示三级表头，此处省略... -->
</thead>
</table>
<!-- 转换静态表格 -->
<table lay-filter="parse-table-demo">
<thead> <!-- 表头 -->
<tr><th lay-data="{field:'username', width:200}">昵称</th>
<th lay-data="{field:'joinTime', width:150}">加入时间</th>
<th lay-data="{field:'sign', minWidth: 180}">签名</th> </tr>
</thead>
<tbody> <!-- 数据 -->
<tr> <td>贤1</td><td>2016-11-28</td><td>人生 A</td> </tr>
<tr> <td>贤2</td><td>2016-11-29</td><td>人生 B</td> </tr>
<tr> <td>贤3</td><td>2016-11-30</td><td>人生 C</td> </tr>
</tbody>
</table>
<script>
layui.use('table', function(){
var table = layui.table;
table.init('parse-table-demo', {
height: 315 // 设置高度
,limit: 10 // limit 参数（默认：10）与服务端限定的数据条数一致
//支持所有基础参数
}); };
</script>渲染完成后查看页面源码可见table渲染成div ( table仍存在于源码但实际上页面显示的表格是div盒子构成的 )
参数
elem table容器的选择器或DOM。方法渲染方式必填
cols 设置表头，值是二维数组。方法渲染方式必填 *
url 等 异步数据接口相关参数，其中url参数必填 *
toolbar 开启头部表格工具栏，layui2.4.0新增
defaultToolbar 自由配置头部工具栏右侧图标按钮，默认值：["filter","exports","print"] 即筛选.导出.打印 *
/* table参数toolbar开启头部表格工具栏后即可显示右侧图标按钮，默认顺序 filter exports print
defaultToolbar可设置图标按钮顺序或扩展图标按钮，layui2.5.5新增可以无限扩展，如： */
table.render({ //其它参数在此省略
defaultToolbar: ['filter', 'print', 'exports', {
title: '提示' //标题
,layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
,icon: 'layui-icon-tips' //图标类名
}]
});width 容器宽度，默认跟随父元素铺满，内容超过宽度会出现横向滚动条
height 容器高度 *
/* 设定容器高度，默认不填写 即高度随列数据自适应，固定值 则当内容超出将自动出现滚定条，
layui2.1.0新增 full-差值 则高度始终填满 */
//“方法级渲染”配置方式
table.render({ //其它参数在此省略
height: 315 //固定值
});
table.render({ //其它参数在此省略
height: 'full-20' //高度最大化减去差值
}); // 等价于（“自动化渲染”配置方式）
<table class="layui-table" lay-data="{height:315}" lay-filter="test"> …… </table>
<table class="layui-table" lay-data="{height:'full-20'}" lay-filter="test"> …… </table>
celMinWidth 单元格最小宽度，默认60，优先级低于表头参数的minWidth
done 数据渲染完的回调(函数) *
/* 无论是异步请求数据，还是直接赋值数据，都会触发该回调
可以利用该回调做一些表格以外元素的渲染 */
table.render({ //其它参数在此省略
done: function(res, curr, count){
//如果是异步请求数据方式，res即为你接口返回的信息。
//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
console.log(res);
//得到当前页码
console.log(curr);
//得到数据总量
console.log(count);
}
});data 赋值数据
totalRow 是否开启合计行区域，layui2.4.0新增
page 开启分页，默认false，layui2.2.0新增
limit 每页显示条数，默认10，务必对应limits，优先级低于page参数的limit
limits 每页条数的选择项，默认[10,20,30,40,50,60,70,80,90]，优先级低于page参数的limits
loading 切换分页时是否显示加载条，默认true，只适用于url参数开启的方式
title 定义table的大标题，文件导出时有用，layui2.4.0新增
text 自定义文本，如空数据时异常提示等，layui2.2.5新增 *
/* 可以设置text参数修改 table 模块会内置一些默认的文本信息 */
table.render({ //其它参数在此省略
text: {
none: '暂无相关数据' //默认：无数据
}
});autoSort 默认true 直接由table组件在前端自动处理排序，false 则要自主排序--通常由服务端直接返回排序好的数据，layui2.4.4新增
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>id 设定容器唯一id，layui2.2.0开始可以自动从<table id=""></table>获取id参数
skin 设定表格的各种外观、尺寸等 *
/* 控制表格外观，主要参数：
skin 可选值 line(行边框) row(列边框) nob(无边框) 表格风格 默认风格则不设置该属性即可
even 可选值 true/false 是否开启隔行背景 默认不开启则不设置该属性即可
size 可选值 sm(小尺寸) lg(大尺寸) 表格尺寸 默认尺寸则不设置该属性即可 */
//“方法级渲染”配置方式
table.render({ //其它参数在此省略
skin: 'line' //行边框风格
,even: true //开启隔行背景
,size: 'sm' //小尺寸的表格
}); // 等价于（“自动化渲染”配置方式）
<table class="layui-table" lay-data="{skin:'line', even:true, size:'sm'}" lay-filter="test"> …… </table>cols参数：
field 字段名，作表格数据列的唯一标识
title 标题名称
width 列宽，可设置为数字、百分比，不填写则自动分配
minWidth 单元格最小宽度，默认60，优先级高于基础参数的cellMinWidth
type 列类型，可选值：normal (常规 无需设定)、checkbox (复选框)、radio (单选框 layui2.4.0新增)、numbers (序号)、space (空)
LAY_CHECKED 是否全选状态，默认false，复选框列开启后才有效
fixed 固定列，可选值：left (固定在左)、right (固定在右)，固定后不会碎滚动条滚动
hide 是否初始隐藏列，默认false，layui2.4.0新增
totalRow 是否开启该列的自动合计功能，默认false，为true则默认由前端合计当前行数据，layui2.5.6起优先读取接口返回的合计行数据
totalRowText 显示自定义的合计文本，layui2.4.0新增
sort 是否允许排序，默认false，为true则在对应表头显示排序icon并开启排序功能
unresize 是否禁用拖拽列宽，默认false 会根据type决定是否禁用 如复选框列会自动禁用，为true则禁用
edit 单元格编辑类型，默认不开启，目前只支持text 即输入框
event 自定义单元格点击事件名，以在tool事件中完成对该单元格的业务处理
style 自定义单元格样式，即传入css样式
align 单元格排列方式，可选值：left (默认)、center (居中)、right (居右)
colspan 单元格所占列数，默认1，一般用于多级表头
rowspan 单元格所占行数，默认1，一般用于多级表头
templet 自定义列模板 (表头下方数据模板)，遵循laytpl语法 *
toolbar 绑定工具条模板 *
/* cols参数--- templet 自定义模板：
templet 为表格数据设置统一模板
如果自定义模版的字符量太大，推荐采用【方式一】
如果自定义模板的字符量适中，或者想更方便地调用外部方法，推荐采用【方式二】
如果自定义模板的字符量很小，推荐采用【方式三】 */
// 假设已通过接口获得数据 d，能直接取d.title做表头'文章标题'下的数据
// 方式一： 绑定模版选择器
table.render({
cols: [[
{field:'title', title: '文章标题', width: 200, templet: '#titleTpl'}
//这里的templet值是模板元素的选择器
,{field:'id', title:'ID', width:100}
]]
}); // 等价于：
<th lay-data="{field:'title', width: 200, templet: '#titleTpl'}">文章标题</th>
<th lay-data="{field:'id', width:100}">ID</th>
// 模板（可以存放在页面的任意位置）：
<script type="text/html" id="titleTpl">
<a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
<!-- 根据语法模板也可以这样用： --> <!--
{{# if(d.id < 100){ }}
<a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
{{# } else { }}
{{d.title}}(普通用户)
{{# } }}
-->
</script>
// 方式二： 函数转义（layui2.2.5起templet开始支持函数形式）
// 函数返回一个参数 d，包含接口返回的所有字段和数据，如：
table.render({
cols: [[
{field:'title', title: '文章标题', width: 200
,templet: function(d){
return 'ID：'+ d.id +'，标题：<span style="color: #c00;">'+ d.title +'</span>'
}
}
,{field:'id', title:'ID', width:100}
]]
});
// 方式三： 直接赋值模版字符（直接是一段html内容）
templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'
// 注：必须有一层 <div></div> 包裹 否则无法读取到模板
/* cols参数--- toolbar 绑定工具条模板：
若需要在表格上添加类似 查看 编辑 删除 的操作按钮，可以借由toolbar参数实现
tool 参数和 templet 参数的使用方式完全类似，通常接受的是一个选择器 也可以是一段HTML字符
注：属性 lay-event="" 是模板的关键所在，值可随意定义 */
// 如：
// 假设容器：
<table id="test-table-toolbar" lay-filter="test-table-toolbar"></table>
// 渲染：
table.render({
cols: [[
{field:'id', title:'ID', width:100}
,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}
//这里的toolbar值是模板元素的选择器
]]
}); // 等价于：
<th lay-data="{field:'id', width:100}">ID</th>
<th lay-data="{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}"></th>
// 模板（可以存放在页面的任意位置）：
<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>
// 监听工具条（功能实现）：
table.on('tool(test)', function(obj){
//注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
//如：table.on('toolbar(test-table-toolbar)', function(obj){})
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，头部工具栏扩展的右侧图标。');
}
});
异步数据接口：
参数：
url 接口地址，默认自动传2个参数 ?page=1&limit=30 可通过request定义，page表示当前页码 limit表示每页数据量
method 接口http请求类型，默认get
where 接口其他参数，如 where:{token:'test',id:123}
contentType 发送到服务端的内容编码类型，如 要发送 json 内容 可以设置 contentType: 'application/json'
headers 接口的请求头，如 headers: {token: 'sasasas'}
parseData 数据格式解析的回调函数，将返回的任意数据格式解析成 table 组件规定的数据格式，layui2.4.0版本新增 *
request 用于对分页请求的参数 page limit重新设定名称，layui2.1.0版本新增 *
response 重新设定返回的数据格式，layui2.1.0版本新增 *
示例：
//“方法级渲染”配置方式
table.render({ //其它参数在此省略
url: '/api/data/'
//where: {token: 'sasasas', id: 123} //如果无需传递额外参数，可不加该参数
//method: 'post' //如果无需自定义HTTP类型，可不加该参数
//request: {} //如果无需自定义请求参数，可不加该参数
//response: {} //如果无需自定义数据响应名称，可不加该参数
}); // 等价于（“自动化渲染”配置方式）
<table class="layui-table" lay-data="{url:'/api/data/'}" lay-filter="test"> …… </table>
开放基础方法
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 即为 table 的 id 参数对应的值
var checkStatus = table.checkStatus(id);
console.log( checkStatus.data, checkStatus.data, checkStatus.isAll );
// 对应： 选中行数据，选中行数量，是否全选
table.render(options); // 用于表格方法级渲染，核心方法。详见: 方法级渲染
table.reload(id, options); // 表格重载（对表格重新进行渲染 包括数据请求和基础参数的读取） *
table.reload(id, options); // id即基础参数id，options即各项基础参数
tableIns.reload(options); // 仅限方法级渲染使用，tableIns可通过 var tableIns=table.render() 得到
table.resize(id); // 重置表格尺寸，id指table参数id
table.exportFile(id, data, type); // 导出数据（尽管 table 的工具栏内置了数据导出按钮 但有时可能需要通过方法去导出任意数据） *
方法示例 -
事件监听：lay-event="" + table.on()
例：
<!-- 原始容器 -->
<table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar"></table>
<!-- 头部工具栏模板~ 表格上方操作按钮 -->
<script type="text/html" id="test-table-toolbar-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="test-table-toolbar-barDemo">
<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>
layui.use('table', function(){
var table = layui.table;
// 方法级渲染
table.render({
elem: '#test-table-toolbar'
,url: layui.setter.base + 'json/table/demo.js'
,toolbar: '#test-table-toolbar-toolbarDemo'
,title: '用户数据表'
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
,{field:'username', title:'用户名', width:120, edit: 'text'}
,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
return '<em>'+ res.email +'</em>'
}}
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
,{field:'city', title:'城市', width:100}
,{field:'sign', title:'签名'}
,{field:'experience', title:'积分', width:80, sort: true}
,{field:'ip', title:'IP', width:120}
,{field:'logins', title:'登入次数', width:100, sort: true}
,{field:'joinTime', title:'加入时间', width:120}
,{fixed: 'right', title:'操作', toolbar: '#test-table-toolbar-barDemo', width:150}
]]
,page: true
});
// 监听事件：
// 头工具栏事件
table.on('toolbar(test-table-toolbar)', 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;
};
});
// 监听行工具事件
table.on('tool(test-table-toolbar)', function(obj){
var data = obj.data;
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>表格重载：
/* 示例1：自动化渲染的重载 */
//【HTML】
<table class="layui-table" lay-data="{id: 'idTest'}"> …… </table>
//【JS】
table.reload('idTest', {
url: '/api/table/search'
,where: {} //设定异步数据接口的额外参数
//,height: 300
});
/* 示例2：方法级渲染的重载 */
//所获得的 tableIns 即为当前容器的实例
var tableIns = table.render({
elem: '#id'
,cols: [] //设置表头
,url: '/api/data' //设置异步接口
,id: 'idTest'
});
//这里以搜索为例
tableIns.reload({
where: { //设定异步数据接口的额外参数，任意设
aaaaaa: 'xxx'
,bbb: 'yyy'
//…
}
,page: {
curr: 1 //重新从第 1 页开始
}
});
//上述方法等价于
table.reload('idTest', {
where: { //设定异步数据接口的额外参数，任意设
aaaaaa: 'xxx'
,bbb: 'yyy'
//…
}
,page: {
curr: 1 //重新从第 1 页开始
}
}); //只重载数据导出数据：
var ins1 = table.render({
elem: '#demo'
,id: 'test'
//,…… //其它参数
})
// 将上述表格示例导出为 csv 文件
table.exportFile(ins1.config.id, data); //data 为该实例中的任意数量的数据
// 事实上，该方法也可以不用依赖 table 的实例，可直接导出任意数据：
table.exportFile(['名字','性别','年龄'], [
['张三','男','20'],
['李四','女','18'],
['王五','女','19']
], 'csv'); //默认导出 csv，也可以为：xls
1567
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
