有子id和父id的平级json转成树结构

最新推荐文章于 2023-04-06 10:22:34 发布
最新推荐文章于 2023-04-06 10:22:34 发布
阅读量1.6k 收藏 5
点赞数 1
分类专栏： js 文章标签： json转树结构

 

//接口返回的数据是像allRes这样的数组：

let allRes = [
  {
    resourcesId: 4,
    resName: "删除角色",
    resParentId: 2
  },
  {
    resourcesId: 3,
    resName: "编辑角色",
    resParentId: 1
  },
  {
    resourcesId: 2,
    resName: "设置权限",
    resParentId: 1
  },
  {
    resourcesId: 5,
    resName: "添加用户",
    resParentId: 4
  },
  {
    resourcesId: 6,
    resName: "更新用户",
    resParentId: 4
  },
  {
    resourcesId: 7,
    resName: "删除用户",
    resParentId: 6
  },
  {
    resourcesId: 8,
    resName: "重置密码",
    resParentId: 3
  },
  {
    resourcesId: 9,
    resName: "添加地区",
    resParentId: 5
  },
  {
    resourcesId: 10,
    resName: "编辑地区",
    resParentId: 6
  }
];

//在项目中我是用iview的树形组件所以需要转换成树形结构，以下是实现代码


let arr = toTreeData(allRes);

function toTreeData(data) {
  let resData = data;
  let tree = [];

  for (let i = 0; i < resData.length; i++) {
    if (resData[i].resParentId === 1) {
      let obj = {
        id: resData[i].resourcesId,
        text: resData[i].resName,
        children: []
      };
      tree.push(obj);
      resData.splice(i, 1);
      i--;
    }
  }
  run(tree);
  function run(chiArr) {
    if (resData.length !== 0) {
      for (let i = 0; i < chiArr.length; i++) {
        for (let j = 0; j < resData.length; j++) {
          if (chiArr[i].id === resData[j].resParentId) {

            let obj = {
              id: resData[j].resourcesId,
              text: resData[j].resName,
              children: []
            };
            chiArr[i].children.push(obj);
            resData.splice(j, 1);
            j--;
          }
        }
        // console.log(chiArr[i].children);
        run(chiArr[i].children);
      }
    }
  }
  return tree;
}


//因为在多个页面中有用到，但是对应的id，和parent id 的属性名称是不一样的，所以封装了一下

function toTreeData (data, attributes) {
  let resData = data;
  let tree = [];

  for (let i = 0; i < resData.length; i++) {
    if (resData[i].resParentId === attributes.rootId) {
      let obj = {
        id: resData[i][attributes.id],
        title: resData[i][attributes.name],
        children: []
      };
      tree.push(obj);
      resData.splice(i, 1);
      i--;
    }
  }
  run(tree);
  function run(chiArr) {
    if (resData.length !== 0) {
      for (let i = 0; i < chiArr.length; i++) {
        for (let j = 0; j < resData.length; j++) {
          if (chiArr[i].id === resData[j][attributes.parentId]) {
            let obj = {
              id: resData[j][attributes.id],
              title: resData[j][attributes.name],
              children: []
            };
            chiArr[i].children.push(obj);
            resData.splice(j, 1);
            j--;
          }
        }
        run(chiArr[i].children);
      }
    }
  }

  return tree;

}

//调用：

let data = allRes;
// 属性配置信息
let attributes = {
      id: 'resourcesId',
      parentId: 'resParentId',
      name: 'resName',
      rootId: 1
  };
let treeData = toTreeData(data, attributes);

//格式化后的

[
    {
      id: 3,
      title: "重置密码",
      children: []
    },
    {
      id: 2,
      title: "设置权限",
      children: [
        {
          id: 4,
          title: "删除角色",
          children: [
            {
              id: 5,
              title: "添加用户",
              children: [
                {
                  id: 9,
                  title: "添加地区",
                  children: []
                }
              ]
            },
            {
              id: 6,
              title: "更新用户",
              children: [
                {
                  id: 7,
                  title: "删除用户",
                  children: []
                },
                {
                  id: 10,
                  title: "编辑地区",
                  children: []
                }
              ]
            }
          ]
        }
      ]
    }
  ]


 

