layui的tree表格怎么写
时间: 2023-09-28 22:05:19 浏览: 34
layui树形表格treetable.js
在 layui 中,可以使用 tree 表格来展示树形结构的数据。下面是一个简单的示例:
HTML 代码:
```html
<table id="treeTable" lay-filter="tree"></table>
```
JavaScript 代码:
```javascript
layui.use(['table', 'tree'], function () {
var table = layui.table;
var tree = layui.tree;
// 渲染表格
table.render({
elem: '#treeTable',
url: '/api/data', // 数据接口
cols: [[
{ field: 'id', title: 'ID' },
{ field: 'name', title: '名称' },
{ field: 'parent_id', title: '父节点ID' },
{ field: 'sort', title: '排序' }
]],
treeColIndex: 2, // 树形图标显示在第几列
treeSpid: 0, // 最上级的父级id
treeIdName: 'id', // id字段的名称
treePidName: 'parent_id', // pid字段的名称
treeDefaultClose: true, // 是否默认折叠
treeLinkage: false // 点击节点时,是否展开或折叠其余所有节点
});
// 监听树形表格的节点点击事件
tree.on('node(tree)', function (obj) {
console.log(obj.data); // 当前点击的节点数据
});
});
```
其中,`url` 参数指定数据接口,`cols` 参数定义表格列,`treeColIndex` 参数指定树形图标显示在第几列,`treeSpid` 参数指定最上级的父级 id,`treeIdName` 参数指定 id 字段的名称,`treePidName` 参数指定 pid 字段的名称,`treeDefaultClose` 参数指定是否默认折叠,`treeLinkage` 参数指定点击节点时,是否展开或折叠其余所有节点。
在渲染表格后,可以监听树形表格的节点点击事件,通过 `obj.data` 获取当前点击的节点数据。
阅读全文