javascript 层级数据的递归遍历与节点插入

javascript 层级数据的递归遍历与节点插入

在项目中遇到层级菜单插入节点的问题 ，百度一下，都是很简单的示例，于是自己花时间写了一个，一来是自己技术积累，二是顺便帮助别人。
首先层级菜单数据字段的设计，id  数据库自增ID,  parentid 这是菜单的父ID, text 是菜单名称。
假设通过 API 从后台获取的菜单如据如下，相当于一个层层嵌套的 JSON 数据，child 表示子菜单。
先通过两个示例进行层级菜单的输出。
再通过一个自定义 insertNode(data, node) 函数，插入 节点数据。

let data = [{
id: 0, text: 'webdms', child: [
{id: 1, parentid: 0, text: '一级A'},
{id: 2, parentid: 0, text: '一级B', child: [
{id: 9, parentid: 2, text: '二级B-1'},
{id: 10, parentid: 2, text: '二级B-2', child: [
{id: 12, parentid: 10, text: '三级B-2-1'},
{id: 8, parentid: 10, text: '三级B-2-2'}
]},
{id: 11, parentid: 2, text: '二级B-3'}
]},
{id: 3, parentid: 0, text: '一级C', child: [
{id: 4, parentid: 3, text: '二级C-1'},
{id: 5, parentid: 3, text: '二级C-2', child: [
{id: 7, parentid: 5, text: '三级C-2-1'},
{id: 13, parentid: 5, text: '三级C-2-2'},
]},
{id: 6, parentid: 3, text: '二级C-3'}]
},
]
}];

页面显示

有些同学不太清楚层级数据是如何缩进显示，这里提供两个示例：

function printNodes (data) {
document.writeln('<ul>');
for (let i = 0; i < data.length; i++) {
console.log(data[i]);
document.writeln('<li>' + data[i].text + "</li>");
if (data[i].child) {
printNodes(data[i].child);
}
}
document.writeln('</ul>');
}

printNodes(data);

function printNodes (data, k) {
k++;
for (let i = 0; i < data.length; i++) {
document.writeln('<div style="padding-left: ' + k * 40 + 'px">' + data[i].text + '</div>');
if (data[i].child) {
printNodes(data[i].child, k);
}
}
}

printNodes(data, 0);

重点来了 , 在层级菜单数据中插入一个菜单数据

/**
* insertNode (data, node)  在原数据 data 中，插入节点数据 node
* @param data array  这是原数据
* @param node object  这是要插入的节点
* @returns {boolean}  成功插入返回 true , 插入失败返回 false
*/
function insertNode (data, node) {

for (let i = 0; i < data.length; i++) {
if (data[i].id === node.parentid) {
if (!data[i].child) {
data[i].child = [];
}
data[i].child.push(node);
return true;
}
if (data[i].child && insertNode(data[i].child, node)) {
return true;
}
}
return false;
}

let node1 = {id: 14, parentid: 4, text: '二级C-1-1'};
let node2 = {id: 15, parentid: 5, text: '三级C-2-3'};
let node3 = {id: 16, parentid: 0, text: '一级D'};
let node4 = {id: 17, parentid: 20, text: 'xxxx'};

console.log('插入状态1：', insertNode(data, node1)); // true
console.log('插入状态2：', insertNode(data, node2)); // true
console.log('插入状态3：', insertNode(data, node3)); // true
console.log('插入状态4：', insertNode(data, node4)); // false 因为找不到 node4 的 parentid 节点

展示插入的数据