您可以
使用layui树表
组件来创建一个
树状表格，以下是
使用静态数据创建
树状表格的示例代码：
HTML代码：
```html
<table id="
treeTable" lay-filter="
treeTable"></table>
```
JavaScript代码：
```
javascript
layui.use(['table'], function() {
var table =
layui.table;
// 渲染表格
table.render({
elem: '#
treeTable',
id: '
treeTable',
treeId: 'id', // 数据中的唯一字段名，用于对应父子
节点
treeUpId: 'parentId', // 数据中的父
节点字段名，用于对应父子
节点
treeShowName: 'name', // 用于在表格中显示的字段名
toolbar: '#toolbar', // 表格工具栏
defaultToolbar: ['filter'], // 默认工具栏
cols: [[
{ type: 'numbers', title: '序号' },
{ field: 'name', title: '名称' },
{ field: 'status', title: '状态' }
]],
data: [
{ id: 1, name: '
节点1', parentId: 0, status: '正常' },
{ id: 2, name: '
节点2', parentId: 0, status: '正常' },
{ id: 3, name: '
节点1.1', parentId: 1, status: '正常' },
{ id: 4, name: '
节点1.2', parentId: 1, status: '正常' },
{ id: 5, name: '
节点2.1', parentId: 2, status: '正常' },
{ id: 6, name: '
节点2.2', parentId: 2, status: '正常' },
{ id: 7, name: '
节点2.2.1', parentId: 6, status: '正常' }
],
page: false // 关闭分页
});
});
```
这样就可以
使用layui树表
组件创建一个
树状表格，并且
使用静态数据进行展示。您可以根据自己的需求修改数据和表格字段。
1027
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
