目录

一：表格的渲染

API

方法配置渲染

模板配置渲染

静态表格渲染

二：表格的属性 

基础属性

异步属性

返回数据中的特定字段

表头属性

重载

完整重载

仅数据重载 2.7+

获取选中行

设置行选中状态 2.8+

获取当前页接口数据

获取表格缓存数据集

重置尺寸

导出数据

获取配置项 2.8+

设置列显示或隐藏 2.8+

一：表格的渲染

API

渲染

table 提供了以下三种渲染模式，在实际使用时，一般按情况选择其中一种即可。

方法配置渲染

table.render(options);

• 参数 options : 基础属性配置项。#详见属性

该方法返回当前实例对象，包含可操作当前表格的一些成员方法。

<table id="test"></table><script>
layui.use(function(){var table = layui.table;// 渲染，并获得实例对象var inst = table.render({elem: '#test', // 绑定元素选择器// 其他属性// …});// 实例对象成员inst.config; // 当前表格配置属性inst.reload(options, deep); // 对当前表格的完整重载。参数 deep 表示是否深度重载。inst.reloadData(options, deep); // 对当前表格的数据重载。参数 deep 同上。inst.resize(); // 对当前表格重新适配尺寸inst.setColsWidth() // 对当前表格重新分配列宽
})
</script>

模板配置渲染

在 <table> 元素中直接书写 lay-options="{}" 属性，组件将自动对其进行解析并完成渲染。

<!-- 此处 `lay-options` 定义基础属性 -->
<table class="layui-table" lay-options="{url: ''}" id="test"><thead><tr><!-- 此处 `lay-options` 定义表头属性 --><th lay-options="{field: 'title'}">Title</th> </tr></thead>
</table>

2.8 之前版本通过 lay-data="{}" 定义属性配置项；
2.8+ 版本推荐采用 lay-options，但同时兼容 lay-data。

静态表格渲染

table.init(filter, options);

• 参数 filter : <table> 元素对应的 lay-filter 属性值
• 参数 options : 基础属性配置项。#详见属性

该方法用于将已输出在页面中的静态表格内容转换为动态 table 组件

<table lay-filter="test">表格内容
</table><script>
layui.use(function(){var table = layui.table;// 将静态表格进行动态化table.init('test', {height: 366,// 其他属性// …});
});
</script>

二：表格的属性 

属性是指 table 渲染、重载 时的配置选项（options），它本身是一个 object 参数。如： 

// 渲染
table.render({// optionselem: '',cols: [[]],// …
}); 
// 重载
table.reload(id, {// options
});若为模板配置渲染，则 lay-options 或 lay-data 的属性值即为属性的配置选项（：
<table lay-options="{url: ''}"> … </table>

table 的属性众多，我们大致分为以下几种：

基础属性

异步属性

异步属性本质也是基础属性，当开启 url 属性时才有效，由于相关属性成员较多，所以单独提取介绍。

返回数据中的特定字段

在返回的数据中，允许规定某些特定字段，以便 table 组件进行相应的特定解析。

示例一: 在返回的数据中设置特定字段：

1. {
2. "code": 0,
3. "count": 1000,
4. "data": [{},{
5. LAY_DISABLED: true
6. }]
7. }

示例二: 在模板中读取特定字段示例：

1. <script type="text/html" id="TPL-demo-xxx">
2. 当前行下标: {{= d.LAY_INDEX }}
3. 当前列的某个表头属性: {{= d.LAY_COL.field }}
4. </script>

表头属性

表头属性是基础属性 cols 的子集，其使用频率甚至超过基础属性本身。

重载

即对一段已经渲染好的表格重新设置属性并渲染，可分为以下几种重载方式：

重载的使用方式完全相同，区别只是在于参与重载时的属性差异及其对应的效果差异。一般按照实际需求选择使用。

完整重载

table.reload(id, options, deep);

• 参数 id : table 渲染时的 id 属性值
• 参数 options : 为基础属性配置项
• 参数 deep 2.6+ : 是否采用深度重载（即重载时始终携带初始时及上一次重载时的参数），默认 false。

  2.6 之前版本的 table.reload() 方法兼容性说明

该方法用于对表格的视图和数据在内的全部重载，所有属性均会参与到重载中，对应的表格会有一个直观的刷新效果。

1. // 渲染
2. table.render({
3. elem: '', // 绑定元素选择器
4. id: 'test', // 自定义 id 索引
5. // 其他属性 …
6. });
7. // 完整重载 - 所有属性属性(options)均可参与到重载中
8. table.reload('test', {
9. where: { // 传递数据异步请求时携带的字段
10. aaa: '111',
11. bbb: '222'
12. //…
13. },
14. height: 1000 // 重设高度
15. });

仅数据重载 2.7+

table.reloadData(id, options, deep);

• 参数同 table.reload(id, options, deep) 参数

该方法用于对表格的数据重载，与数据无关的属性不会参与到重载中。因此若只是更新数据，该方法可大幅提升体验。

1. // 渲染
2. table.render({
3. elem: '', // 绑定元素选择器
4. id: 'test', // 自定义 id 索引
5. // 其他属性 …
6. });
7. // 数据重载 - 仅与数据相关的属性(options)能参与到重载中
8. table.reloadData('test', {
9. where: {}, // 数据异步请求时携带的字段集 --- 属性设置有效，因属于数据相关属性
10. scrollPos: true, // 设定重载数据或切换分页时的滚动条的位置状态 --- 属性设置有效
11. // …
12. height: 2000 // 高度 --- 属性设置无效，因不属于数据相关属性
13. });

