20200819 layui tree js 实现 list转换成tree的方法示例（数组到树）

方法：

//调用后台获取list数据

//树形菜单 ok

   getLefttree();

   function getLefttree(){

    $.ajax({

      type:"POST",

      url: sysURL+"/cegtPermission/findPermissionTree/",

      dataType: "json",

      success:function(data){

        var resData = data;

        //console.log("返回数据findPermissionTree",resData);

        if(data.code == '005'){

          if(!isEmpty(resData.data)){

            var treesData = resData.data

              treesData.map(function(item){

                //console.log("数据",item);

                item.parentId?item.parentId:'0';

                item.title=item.permissionName

              })

              //console.log("返回数据treesData",treesData);

             // getTreedata(treesData)

             listToTree(treesData);

          }

          if(!isEmpty(resData.data)) setTree(resData.data);

        }else{

          console.log('获取失败',data);

          layer.alert(resData)

        }

 

      }

 

    })

  }

 //列表转node

   function listToTree(oldArr){

    oldArr.forEach(element => {

      let parentId = element.parentId;

      if(parentId !== 0){

        oldArr.forEach(ele => {

          if(ele.id == parentId){ //当内层循环的ID== 外层循环的parendId时，（说明有children），需要往该内层id里建个children并push对应的数组；

            if(!ele.children){

              ele.children = [];

            }

            ele.children.push(element);

          }

        });

      }

    });

    //console.log("listToTree--oldArr",oldArr); //此时的数组是在原基础上补充了children;

    oldArr = oldArr.filter(ele => ele.parentId ===""); //这一步是过滤，按树展开，将多余的数组剔除；

    console.log("listToTree--oldArr",oldArr);

    //return oldArr;

 

    //console.log(oldArr);

    tree.render({

      elem: '#demoTree'

      ,id: "demoTree"

      ,data:oldArr

      ,showLine: false  //是否开启连接线

      ,accordion: true

      ,showCheckbox: true

      ,onlyIconControl: true

      // 加载完成后的回调函数

      ,success: function (d) {

         // 选中节点，根据id筛选

        tree.setChecked('demoTree', check); //勾选指定节点

        tree.refresh('tree');

       }

       //数据渲染完的回调

      ,done: function () {

          //关闭加载

         // console.log("333"); console.log(check);

          //setTree(check);

      }

      ,

      click: function (data) {

       //console.log(data.elem); //得到checkbox原始DOM对象

       //console.log(data.elem.checked); //是否选中，true选中

       //alert(data.value); //弹出value值

      }

 

    });

 

  }

html的展示

<!--权限维护-->

<div class="layui-hide" id="addmenuDemo" style="padding: 20px 20px 0 20px;">

  <div id="demoTree" class="demo-tree demo-tree-box"></div>

  <div class="layui-btn-container" style="text-align: center;">

    <button class="layui-btn layui-btn-normal" lay-demo="getCheckDatalist">确定</button>

  </div>

</div>