属性名 描述 类型 默认值
field 设置字段名。通常是表格数据列的唯一标识 string -
title 设置列的标题。 string -
fieldTitle 2.8+ 设置列的字段标题。该属性在筛选列和导出场景中优先级高于 `title` 属性 string -
width 设置列宽。若不填写,则自动分配;若填写,则支持值为:*数字、百分比*。如: `width: 200` / `width: '30%'` number/string -
minWidth 设置当前列的最小宽度,一般用于列宽自动分配的情况。其优先级高于基础属性中的 `cellMinWidth` number `60`
maxWidth 2.8+ 设置当前列的最大宽度。其优先级高于基础属性中的 `cellMaxWidth` number -
expandedWidth 2.8.15+ 设置单元格被展开后的宽度。若设置的值的小于当前列宽,则展开后的列宽保持不变。注:当 `expandedMode` 属性为默认值时有效。 number -
expandedMode 2.8.17+ 用于设置所有单元格默认展开方式,可选值有: - `tips` 悬浮展开方式 - `default` 多行展开方式(默认) 优先级高于 `cellExpandedMode` 基础属性 string -
type 设置列类型。可选值有: - `normal` 常规列,无需设定 - `checkbox` 复选框列 - `radio` 单选框列 - `numbers` 序号列 - `space` 空列 string `normal`
LAY_CHECKED 设置全选状态,当列设置 `type: 'checkbox'` 时才有效。 boolean `false`
fixed 设置固定列,即不跟随 table 横向滚动条而滚动。可选值有: - `left` 固定在左 - `right` 固定在右 多级表头设置固定列时,父列和子列均需设置。 string -
[templet](#cols.templet)
设置列的自定义模板,核心属性。模板遵循 laytpl 组件语法。
`templet` 提供了三种使用方式,选择任一用法即可: - **设置模版选择器** {{! ``` ``` ``` table.render({ cols: [[ {field: 'title', templet: '#TPL-demo-title'} // … ]], // … }); ``` !}} - **设置模板内容** 该方式必须在内容中包裹一层 `
`,否则无法读取模板。 {{! ``` table.render({ cols: [[ {field: 'title', templet: '
{{= d.title }}
'} // … ]], // … }); ``` !}} - **设置模板函数** 函数将返回一个 `d` 参数,包含当前行数据及特定的额外字段。 ``` table.render({ cols: [[ {field: 'title', templet: function(d){ console.log(d); // 得到当前行数据 console.log(this); // 得到表头当前列配置项 console.log(d.LAY_NUM); // 得到序号。或其他特定字段 // 返回模板内容 return ''+ d.title +'' }} // … ]], // … }); ```
exportTemplet 2.6.9+
设置表格导出时的模板,用法同 `templet` 属性。当 `templet` 指向的模板内容较复杂时建议使用,如下以模板存在 `select` 元素为例:
``` exportTemplet: function(d, obj){ // 当前 td var td = obj.td(this.field); // 返回 select 选中值 return td.find('select').val(); } ```
[totalRow](#cols.totalRow)
是否开启该列的自动合计功能,默认不开启。
- **采用前端合计** {{! ``` // 开启并输出合计行前端合计结果 totalRow: true // 开启并输出合计行自定义模板。此处 TOTAL_NUMS 即为合计结果的固定特定字段 totalRow: '{{= d.TOTAL_NUMS }} 单位' // 取整或其他运算 totalRow: '{{= parseInt(d.TOTAL_NUMS) }}' ``` !}} 注意:*合计行模板仅支持字符写法,不支持函数写法,请勿与 `templet` 用法混淆。* - **采用后端合计** 前端合计的数据有限,因此常需要后端直接返回合计结果,组件将优先读取。数据格式如下: ``` { "code": 0, "totalRow": { "score": "777", "experience": "999" }, "data": [{}, {}], "msg": "", "count": 1000 } ``` 在合计行自定义模板中输出后端返回的合计数据 {{! ``` // 获取后端接口返回数据中的统计字段。此处 TOTAL_ROW 即对应返回据中的 totalRow totalRow: '分数:{{= d.TOTAL_ROW.score }}' ``` !}} 如上,在 `totalRow` 中返回所需统计的列字段名和值即可。 `totalRow` 字段同样可以通过 `parseData` 回调来解析成为 table 组件所规定的数据格式。
[edit](#cols.edit)
用于对列所在的单元格开启编辑功能。可选值有:
- `edit: 'text'` 单行输入模式 - `edit: 'textarea'` 多行输入模式 2.7+ **函数写法** 2.7+ ``` edit: function(d){ // d 即为当前行数据,此时可根据行相关字段来开启该行是否编辑的权限 if(d.editable){ // editable 为任意字段名 return 'text'; // 编辑模式 } } ```
string
function
`false`
hide 是否初始隐藏列 boolean `false`
ignoreExport 2.8.3+ 是否导出时忽略该列。支持以下可选值: - `true` : 忽略导出 - `false` : 强制导出,对所有列适用 - `null` : 只对常规列导出(默认) boolean -
escape 是否对当前列进行内容编码(转义 html),优先级大于基础属性中的 `escape`。 boolean `true`
sort 是否开启列的排序功能。
注意:不推荐对值同时存在“数字和普通字符”的列开启排序,因为会进入字典序排序计算中,如:`'张三' > '2' > '100'`,这可能并不是你想要的结果,但字典序排列采用的是 `ASCII` 码比对。
boolean `false`
unresize 是否禁用拖拽列宽。默认情况下会根据列类型 `type` 属性来决定是否禁用,如复选框列,会自动禁用。而其它普通列,默认允许拖拽列宽,当然你也可以设置 true 来禁用该功能。 boolean `false`
event 自定义单元格点击事件名,以便在 [单元格工具事件](#on-tool) 中完成对该单元格的事件处理。 string -
style 自定义单元格样式。可传入任意的 CSS 内容,如:`style: 'font-size: 13px; color: red;'` string -
align 单元格排列方式。可选值有:`left` | `center` | `right` string `left`
colspan 单元格所占列数。一般用于多级表头 number `1`
rowspan 单元格所占行数。一般用于多级表头 number `1`