你可以使用最新版的layui树表组件来创建一个树状表格，并使用下方提供的静态数据。以下是示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>树状表格</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
</head>
<body>
<table id="treeTable" lay-filter="treeTable"></table>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
<script>
layui.config({
base: 'https://cdn.staticfile.org/layui/2.5.6/modules/'
}).extend({
treetable: 'treetable-lay/treetable'
}).use(['treetable', 'layer'], function(){
var treetable = layui.treetable;
var layer = layui.layer;
// 渲染表格
var treeTableIns = treetable.render({
elem: '#treeTable',
url: '', // 数据接口留空即可
data: [
{
"id": "3ee1f6b8-2061-11ee-9dca-002b678d7d12",
"pid": "0",//最上级节点，父节点为0
"oid": "1",
"nodename": "现场",
"isParent": true,
"destination_x": -2175607.72301148,
"destination_y": 4973364.66825927,
"destination_z": 3718933.131626,
"direction_x": 0.330955571538876,
"direction_y": -0.755783718817928,
"direction_z": -0.565030423992478,
"up_x": 0.31038748033911,
"up_y": -0.478268451709879,
"up_z": 0.821534478976856,
"nodecontent": "",
"pointdata": [],
"linetdata": [],
"areadata": [],
"nodetypeid": "abhd_xc"
},
{
"id": "73575d10-214d-11ee-a00a-002b678d7d12",
"pid": "1",
"oid": "11",
"nodename": "郑州圈",
"isParent": false,
"destination_x": -2175607.723011539,
"destination_y": 4973364.668259415,
"destination_z": 3718933.1316261077,
"direction_x": 0.3309553707583479,
"direction_y": -0.7557838195864466,
"direction_z": -0.5650304068079222,
"up_x": 0.3103874803416452,
"up_y": -0.47826845171566773,
"up_z": 0.821534478972528,
"nodecontent": "",
"pointdata":[],//点数据
"linetdata":[], //线数据
"areadata": [],
"nodetypeid": "abhd_xc"
}
],
treeColIndex: 2,
treeSpid: '0',
treeIdName: 'id',
treePidName: 'pid',
treeDefaultClose: false,
treeLinkage: false,
cols: [
{field: 'nodename', title: '节点名称'},
{field: 'oid', title: 'OID'},
{field: 'destination_x', title: '目标X'},
{field: 'destination_y', title: '目标Y'},
{field: 'destination_z', title: '目标Z'}
],
page: false
});
// 添加表格行点击事件
treeTableIns.on('row(treeTable)', function(obj){
// obj.data 即为当前行数据
console.log(obj.data);
});
});
</script>
</body>
</html>
```
请注意，示例代码中使用的是在线引用的layui和jquery库，你也可以将这些库下载到本地并进行引用。此外，表格的列定义和数据源需要根据你的需求进行调整。
4604
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