<include file="Public:header" />
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <include file="Public:top" />
    <include file="Public:left" />
    <div class="content-wrapper">
        <section class="content-header">
            <h3 class="topBreadNav">
                <a href="javascrapt:;">后台管理</a>
                <span><i class="fa fa-angle-right"></i>{$title}</span>
            </h3>
        </section>
        <section class="content editMenu">
            <div class="topNav">
                <p>账号：<span>1352162554</span></p>
                <h4>菜单功能权限</h4>
              <div class="mains">
                <div class="checkBox">
                    <div class="selectBlock nesting">
                        <input data-pid="0" onclick='javascript:check_parent_node(42,this);check_child_node(42,this);' data-id="42"
                        value="42" checked="true" type="checkbox" class="menu_checkbox">
                        <img src="/~caoshanbin/cus/html/Public/Admin/image/cked.png" class="cked">
                        <span class="clickShows" onclick="clickShow(this)">
                            <span class="gt">
                                <i class="fa fa-angle-left  gt_i" style="transform: rotate(-90deg);">
                                </i>
                            </span>
                            <img class="closes" src="/~caoshanbin/cus/html/Public/Admin/image/unfold.png">
                            <span class="textStr">我的订单</span>

                        </span>
                        <div class="Block nesting">
                            <input onclick='javascript:check_parent_node(45,this);check_child_node(45,this);' data-pid="42" value="45"
                            data-id="45" checked="true" type="checkbox" class="menu_checkbox">
                            <img src="/~caoshanbin/cus/html/Public/Admin/image/cked.png" class="cked">
                            <span class="clickShows" onclick="clickShow(this)">
                                <span class="gt">
                                    <i class="fa fa-angle-left  gt_i" style="transform: rotate(-180deg);">
                                    </i>
                                </span>
                                <img class="closes" src="/~caoshanbin/cus/html/Public/Admin/image/unfold.png">
                                <span class="textStr">自营单</span>
                                
                            </span>
                            <div class="Block nesting">
                                    <input onclick='javascript:check_parent_node(49,this);check_child_node(49,this);' data-pid="45" value="49"
                                    data-id="49" checked="true" type="checkbox" class="menu_checkbox">
                                    <img src="/~caoshanbin/cus/html/Public/Admin/image/cked.png" class="cked">
                                    <span class="clickShows" onclick="clickShow(this)">
                                        <span class="gt">
                                            <i class="fa fa-angle-left  gt_i" style="transform: rotate(-180deg);">
                                            </i>
                                        </span>
                                        <img class="closes" src="/~caoshanbin/cus/html/Public/Admin/image/unfold.png">
                                        <span class="textStr">子自营单</span>
                                    </span>
                                </div>
                                <div class="Block nesting">
                                    <input onclick='javascript:check_parent_node(50,this);check_child_node(49,this);' data-pid="45" value="50"
                                    data-id="50" checked="true" type="checkbox" class="menu_checkbox">
                                    <img src="/~caoshanbin/cus/html/Public/Admin/image/cked.png" class="cked">
                                    <span class="clickShows" onclick="clickShow(this)">
                                        <span class="gt">
                                            <i class="fa fa-angle-left  gt_i" style="transform: rotate(-180deg);">
                                            </i>
                                        </span>
                                        <img class="closes" src="/~caoshanbin/cus/html/Public/Admin/image/unfold.png">
                                        <span class="textStr">子托管单</span>
                                    </span>
                                </div>
                        </div>
                        <div class="Block nesting">
                            <input onclick='javascript:check_parent_node(46,this);check_child_node(46,this);' data-pid="42" value="46"
                            data-id="46" checked="true" type="checkbox" class="menu_checkbox">
                            <img src="/~caoshanbin/cus/html/Public/Admin/image/cked.png" class="cked">
                            <span class="clickShows" onclick="clickShow(this)">
                                <span class="gt">
                                    <i class="fa fa-angle-left  gt_i" style="transform: rotate(-180deg);">
                                    </i>
                                </span>
                                <img class="closes" src="/~caoshanbin/cus/html/Public/Admin/image/unfold.png">
                                <span class="textStr">托管单</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="checkBox">
                    <div class="selectBlock nesting">
                        <input data-pid="0" onclick='javascript:check_parent_node(43,this);check_child_node(43,this);' data-id="43"
                        value="43" checked="true" type="checkbox" class="menu_checkbox">
                        <img src="/~caoshanbin/cus/html/Public/Admin/image/cked.png" class="cked">
                        <span class="clickShows" onclick="clickShow(this)">
                            <span class="gt">
                                <i class="fa fa-angle-left  gt_i" style="transform: rotate(-90deg);">
                                </i>
                            </span>
                            <img class="closes" src="/~caoshanbin/cus/html/Public/Admin/image/unfold.png">
                            <span class="textStr">帐单管理</span>
                        </span>
                        <div class="Block nesting">
                            <input class="menu_checkbox" onclick='javascript:check_parent_node(98,this);check_child_node(98,this);' data-pid="43" value="98"
                            data-id="98" checked="true" type="checkbox">
                            <img src="/~caoshanbin/cus/html/Public/Admin/image/cked.png" class="cked">
                            <span class="clickShows" onclick="clickShow(this)">
                                <span class="gt">
                                    <i class="fa fa-angle-left  gt_i" style="transform: rotate(-180deg);">
                                    </i>
                                </span>
                                <img class="closes" src="/~caoshanbin/cus/html/Public/Admin/image/unfold.png">
                                <span class="textStr">我的账单</span>
                            </span>
                        </div>
                        <div class="Block nesting">
                            <input class="menu_checkbox" onclick='javascript:check_parent_node(461,this);check_child_node(461,this);' data-pid="43" value="461"
                            data-id="461" checked="true" type="checkbox">
                            <img src="/~caoshanbin/cus/html/Public/Admin/image/cked.png" class="cked">
                            <span class="clickShows" onclick="clickShow(this)">
                                <span class="gt">
                                    <i class="fa fa-angle-left  gt_i" style="transform: rotate(-180deg);">
                                    </i>
                                </span>
                                <img class="closes" src="/~caoshanbin/cus/html/Public/Admin/image/unfold.png">
                                <span class="textStr">子账号账单</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="checkBox">
                    <div class="selectBlock nesting">
                        <input data-pid="0" class="menu_checkbox" onclick='javascript:check_parent_node(44,this);check_child_node(44,this);' data-id="44"
                        value="44" checked="false" type="checkbox">
                        <img src="/~caoshanbin/cus/html/Public/Admin/image/cked.png" class="cked">
                        <span class="clickShows" onclick="clickShow(this)">
                            <span class="gt">
                                <i class="fa fa-angle-left  gt_i" style="transform: rotate(-180deg);">
                                </i>
                            </span>
                            <img class="closes" src="/~caoshanbin/cus/html/Public/Admin/image/unfold.png">
                            <span class="textStr">我的工作台</span>
                        </span>
                    </div>
                </div>
            </div>
                  <div class="butBox">
                     <button type="button" class="btnBlue"  onclick="editMenuSubmit()">保存</button>
                 </div>
             </div>
            
        </section> 
    </div>
    <include file="Public:footer" />

