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 横向滚动条而滚动。可选值有:
多级表头设置固定列时,父列和子列均需设置。
|
string |
- |
templet
|
设置列的自定义模板,核心属性。模板遵循 laytpl 组件语法。
templet 提供了三种使用方式,选择任一用法即可:
{{!
<script type="text/html" id="TPL-demo-title">
<a href="/detail/{{= d.id }}" class="layui-table-link">
{{= d.title }}
</a>
</script>
<!--
模板中的 `d` 不仅包含当前行数据,还包含特定字段,如:
{{= d.LAY_INDEX }} {{= d.LAY_COL }} 等
-->
table.render({
cols: [[
{field: 'title', templet: '#TPL-demo-title'}
// …
]],
// …
});
!}}
该方式必须在内容中包裹一层 <div></div> ,否则无法读取模板。
{{!
table.render({
cols: [[
{field: 'title', templet: '<div><a href="/detail/{{= d.id }}" class="layui-table-link">{{= d.title }}</a></div>'}
// …
]],
// …
});
!}}
函数将返回一个 d 参数,包含当前行数据及特定的额外字段。
table.render({
cols: [[
{field: 'title', templet: function(d){
console.log(d); // 得到当前行数据
console.log(this); // 得到表头当前列配置项
console.log(d.LAY_NUM); // 得到序号。或其他特定字段
// 返回模板内容
return '<a href="/detail/'+ d.id +'" class="layui-table-link">'+ d.title +'</a>'
}}
// …
]],
// …
});
|
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
|
是否开启该列的自动合计功能,默认不开启。
{{!
// 开启并输出合计行前端合计结果
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
|
用于对列所在的单元格开启编辑功能。可选值有:
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 |
自定义单元格点击事件名,以便在 单元格工具事件 中完成对该单元格的事件处理。
|
string |
- |
style |
自定义单元格样式。可传入任意的 CSS 内容,如:style: 'font-size: 13px; color: red;'
|
string |
- |
align |
单元格排列方式。可选值有:left | center | right
|
string |
left
|
colspan |
单元格所占列数。一般用于多级表头
|
number |
1
|
rowspan |
单元格所占行数。一般用于多级表头
|
number |
1
|