写出HTmL5中的基础树状图 html 树状图

背景

现在项目中哟这样的一个需求，左边显示一棵树目录，点击目录的一级或二级节点，右边显示其子节点中的所有叶子节点，而且要求前端来做这个，不用调用接口请求了，那么，这里记录一下我的实现方法。点击叶子节点，是另外的显示，此处不做讨论。

树结构

先来构造一个树形的array：

var tree = [
{
"id": 1,
"lv": "L1",
"pid": 0,
"isLastLevel": 0,
"des": "根",
"children": [
{
"id": 2,
"lv": "L2",
"pid": 1,
"isLastLevel": 0,
"des": "项目",
"children": [
{
"id": 4,
"lv": "L3",
"pid": 2,
"isLastLevel": 1,
"des": "创建",
"children": null
}
]
},
{
"id": 3,
"lv": "L2",
"pid": 1,
"des": "任务",
"isLastLevel": 0,
"children": [
{
"id": 5,
"lv": "L3",
"pid": 3,
"isLastLevel": 1,
"des": "创建",
"children": null
},
{
"id": 6,
"lv": "L3",
"pid": 3,
"isLastLevel": 1,
"des": "开始",
"children": null
},
{
"id": 7,
"lv": "L3",
"pid": 3,
"isLastLevel": 1,
"des": "结束",
"children": null
}
]
}
]
}
];

当然，实际上这棵树是后端接口返回的数据。

我们这里只是做个模拟。

树的效果：

树结构 查找所有叶子节点

/* 参数
* array 树结构 查找所有叶子节点
*/
function parseTreeJson(array) {
for (let index = 0; index < array.length; index++) {
const element = array[index];
// 1.判断element.children是对象
if (element.children && typeof (element.children) == 'object') {
parseTreeJson(element.children)
} else {
// 判断是否为子节点
if (element.isLastLevel === 1) {
console.log(element.des + '的id:' + element.id)
// 获得符合的 node
nodes.push(element);
// 获得符合的 nodeId
nodeIds.push(element.id);
}
}
}
}

调用一下试试看：

var nodes = [];
var nodeIds = [];
parseTreeJson(tree);
console.log('整棵树的 子节点nodeIds:' + nodeIds)

树结构 遍历查找某个节点

下面的方法用来遍历查找某个节点，然后调用上面的parseTreeJson(array)方法，实现从该节点开始查找其子节点中的所有叶子节点。

/* 参数
* array 树结构
* nodeId 某个节点的id 从该节点开始查找其子节点中的所有叶子节点
*/
function loopTreeJson(array, nodeId) {
for (let index = 0; index < array.length; index++) {
const element = array[index];
if (element.id === nodeId) {
// 判断element.children是对象
if (element.children && typeof (element.children) == 'object') {
// 查找叶子节点
parseTreeJson(element.children)
}
} else {
// 判断element.children是对象
if (element.children && typeof (element.children) == 'object') {
// 继续遍历子节点查找当前nodeId
loopTreeJson(element.children, nodeId)
}
}
}
}

本来应该是点击树节点，获取当前节点id后，调用loopTreeJson(tree, id)即可，这里不再粘贴html显示树的逻辑，下面是模拟调用：

nodes = [];
nodeIds = [];
loopTreeJson(tree, 1);
console.log('点击根nodeId:1 找到的子节点nodeIds:' + nodeIds);
nodes = [];
nodeIds = [];
loopTreeJson(tree, 2);
console.log('点击项目nodeId:2 找到的子节点nodeIds:' + nodeIds);
nodes = [];
nodeIds = [];
loopTreeJson(tree, 3);
console.log('点击任务nodeId:3 找到的子节点nodeIds:' + nodeIds);

调用结果：

完整代码查看：递归遍历树结构，从某个节点开始查找其子节点中的所有叶子节点，打开这个代码示例页面,F12打开控制台可以看到输出。