</div>
<include file="Public:footer_js" />
</body>
<script  type="text/javascript" charset="utf-8" >
   var list=[{
    "menuPid": 0,
    "menuId": 42,
    "defaultValue": false,
    "canChange": false,
    "menuTitle": "我的订单",
    "isSelected": true,
    "fuid": 1070,
    "nextMenu": [{
        "menuPid": 42,
        "menuId": 45,
        "defaultValue": false,
        "canChange": false,
        "menuTitle": "自营单",
        "isSelected": true,
         "nextMenus": [{
        "menuPid": 45,
        "menuId": 981,
        "defaultValue": false,
        "canChange": false,
        "menuTitle": "我的账单",
        "isSelected": true,
        "fuid": 10701,

        "isDefault": false
    }, {
        "menuPid": 45,
        "menuId": 4611,
        "defaultValue": false,
        "canChange": false,
        "menuTitle": "子账号账单",
        "isSelected": true,
        "fuid": 10702,
        "isDefault": false
    }],
        "fuid": 1070,

        "isDefault": false
    }, {
        "menuPid": 42,
        "menuId": 46,
        "defaultValue": false,
        "canChange": false,
        "menuTitle": "托管单",
        "isSelected": true,
        "fuid": 1070,
        "isDefault": false
    }],
    "isDefault": false
}, {
    "menuPid": 0,
    "menuId": 43,
    "defaultValue": false,
    "canChange": false,
    "menuTitle": "帐单管理",
    "isSelected": true,
    "fuid": 1070,
    "nextMenu": [{
        "menuPid": 43,
        "menuId": 98,
        "defaultValue": false,
        "canChange": false,
        "menuTitle": "我的账单",
        "isSelected": true,
        "fuid": 10701,

        "isDefault": false
    }, {
        "menuPid": 43,
        "menuId": 461,
        "defaultValue": false,
        "canChange": false,
        "menuTitle": "子账号账单",
        "isSelected": true,
        "fuid": 10702,
        "isDefault": false
    }],
    "isDefault": false
}, {
    "isSelected": false,
    "fuid": 1070,
    "menuPid": 0,
    "menuId": 44,
    "defaultValue": false,
    "canChange": false,
    "menuTitle": "我的工作台",
    "nextMenu": [],
    "isDefault": false
}]
$(function () {
    // var html=[];
    // for(var i=0;i<list.length;i++){
    //     html.push(`<div class="checkBox">
    //         <div class="selectBlock nesting">
    //             <input   data-pid="${list[i].menuPid}" onclick="control_menu_display(${list[i].menuId},this)"  data-id="${list[i].menuId}" value="" checked="${list[i].isSelected}"   type="checkbox" />
    //             <img src="__PUBLIC__/Admin/image/cked.png"  class="cked"   >
    //             <span  class="clickShows" onclick="clickShow(this)" > 
    //             <span class="gt" >
    //             <i class="fa fa-angle-left  gt_i"  ></i>
    //             </span>
    //             <img class="closes"  src="__PUBLIC__/Admin/image/unfold.png" > ${list[i].menuTitle}
    //             </span>`);
    //     for(var c=0;c<list[i].nextMenu.length;c++){
    //     html.push( 
    //             `<div class="Block nesting" > 
    //             <input  onclick="control_menu_display(${list[i].nextMenu[c].menuId},this)" data-pid="${list[i].nextMenu[c].menuPid}" value="" data-id="${list[i].nextMenu[c].menuId}" checked="${list[i].nextMenu[c].isSelected}" type="checkbox" />
    //             <img src="__PUBLIC__/Admin/image/cked.png"  class="cked"   >
    //             <span  class="clickShows" onclick="clickShow(this)" > 
    //             <span class="gt" >
    //             <i class="fa fa-angle-left  gt_i" style="" ></i>
    //             </span>
    //             <img class="closes"  src="__PUBLIC__/Admin/image/unfold.png" > ${list[i].nextMenu[c].menuTitle}  
    //             </span>
    //             </div>`);
             
    // }
    // html.push(`</div></div>`);
    // }

    // $(".mains").html(html.join(''));

   $(".mains .nesting").each(function(){
        var $this=$(this);
        if($this.find(".nesting").length<=0){
            $this.find(".closes").attr("src","__PUBLIC__/Admin/image/unfold.png");
            $this.find(".gt_i").css("transform","rotate(-180deg)");
        }else{
            $this.find(".closes").attr("src","__PUBLIC__/Admin/image/unfold.png");
            $this.find(".gt_i").css("transform","rotate(-90deg)");
        }
   })


})
function clickShow(t){
    var $this=$(t);
     if($this.siblings(".nesting").length>0){
            if($this.siblings(".nesting").css('display')=="none"){
                $this.siblings(".nesting").slideDown(250);
                $this.find("img").attr("src","__PUBLIC__/Admin/image/unfold.png");
                $this.find(".gt_i").css("transform","rotate(-90deg)");
            }else{
                $this.siblings(".nesting").slideUp(250);
                $this.find("img").attr("src","__PUBLIC__/Admin/image/close.png");
                 $this.find(".gt_i").css("transform","rotate(-180deg)");
            }
        }
}



