官网文档：https://www.layui.com/doc/modules/table.html

模块：  layui.use('table', function(){ var table = layui.table; });

目录

简单表格

参数

开放方法

方法 - 事件监听

---

简单表格

<!-- 注意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'}">城市</th>
</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>

 

参数

elem      table容器的选择器或DOM。方法渲染方式必填
cols      设置表头，值是二维数组。方法渲染方式必填
url      异步数据接口，其中url参数必填
toolbar      开启头部表格工具栏，layui2.4.0新增
defaultToolbar      自由配置头部工具栏右侧图标按钮
width      容器宽度，默认跟随父元素铺满，内容超过宽度会出现横向滚动条
height      容器高度
celMinWidth      单元格最小宽度，默认60，优先级低于表头参数的minWidth
done      数据渲染万的回调
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新增
autoSort      默认true 直接由table组件在前端自动处理排序，false 则要自主排序--通常由服务端直接返回排序好的数据，layui2.4.4新增
initSort      初始排序状态，数据表格渲染完毕时默认以某个字段排序
id      设定容器唯一id，layui2.2.0开始可以自动从<table id=""></table>获取id参数
skin      设定表格的各种外观、尺寸等

 

开放方法

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 参数对应的值

      var checkStatus = table.checkStatus(id);
      console.log( checkStatus.data, checkStatus.data, checkStatus.isAll );
      // 选中行数据，选中行数量，是否全选

table.render(options);      // 用于表格方法级渲染，核心方法。详见: 方法级渲染

table.reload(id, options);      // 表格重载

table.resize(id);      // 重置表格尺寸

table.exportFile(id, data, type);      // 导出数据

 

方法 - 事件监听

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>