Layui快速入门之第八节 表格渲染与属性的使用

url

发送异步请求的 URL。更多异步相关属性见 : #异步属性

cols

表头属性集，通过二维数组定义多级表头。方法渲染时必填。 更多表头属性见 : #表头属性

直接赋值数据。既适用于只展示一页数据，也能对一段已知数据进行多页展示。该属性与 url 属性只能二选一。

设定实例唯一索引，以便用于其他方法对 table 实例进行相关操作。若该属性未设置，则默认从 elem 属性绑定的原始 table 元素中的 id 属性值中获取。

开启表格头部工具栏。支持以下几种值写法：

• toolbar: '#template-id' 自定义工具栏模板选择器
• toolbar: '
  xxx
   直接传入模板字符
• toolbar: true 仅开启工具栏右侧，不显示左侧模板
• toolbar: 'default' 开启工具栏并显示默认模板

false

设置头部工具栏右侧图标。值是一个数组，可选成员有: filter,exports,print （分别代表：筛选图标、导出图标、打印图标）。图标可根据数组值的顺序排列，如：defaultToolbar: ['filter','print','exports']
支持自定义图标及事件，用法详见示例: #综合演示

height

设置表格容器高度，默认自适应。其他可选值的规则如下：

• height: 315 设置固定高度
• height: 'full-30' 设置自适应高度。这是一个特定的语法格式：full 表示铺满；后面的数字表示当前 table 之外的元素占用的高度，如：表格头部到页面最顶部加表格底部距离页面最底部的“距离和”
• height: '#id-30' 设置相对父元素的高度自适应，其中 #id 即父元素的 ID 选择器，其计算原理和上述 full 相同。

设置表格容器的最大高度，设置该属性后，height 属性将被认定为默认的自适应值。

设置所有普通单元格的最小宽度，一般用于列宽自动分配的情况。其优先级低于表头属性中的 minWidth

60

设置所有普通单元格的最大宽度。其优先级低于表头属性中的 maxWidth

用于定义表格的多行样式，如每行的高度等。该参数一旦设置，单元格将会开启多行模式，且鼠标 hover 时会通过显示滚动条的方式查看到更多内容。 请按实际场景使用。
示例：lineStyle: 'height: 95px;'

用于给当前表格主容器直接设定 css 样式，样式值只会对所在容器有效，不会影响其他表格实例。如：css: '.layui-table-page{text-align: right;}'

true

false

用于开启分页。
支持传入 laypage 组件的基础属性（jump,elem 除外）

false

用于开启分页区域的自定义模板，用法同 toolbar 属性。

每页显示的条数。值需对应 limits 参数的选项。优先级低于 page 属性中的 limit 属性。

10

[10,…,90]

是否显示加载条。若为 false，则在切换分页时，不会出现加载条。必须设置了 url 属性才生效。

true

用于设置重载数据或切换分页时的滚动条位置状态。可选值：

• fixed 重载数据时，保持滚动条位置不变
• reset 重载数据时，滚动条位置恢复置顶
• default 默认方式，无需设置。即重载数据或切换分页时，纵向滚动条置顶，横向滚动条位置不变。

是用于设定单元格编辑的事件触发方式。如双击: dblclick

click

是否由组件自动进行前端排序。若为 false，则需自主排序，即由后端直接返回排序好的数据。#详细用法

true

初始排序状态。用于在数据表格渲染完毕时，按某个字段排序显示。它接受一个 object 类型的值，包含属性有：

• field 排序字段。对应 cols 设定的各字段名
• type 排序方式。可选值 : 'asc','desc',null，即：升序、降序、默认

1. initSort: {
2. field: 'id', // 按 id 字段排序
3. type: 'desc' // 降序排序
4. }

设置表格边框风格。可选值：grid|line|row|nob

grid

设置表格其他尺寸。可选值：sm|md|lg

md

是否开启隔行背景。

false

done

数据渲染完毕的回调函数。返回的参数如下：

1. table.render({
2. done: function(res, curr, count){
3. console.log(res); // 得到当前渲染的数据
4. console.log(curr); // 得到当前页码
5. console.log(count); // 得到数据总量
6. }
7. // … // 其它属性
8. });

发送异步请求的 URL。默认会自动传递两个参数：?page=1&limit=30（该参数可通过 request 属性自定义）
page 代表当前页码、limit 代表每页数据条数。

请求的方式，默认：get

请求的其他参数。如：where: {token: 'sasasas', id: 123}

请求的数据头参数。如：headers: {token: 'sasasas'}

请求的内容编码类型。若要发送 json 内容，可设置：
contentType: 'application/json'

请求的数据类型，默认 json。

设置当 dataType: 'jsonp' 时的回调函数名。

用于对默认的分页相关的请求参数 page,limit 重新设定名称。如：

1. request: {
2. pageName: 'curr', // 页码的参数名称，默认：page
3. limitName: 'nums' // 每页数据条数的参数名，默认：limit
4. }

那么请求数据时的参数将会变为 ?curr=1&nums=30

parseData

数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式：

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

很多时候，您接口返回的数据格式并不一定都符合 table 默认规定的格式，比如：

