生成一个layui的树表格,第一列的标题是layui
时间: 2023-11-16 07:13:48 浏览: 71
layui树型表格js
以下是生成一个layui树表格的代码,第一列的标题是"layui":
```html
<table id="treeTable" lay-filter="treeTable"></table>
<script>
layui.use(['treeTable'], function () {
var treeTable = layui.treeTable;
var data = [{
id: 1,
title: '节点1',
parentId: 0
}, {
id: 2,
title: '节点2',
parentId: 1
}, {
id: 3,
title: '节点3',
parentId: 1
}, {
id: 4,
title: '节点4',
parentId: 2
}, {
id: 5,
title: '节点5',
parentId: 2
}, {
id: 6,
title: '节点6',
parentId: 3
}];
treeTable.render({
elem: '#treeTable',
data: data,
icon_key: 'title',
is_checkbox: true,
cols: [{
key: 'title',
title: 'layui'
}]
});
});
</script>
```
解释一下上面的代码:
首先,在HTML中我们定义了一个id为"treeTable"的表格,并且指定了lay-filter属性为"treeTable",这样在后面的JavaScript代码中就可以通过这个lay-filter属性来操作这个表格。
接着,在JavaScript中,我们使用layui.use()方法引入了layui的treeTable模块,并在回调函数中通过treeTable.render()方法生成了一个树表格。在生成树表格的时候,我们传入了以下参数:
- elem:表示要渲染的表格的选择器,这里我们传入了"#treeTable",表示要渲染id为"treeTable"的表格。
- data:表示要渲染的数据,这里我们定义了一个包含6个节点的数据。
- icon_key:表示树形图标所在的字段,这里我们传入了"title",表示每个节点的图标要根据它的标题来确定。
- is_checkbox:表示是否显示复选框,这里我们传入了true,表示所有节点都可以被选择。
- cols:表示表格的列,这里我们只定义了一列,它的key为"title",title为"layui",表示第一列的标题为"layui"。
最后,我们在treeTable.render()方法外面写了一段JavaScript代码,用来定义数据,这只是示例数据,实际使用时需要根据实际情况来定义。
阅读全文