</script>
<script type="text/javascript">  
    function check_child_node(id, t) {
        var cid_obj_arr = $(".menu_checkbox[data-pid='" + id + "']");
        var is_check = $(".menu_checkbox[value='" + id + "']").is(':checked');
        if (cid_obj_arr.length != 0) {
            cid_obj_arr.each(function(i) {
                var thiss = $(this);
                if (is_check == true) {
                    thiss.prop("checked", "checked");
                    thiss.next().hide();
                } else {
                    thiss.prop("checked", false);
                }
                check_child_node(thiss.val());
            });
        }
        if ($(t).attr("data-pid") == 0 && $(t).prop("checked")) {
            $(t).parent(".nesting").find("input").prop("checked", true);
        }
    }

    function check_parent_node(id, t) {
        var that = $(t).val();
        var pid = $(".menu_checkbox[value='" + id + "']").attr("data-pid");
        var cid_obj_arr = $(".menu_checkbox[data-pid='" + pid + "']");
        var num = 0;
        if (pid != 0) {
            cid_obj_arr.each(function(index) {
                var $this = $(this);
                if ($this.is(":checked")) {
                    num++;
                }
                if (index == cid_obj_arr.length - 1) {
                    var input = $(".menu_checkbox[value='" + id + "']").parent(".nesting").parent(".nesting").find("input");
                    if (num == 0 && input.is(":checked")) {
                        input.removeAttr('checked');
                        input.prop("checked", false);
                    } else if (num >= 1 && !input.prop("checked")) {
                        input.prop("checked", true);
                        $this.parent(".nesting").siblings().find("input").prop("checked", false);
                        $this.prop("checked", false);
                        $(".menu_checkbox[value='" + that + "']").prop("checked", true);
                    }
                }
            })
        }
    };
    function editMenuSubmit () {
        var arrays=new Array();
        $(".mains .menu_checkbox").each(function(){
            $this=$(this);
            if($this.prop("checked")){
                // console.log($this.siblings("span").find(".textStr").html()); 
                var jsonStr={
                    "resParentId":$this.attr("data-pid"),
                    "resourcesId":$this.attr("data-id"),
                    "resName":$this.siblings("span").find(".textStr").text()
                    };
                arrays.push(jsonStr);
            }

        });
        // console.log(arrays);

        let data = allRes;
// 属性配置信息
let attributes = {
      id: 'resourcesId',
      parentId: 'resParentId',
      name: 'resName',
      rootId: 0
  };
//
let treeData = toTreeData(arrays, attributes);

console.log(treeData);
}  



