layui的树表组件 treeTable 是基于 table 组件延伸的树形表格组件,支持常见的树组件功能。
下面主要介绍使用该组件时经常用到的知识点:
1.什么是简单数据,如何使用
isSimpleData
是 layui 的 treetable 模块中的一个参数,用于指定数据是否为简单数据。简单数据一般是指每条数据只有 id 和 parentId 两个字段,没有 children 字段。
如果你的数据就是简单数据,你可以将 isSimpleData
设置为 true
。如果你的数据是树形结构数据,你应该将 isSimpleData
设置为 false
。
2.设置父级字段
组件默认的父级字段默认为parentId
,可以通过配置修改pid:修改成你想要的.
3.默认全部展开
配置expandAllDefault为true即可(layui2.8.7+以上有效)
具体配置看如下代码:
var inst = treeTable.render({
elem: '#department-treeTable',
tree: {
customName: {
pid:pid
},
data: {
isSimpleData: true
},
view: {
expandAllDefault: true
}
},
data: [{
id: 1,
name: '张三',
parentId: 0,
}, {
id: 2,
name: '李四',
parentId: 1
}],
cols: [
[
{
field: 'id',
title: 'ID',
width: 80,
fixed: 'left'
},
{
field: 'name',
title: '部门名称',
fixed: 'left'
},
{
fixed: "right",
title: "操作",
width: 190,
align: "center",
toolbar: "#TPL-treeTable-demo-tools"
}
]
],
page: false
});
RoveCoder版权所有,转载请注明