1. {
2. "status": 0,
3. "message": "",
4. "total": 180,
5. "data": {
6. "item": [{}, {}]
7. }
8. }

此时我们可以借助 parseData 回调函数将数据解析并转换为默认规定的格式：

1. table.render({
2. elem: '',
3. url: '',
4. parseData: function(res){ // res 即为原始返回的数据
5. return {
6. "code": res.status, // 解析接口状态
7. "msg": res.message, // 解析提示文本
8. "count": res.total, // 解析数据长度
9. "data": res.data.item // 解析数据列表
10. };
11. },
12. // … //其他参数
13. });

该函数非常实用

设置字段名。通常是表格数据列的唯一标识

设置列的标题。

设置列的字段标题。该属性在筛选列和导出场景中优先级高于 title 属性

设置列宽。若不填写，则自动分配；若填写，则支持值为：数字、百分比。如： width: 200 / width: '30%'

设置当前列的最小宽度，一般用于列宽自动分配的情况。其优先级高于基础属性中的 cellMinWidth

60

设置当前列的最大宽度。其优先级高于基础属性中的 cellMaxWidth

设置列类型。可选值有：

• normal 常规列，无需设定
• checkbox 复选框列
• radio 单选框列
• numbers 序号列
• space 空列

normal

设置全选状态，当列设置 type: 'checkbox' 时才有效。

false

设置固定列，即不跟随 table 横向滚动条而滚动。可选值有：

• left 固定在左
• right 固定在右

templet

设置列的自定义模板，核心属性。模板遵循 laytpl 组件语法。

templet 提供了三种使用方式，选择任一用法即可：

• 设置模版选择器

3. {= d.LAY_INDEX }} {{= d.LAY_COL }} 等
4. -->

1. table.render({
2. cols: [[
3. {field: 'title', templet: '#TPL-demo-title'}
4. // …
5. ]],
6. // …
7. });

• 设置模板内容

该方式必须在内容中包裹一层 

1. table.render({
2. cols: [[
3. {field: 'title', templet: '
   {{= d.title }}
   '}
4. // …
5. ]],
6. // …
7. });

• 设置模板函数

函数将返回一个 d 参数，包含当前行数据及特定的额外字段。

1. table.render({
2. cols: [[
3. {field: 'title', templet: function(d){
4. console.log(d); // 得到当前行数据
5. console.log(this); // 得到表头当前列配置项
6. console.log(d.LAY_NUM); // 得到序号。或其他特定字段
8. // 返回模板内容
9. return ''+ d.title +''
10. }}
11. // …
12. ]],
13. // …
14. });

设置表格导出时的模板，用法同 templet 属性。当 templet 指向的模板内容较复杂时建议使用，如下以模板存在 select 元素为例：

1. exportTemplet: function(d, obj){
2. // 当前 td
3. var td = obj.td(this.field);
4. // 返回 select 选中值
5. return td.find('select').val();
6. }

totalRow

是否开启该列的自动合计功能。

• 前端合计

1. totalRow: true // 开启合计行，并默认对当前所有行数据进行前端合计

• 后端合计

前端合计的数据有限，因此常常需要后端直接返回合计行结果，此时将优先读取后端的合计行返回结果，其格式如下：

1. {
2. "code": 0,
3. "totalRow": {
4. "score": "777",
5. "experience": "999"
6. },
7. "data": [{}, {}],
8. "msg": "",
9. "count": 1000
10. }

如上，在 totalRow 中返回所需统计的列字段名和值即可。
totalRow 字段同样可以通过 parseData 回调来解析成为 table 组件所规定的数据格式。

• 合计行模板

1. totalRow: '{{= d.TOTAL_NUMS }} 单位' // 还比如只取整：'{{= parseInt(d.TOTAL_NUMS) }}'

false

edit

用于对列所在的单元格开启编辑功能。可选值有：

• edit: 'text' 单行输入模式
• edit: 'textarea' 多行输入模式 2.7+

函数写法 2.7+

1. edit: function(d){
2. // d 即为当前行数据，此时可根据行相关字段来开启该行是否编辑的权限
3. if(d.editable){ // editable 为任意字段名
4. return 'text'; // 编辑模式
5. }
6. }

false

是否初始隐藏列

false

是否对当前列进行内容编码（转义 html），优先级大于基础属性中的 escape。

true

是否开启列的排序功能。
注意：不推荐对值同时存在“数字和普通字符”的列开启排序，因为会进入字典序排序计算中，如：'张三' > '2' > '100'，这可能并不是你想要的结果，但字典序排列采用的是 ASCII 码比对。

false

是否禁用拖拽列宽。默认情况下会根据列类型 type 属性来决定是否禁用，如复选框列，会自动禁用。而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能。

false

自定义单元格点击事件名，以便在 单元格工具事件 中完成对该单元格的事件处理。

自定义单元格样式。可传入任意的 CSS 内容，如：style: 'font-size: 13px; color: red;'

单元格排列方式。可选值有：left | center | right

left

单元格所占列数。一般用于多级表头

1

单元格所占行数。一般用于多级表头

1