let allRes = [
  {
    resourcesId: 4,
    resName: "删除角色",
    resParentId: 2
  },
  {
    resourcesId: 3,
    resName: "编辑角色",
    resParentId: 1
  },
  {
    resourcesId: 2,
    resName: "设置权限",
    resParentId: 1
  },
  {
    resourcesId: 5,
    resName: "添加用户",
    resParentId: 4
  },
  {
    resourcesId: 6,
    resName: "更新用户",
    resParentId: 4
  },
  {
    resourcesId: 7,
    resName: "删除用户",
    resParentId: 6
  },
  {
    resourcesId: 8,
    resName: "重置密码",
    resParentId: 3
  },
  {
    resourcesId: 9,
    resName: "添加地区",
    resParentId: 5
  },
  {
    resourcesId: 10,
    resName: "编辑地区",
    resParentId: 6
  }
];




//公共方法
function toTreeData (data, attributes) {
    // console.log(data);
  let resData = data;
  let tree = [];
  console.log(resData);
  console.log(attributes)
  for (let i = 0; i < resData.length; i++) {
    console.log(resData[i].resParentId);
    console.log(attributes.rootId)
    if (resData[i].resParentId == attributes.rootId) {
      let obj = {
        menuId: resData[i][attributes.id],
        menuPid:resData[i][attributes.parentId],
        menuTitle: resData[i][attributes.name],
        nextMenu: []
      };
      tree.push(obj);
      console.log(tree);
      resData.splice(i, 1);
      i--;
    }
  }
  run(tree);
  function run(chiArr) {
    if (resData.length !== 0) {
      for (let i = 0; i < chiArr.length; i++) {
        for (let j = 0; j < resData.length; j++) {
          if (chiArr[i].menuId == resData[j][attributes.parentId]) {
            let obj = {
              menuId: resData[j][attributes.id],
              menuPid:resData[j][attributes.parentId],
              menuTitle: resData[j][attributes.name],
              nextMenu: []
            };
            chiArr[i].nextMenu.push(obj);
            resData.splice(j, 1);
            j--;
          }
        }
        run(chiArr[i].nextMenu);
      }
    }
  }
  return tree;
}

