现在项目中哟这样的一个需求,左边显示一棵树目录,点击目录的一级或二级节点,右边显示其子节点中的所有叶子节点,而且要求前端来做这个,不用调用接口请求了,那么,这里记录一下我的实现方法。点击叶子节点,是另外的显示,此处不做讨论。
先来构造一个树形的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打开控制台可以看到输出。