JavaScript:基于任意JSON动态生成树状图(动态生成vue-giant-tree所需idpid)

Posted 方舟aark

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript:基于任意JSON动态生成树状图(动态生成vue-giant-tree所需idpid)相关的知识,希望对你有一定的参考价值。

最近我的工作项目遇到了一个问题。一个内部有无限个children套娃的JSON,且其id和name是一样的,十分混乱。在这样的条件下需要生成对应的树状图。

我们所使用的框架为vue,使用的树状图为vue-giant-tree。vue-giant-tree如何使用大家可以上网搜索教程,这个不是本文重点。

该插件所需的格式如下:


各位可以看到id与pid有一定规律,pid即parent id,父级id。

那么要如何给一个JSON动态生成树状图所需id、pid?

各位很容易就想到使用递归函数,没错,我一开始偷懒想在网上找找有没有直接可用的类似的递归函数,然而没有。于是只好自己写,现在分享到网上方便有需要的人士下次用一用看看。这里就不废话了,直接贴上代码。

findtree递归函数:

let layer = 1;
let parentId = 1;
let before = 0;
// findtree递归函数
let findTree = function (array) 
    for (let i = 0; i < array.length; i++) 
         // nowId结合上一层的nowId,在尾部加上i+1数字
         let nowId = parseInt(parentId + "" + (i + 1))
         array[i]["myId"] = nowId
         array[i]["myPid"] = before;
            
         // 如果有children则进入递归,进入下一层,将本层的nowId保存好,增加层数layer
         if (array[i].hasOwnProperty("children")) 
           before = nowId
           parentId = nowId
           layer++
           findTree(array[i].children)
         
         // 如果循环到底则减少层数layer,将before和parentId还原回上一层的样子
         if (i === array.length - 1) 
           layer--
           before = parseInt(before.toString().substring(0, layer))
           if (before.toString().length === 1) 
             before = 0
           
           parentId = parseInt(parentId.toString().substring(0, layer))
         
       

// 运行findTree递归函数
findTree(myTree)

本人水平有限,代码应该是有更好的优化手段,刷leetcode的同学可以挑战一下。不过这段代码算是解决了我的问题。无论JSON是怎样,略作改动(如children)都可以生成树结构。

对于我而言的完整的解决代码:

		var that = this;
		let layer = 1;
        let parentId = 1;
        let before = 0;
        // findtree递归函数
        let findTree = function (array) 
          for (let i = 0; i < array.length; i++) 
            // nowId结合上一层的nowId,在尾部加上i+1数字
            let nowId = parseInt(parentId + "" + (i + 1))
            let oneItem = ;
            oneItem["id"] = nowId;
            oneItem["pid"] = before;
            oneItem["name"] = array[i].name;
            oneItem["open"] = false;
            oneItem["checked"] = true;
            that.nodes.push(oneItem)

            // 如果有children则进入递归,进入下一层,将本层的nowId保存好,增加层数layer
            if (array[i].hasOwnProperty("children")) 
              before = nowId
              parentId = nowId
              layer++
              findTree(array[i].children)
            
            // 如果循环到底则减少层数layer,将before和parentId还原回上一层的样子
            if (i === array.length - 1) 
              layer--
              before = parseInt(before.toString().substring(0, layer))
              if (before.toString().length === 1) 
                before = 0
              
              parentId = parseInt(parentId.toString().substring(0, layer))
            
          
        
        // 运行findTree递归函数
        findTree(myTree)

目前的函数还有局限性,算法还需改进。欢迎大家学习与提出建议,也可以帮忙优化一下这段代码噢。

以上是关于JavaScript:基于任意JSON动态生成树状图(动态生成vue-giant-tree所需idpid)的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript:基于任意JSON动态生成树状图(动态生成vue-giant-tree所需idpid)

java+json+javascript生成树状图实例

基于任意深度学习+树状全库搜索的新一代推荐系统

bootstrap-vue中基于json文件动态生成元素

使用javascript添加基于json值的动态div标签

使用treeview.js插件生成树状菜单方法的简单介绍(附通过json字符串生成菜单的代码)