</script>

 

blueBings
关注
专栏目录
查询出来的数据返回给前端呈树状Json格式
欢迎来到二十岁的男人的博客
04-09 2583
//用List构建带有层次结构的json数据 //List父子节点构造树形Json //将list集合转成树形结构的list集合 public static List<TConMenu> listToTree(List<TConMenu> list) { //用递归找子。 List<TConMenu> treeList = new ArrayList<TConMenu>(); for (TConMenu tree : list) {
json遍历成树结构 - 递归
汤迷的博客
02-05 628
1、json数据: created () { let testData = [ { "id": 10001, "name": "华南地区", "serial_no": "HNDQ01", "parent_id": 0, "level": 0 }, {
Java 将有父子关系的数据转换成树形结构数据
01-07
一、数据库父子结构数据设计     大部分采用 parentId的形式来存储父id，并且只存储父id，祖父Id不存储。也可以添加存储层级级别或者层级关系等字段。 CREATE TABLE `t_resource` ( `id` varchar(255) NOT NULL COMMENT '主键', `parent_id` varchar(255) DEFAULT NULL COMMENT '父ID', `name` varchar(255) DEFAULT NULL COMMENT '名称', `url` varchar(255) DEFAULT NULL COMMENT '
NoSQL分布式模型：分片和复制
每一个不曾起舞的日子，都是对人生的辜负。
10-11 1665
NoSQL是一种能够运行在大集群上的数据库，面向聚合的数据库非常适用于横向扩展。
vue 递归函数 根据父ID将数组转为JSON关系树
m0_60370017的博客
05-18 624
递归函数，根据父ID将数组转为JSON关系树
js 递归json树实现根据子id查父id的方法分析
01-19
本文实例讲述了js 递归json树实现根据子id查父id的方法。分享给大家供大家参考，具体如下： 最近做了一个类似用js实现思维导图的功能，作为思维导图，一定会有树状结构的数据产生，在操作里面的节点时会经常需要查找节点 的父节点及父节点。 对于未知层级的树状数据，用for循环是无法实现的，因为不知道要循环几层，那么最合适的方法就是用js递归 界面结构： json数据： orgTreeData:{ nodeId:19A5B, nodeName:预分析用户：1313.85万人, nodeType:root, expand:true, dat
JAVA后台转换成树结构数据返回给前端的实现方法
08-19
树形结构是一种层次结构，它由节点和子节点组成，每个节点都可以有多个子节点。例如，在文件系统中，每个文件夹都是一个节点，文件夹中的文件和子文件夹都是它的子节点。 在后台，我们可以使用递归算法来将数据转换...
将json转成树状结构
weixin_43893430的博客
06-23 967
JSON转树结构
python json数据转树结构_将数据转换成树型层级的Json格式的String
weixin_39843431的博客
12-24 1621
有时候我们项目里面需要将树型关系的数据转换成Json格式的String字符串假设数据库中的数据如下需要转换后输出的字符串的结果如下(对应的层级的关系)[{name:'爷爷',id:'1',content:'老人辈',parentId:'0',expanded: true,children:[{name:'爸爸',id:'2',content:'长辈',parentId:'1',expanded: ...
java json.pasent_来自CSV的带有id parent（Python）的JSON树
weixin_28746207的博客
03-02 89
我想这就是你想要的：#!/usr/bin/env python# -*- coding: utf-8 -*-# https://stackoverflow.com/questions/53687467/json-tree-from-csv-with-idparent-python# Just: how to make that "return" give the 'childs': { place...
全国行政区划表 包含树形结构 id name parentId格式
12-25
自己整理的全国行政区划表,包含一个树形表格式为 id name parentId code格式
线性结构与树形结构相互转换（ES6实现）
weixin_34014555的博客
04-22 987
前言 　　当树形结构的层级越来越深时，操作某一节点会变得越来越费劲，维护成本不断增加。所以线性结构与树形的相互转换变得异常重要！ 　　首先，我们约定树形结构如下： node = { id: number, // 数值 parentId: number, // 数值 name: string, children: [] || null, // 用数组的方式保存子节点，...
根据id 和 parentId生成多根列表的树状结构工具类
u012026406的博客
04-06 763
遂用反射改造了该方法(使用构造者模式,使用者仅需一行代码即可将多条数据记录构造为树状结构)如题,在研究 ruoyi 框架时发现 ruoyi 生成树状结构的方法需要硬编码具体的类型。代码如下,main方法为测试方法。
SpringBoot+Mybatis将数据库中的数据以JSON树形格式返回给前端
m0_64587776的博客
12-04 2299
想着从数据库读取数据，以json树形格式返回到前端。中间遇到些小插曲，idea中有些依赖包莫名其妙就不见了，搞了很久后面重新导入依赖包才运行成功。记录一下今天的所学吧~话不多说，直接开干！ 目录1.数据库建表： （id：自身节点编号 pid：父节点编号 name：节点名称） 2.实体类pojo： 3. dao层：4. *.xml文件：5.Service接口：6.Service实现类：7.Controller层：8.运行结果：
springboot 返回多层级关系为json格式给前端(树形层级数据)
ShA_QimA的博客
03-15 968
【代码】springboot 返回多层级关系为json格式给前端。
树结构（有id和pid字段）数组，生成多层嵌套的json对象
Godian的博客
12-13 5457
/* * 传入的数组有id和父节点pid字段，通过它们的关联构造成一棵或多棵树结构 * @param nodes 集合 * @param treeRootId 根节点的id */ function createTreeData(nodes, treeRootId) { var groups = {}; // 按父节点将节点分组 for (var i in nodes)
Java编程：将具有父子关系的数据库表数据转换为树形结构，支持无限层级
热门推荐
天将降大任于是人
01-19 2万+
在平时的开发工作中，经常遇到这样一个场景，在数据库中存储了具有父子关系的数据，需要将这些数据以树形结构的形式在界面上进行展示。本文的目的是提供了一个通用的编程模型，解决将具有父子关系的数据转换成树形结构的问题。如有不正之处，欢迎大家批评指正。编程模型我们以北京行政区划为例，讲解整个模型。北京市：市辖区 县市辖区：东城区 西城区 朝阳区 丰台区 石景山区 海淀区 门头沟区 房山区 通州区 顺义区 昌平
Java 树形结构转换：由id，pid结构到树状结构
修也
05-08 4543
package demo; import java.util.List; import java.util.Map; import java.util.Map.Entry; import java.util.Objects; import java.util.UUID; import com.google.gson.Gson; import com.google.gson.GsonBuild...
java根据父id遍历出父子树形关系（通用）
qq_41844287的博客
06-27 1万+
1.创建一个实体类，此类是将需要遍历父子关系的实体类的id和父id存进该类，最终使用工具类进行统一遍历，使该工具类达到通用（多数通用工具类会损失执行效率）的目的，也可以参考我的遍历条件写出专属的更高效的方法， import lombok.Data; //此注解为自动添加get、set、toString方法的，需要jar包，可自己生成getset， @Data public class Paren...
前端页面json数据转成树的
最新发布
11-14
以下是将前端页面JSON数据转换为树的方法： 1. 首先，您需要将JSON数据解析为JavaScript对象。您可以使用JSON.parse()方法将JSON字符串转换为JavaScript对象。 2. 接下来，您需要使用递归函数来遍历JavaScript对象并构建树。您可以使用以下代码： ```javascript function buildTree(data) { var result = []; var map = {}; var item; for (var i = 0; i < data.length; i++) { item = data[i]; item.children = []; map[item.id] = i; if (item.parent_id === 0) { result.push(item); } } for (var j = 0; j < data.length; j++) { item = data[j]; if (item.parent_id !== 0) { data[map[item.parent_id]].children.push(item); } } return result; } ``` 3. 最后，您可以使用jsTree库将树渲染到页面上。您可以使用以下代码： ```javascript $('#tree').jstree({ 'core': { 'data': buildTree(data) } }); ``` 其中，#tree是您要将树渲染到的DOM元素的ID，data是您解析的JavaScript对象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值