树状图bootstarp-treeview前端jq处理无限级数据的方法

最新推荐文章于 2021-06-04 05:09:43 发布

Yunluo_orz

最新推荐文章于 2021-06-04 05:09:43 发布

阅读量201

点赞数

分类专栏： web前端文章标签： bootstrap treeview jquery

本文链接：https://blog.csdn.net/qq_37820129/article/details/105139856

版权

web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

后台获取数据格式

测试demo中使用js引入数据
测试数据

处理方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">

<script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>
<script src="js/bootstrap-treeview.min.js"></script>

<body>
  <div id="treeview1">

  </div>
</body>
<script src="treeData.js"></script>
<script>
  $(function () {
    var getData = treeData
    var loadData = []
    for (let item of getData) {
      if (item["root"] == 1) {
        let json = {
          text: item.name,
          id: item.id,
          level: 1
        }
        let rootData = getNodesData(getData, json)
        if (rootData.length > 0) {
          json.nodes = [...rootData]
        }
        loadData.push(json)
      }
    }
    $("#treeview1").treeview({
      data:loadData
    })
  })
  function getNodesData(getData, node) {
    let nodesArr = []
    for (let i = 0; i < getData.length; i++) {
      if (getData[i].pid == node.id) {
        let json = {
          text: getData[i].name,
          id: getData[i].id,
          level: Number(node.level) + 1
        }
        getData.splice(i, 1);
        i--;
        if (getData.length > 0) {
          let getNodes = getNodesData(getData, json)
          if(getNodes.length>0){
            json.nodes = getNodes
          }
        }
        nodesArr.push(json)
      }
    }
    return nodesArr;
  }
</script>

</html>

最终数据格式

在这里插入图片描述

本人小白，网上没有找到合适的方法，综合了一下记录下来。
如有错误或者更好的方法 ~~感谢大佬告诉我

Yunluo_orz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
树状图bootstarp-treeview前端jq处理无限级数据的方法

后台获取数据格式测试demo中使用js引入数据处理方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
复制链接

扫一扫

专栏目录