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);

二、利用 css 样式

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 节点

展示插入的数据