获取选中行

table.checkStatus(id);

• 参数 id : table 渲染时的 id 属性值

该方法用于获取表格当前选中行相关数据

1. // 渲染
2. table.render({
3. elem: '', // 绑定元素选择器
4. id: 'test', // 自定义 id 索引
5. // 其他属性 …
6. });
7. // 获取选中行相关数据
8. var tableStatus = table.checkStatus('test');
9. console.log(checkStatus.data) // 选中行的数据
10. console.log(checkStatus.data.length) // 选中行数量，可作为是否有选中行的条件
11. console.log(checkStatus.isAll ) // 表格是否全选

设置行选中状态 2.8+

table.setRowChecked(id, opts);

• 参数 id : table 渲染时的 id 属性值
• 参数 opts : 设置行选中时的可选属性，详见下表

该方法用于设置行的选中样式及相关的特定属性值 LAY_CHECKED。

1. // 渲染
2. table.render({
3. elem: '', // 绑定元素选择器
4. id: 'test', // 自定义 id 索引
5. // 其他属性 …
6. });
8. // 设置某行选中
9. table.setRowChecked('test', {
10. index: 0, // 选中行的下标。 0 表示第一行
11. });
12. // 取消选中行
13. table.setRowChecked('test', {
14. index: 'all', // 所有行
15. checked: false
16. });

获取当前页接口数据

table.getData(id);

• 参数 id : table 渲染时的 id 属性值

该方法用于获取表格当前页的数据，它对应的是接口返回的原始数据，不包含 table 组件内部的特定字段。

1. // 渲染
2. table.render({
3. elem: '', // 绑定元素选择器
4. id: 'test', // 自定义 id 索引
5. // 其他属性 …
6. });
7. // 获取当前页接口数据
8. var data = table.getData('test');
9. console.log(data);

获取表格缓存数据集

var tableCache = table.cache;

table.cache 是一段存储当前页表格所有实例的当前页的临时数据，通过 id 作为索引，它包含接口返回的原始数据和组件内部的特定字段。 使用该静态属性可对表格数据进行读写操作。

1. // 渲染
2. table.render({
3. elem: '', // 绑定元素选择器
4. id: 'test', // 自定义 id 索引
5. // 其他属性 …
6. });
7. // 获取对应 table 的临时数据
8. var thisCache = table.cache['test'] || {};
10. // 变更对应 table 的临时数据中的某个字段值
11. thisCache.fieldName = 123;

重置尺寸

table.resize(id);

• 参数 id : table 渲染时的 id 属性值

该方法用于重置表格尺寸和结构，其内部完成了固定列高度平铺、动态分配列宽、容器滚动条宽高补丁 等适配。它一般用于修复特殊情况下导致的列宽适配异常（如浏览器窗口尺寸改变导致的表格父容器宽度变化），以保证表格尺寸依旧能友好展示。

1. // 渲染
2. table.render({
3. elem: '', // 绑定元素选择器
4. id: 'test', // 自定义 id 索引
5. // 其他属性 …
6. });
7. // 重置对应 table 的尺寸，一般写在表格外部容器宽高发生变化后的段落
8. table.resize('test');

导出数据

table.exportFile(id, data, opts);

• 参数 id : table 渲染时的 id 或 要导出的数据表头（当 id 为 array 类型时）。
• 参数 data : 要导出的自定义数据，参数可选。
• 参数 opts 2.7+: 导出数据时的属性可选项，支持： type,title。

该方法用于外部导出对应 table 的数据和任意自定义数据。

1. // 渲染
2. table.render({
3. elem: '', // 绑定元素选择器
4. id: 'test', // 自定义 id 索引
5. // 其他属性 …
6. });
7. // 外部导出对应 table 的数据
8. table.exportFile('test');
10. // 导出自定义数据
11. table.exportFile(['名字','性别','年龄'], [
12. ['张三','男','20'],
13. ['李四','女','18'],
14. ['王五','女','19']
15. ], {
16. type: 'csv', // 导出的文件格式，支持: csv,xls
17. title: '导出的文件标题'
18. });

获取配置项 2.8+

table.getOptions(id);

• 参数 id : table 渲染时的 id 属性值

该方法用于外部获取对应 table 实例的属性配置项。

1. // 渲染
2. table.render({
3. elem: '', // 绑定元素选择器
4. id: 'test', // 自定义 id 索引
5. // 其他属性 …
6. });
7. // 获取配置项
8. var thisOptions = table.getOptions('test');
9. console.log(thisOptions);

设置列显示或隐藏 2.8+

table.hideCol(id, cols);

• 参数 id : table 渲染时的 id 属性值
• 参数 cols : 设置列（表头）显示或隐藏状态

该方法用于外部设置对应 table 列的显示与隐藏状态。

1. // 渲染
2. table.render({
3. elem: '', // 绑定元素选择器
4. id: 'test', // 自定义 id 索引
5. // 其他属性 …
6. });
7. // 设置对应列的显示或隐藏
8. table.hideCol('test', {
9. field: 'title', // 对应表头的 field 属性值
10. hide: true // `true` or `false`
11. });