ztree樹id、pid轉成children格式的(待整理完整)

本文轉載自查看原文 2019-06-27 10:10 1352 ztree

山鋁菜單

因為菜單選用了bootstrap treeview

，而格式需要是children類似的格式

var nodes = [
    {name: "父節點1", children: [
        {name: "子節點1"},
        {name: "子節點2"}
    ]}
];

而后台的數據是id、pid格式的

var nodes = [
    {id:1, pId:0, name: "父節點1"},
    {id:11, pId:1, name: "子節點1"},
    {id:12, pId:1, name: "子節點2"}
];

所以這個時候就要進行格式轉換了

函數：

/*
*data為ztree的結構數據  treecode treePcode   code為父級節點的code
*/
function initData(data,code){
    //第一步：構建兩個對象 子對象，與父子關系的對象
    var treeData;
    for(var i=0,childObj={},relatArr=[],relatArr1=[],relatObj={},nodes={nodes:[]};i<data.length;i++){
        var _rowData=data[i];
        if(_rowData.treePCode=='0'){
            var _pnode=_rowData.treeCode;
            if(nodes[_rowData.treeCode]===undefined){
                nodes[_rowData.treeCode]={nodes:[]};
            }
            nodes.nodes=nodes[_rowData.treeCode].nodes;
        }else{
            if(nodes[_rowData.treeCode]===undefined){
                nodes[_rowData.treeCode]={text:_rowData.name,nodes:[],obj:_rowData,href:_rowData.link};
            }else{
                nodes[_rowData.treeCode].text=_rowData.name;
                nodes[_rowData.treeCode].obj=_rowData;
                nodes[_rowData.treeCode].href=_rowData.link;
            }
            if(nodes[_rowData.treePCode]===undefined){
                nodes[_rowData.treePCode]={text:'',nodes:[],obj:{},href:''};
            }
            nodes[_rowData.treePCode].nodes.push(nodes[_rowData.treeCode]);
        }
    }
    //去除nodes為空的鍵
    for(var k in nodes){
        if(k=='nodes'){
            continue;
        }
        if(nodes[k].nodes.length==0){
            delete nodes[k].nodes;
        }
    }
    console.log(nodes.nodes);
}

例子：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <script type="text/javascript">
var nodes = [
    {id:73, pId:0,treeCode:73, treePCode:0, name: "父節點1"},
    {id:7301, pId:73,treeCode:7301, treePCode:73, name: "子節點1"},
    {id:73011, pId:7301,treeCode:73011, treePCode:7301, name: "子節點1"},
    {id:73012, pId:7301, treeCode:73012, treePCode:7301,name: "子節點1"},
    {id:7302, pId:73, treeCode:7302, treePCode:73,name: "子節點1"},
    {id:73021, pId:7302,treeCode:73021, treePCode:7302, name: "子節點1"},
    {id:73022, pId:7302,treeCode:73022, treePCode:7302, name: "子節點1"}
];
window.onload=function(){
    console.log(initData(nodes,0))
}
/*
*data為ztree的結構數據  treecode treePcode   code為父級節點的code
*/
function initData(data,code){
    //第一步：構建兩個對象 子對象，與父子關系的對象
    var treeData;
    for(var i=0,childObj={},relatArr=[],relatArr1=[],relatObj={},nodes={nodes:[]};i<data.length;i++){
        var _rowData=data[i];
        if(_rowData.treePCode=='0'){
            var _pnode=_rowData.treeCode;
            if(nodes[_rowData.treeCode]===undefined){
                nodes[_rowData.treeCode]={nodes:[]};
            }
            nodes.nodes=nodes[_rowData.treeCode].nodes;
        }else{
            if(nodes[_rowData.treeCode]===undefined){
                nodes[_rowData.treeCode]={text:_rowData.name,nodes:[],obj:_rowData,href:_rowData.link};
            }else{
                nodes[_rowData.treeCode].text=_rowData.name;
                nodes[_rowData.treeCode].obj=_rowData;
                nodes[_rowData.treeCode].href=_rowData.link;
            }
            if(nodes[_rowData.treePCode]===undefined){
                nodes[_rowData.treePCode]={text:'',nodes:[],obj:{},href:''};
            }
            nodes[_rowData.treePCode].nodes.push(nodes[_rowData.treeCode]);
        }
    }
    //去除nodes為空的鍵
    for(var k in nodes){
        if(k=='nodes'){
            continue;
        }
        if(nodes[k].nodes.length==0){
            delete nodes[k].nodes;
        }
    }
    return (nodes.nodes);
}
  </script>
 </body>
</html>

項目延生

<script type="text/javascript">
//1、字符串排序的方法（最簡單）
var c=$.findCompanyList().paramList.sort(function(a,b){
        return (a.id).localeCompare(b.id)
    })
$(c).each(function(i,d){//生成公司下拉列表
    d.value=d.areaCode;
    var nbsp=new Array(Math.ceil(d.areaCode.length/2)).join('&emsp;');
    var li=$('<li></li>').appendTo("#rtuList");
    li.attr(d).html('<a href="#">'+nbsp+d.name+'</a>');
})
//2、下拉樹處理的方法
/*步驟：
1、先將ztree樹的數據格式轉換成 有父子關系的數組
2、遞歸遍歷數據構建li*/

//處理數據：
var treeRenderData=initTreeData($.findCompanyList().paramList,null);
console.log(treeRenderData);
var listr="";
for(var i=0;i<treeRenderData.length;i++){
    var n=treeRenderData[i];
    //如果有子集
    if(n.nodes instanceof Array){
        getbutnodes(n);
    }
}
$("#rtuList").html(listr);
//生成公司下拉列表
function getbutnodes(_el){
    var el=_el.nodes;
    var d=_el.obj;
    var nbsp=new Array(Math.ceil(d.areaCode.length/2)).join('&emsp;');
    var _d=JSON.stringify(d);
    d.value=d.id;
    listr+='<li '+_d+'>'+
            '<a href="#">'+nbsp+d.name+'</a>'+
        '</li>';
    if(el==undefined){return ;}
    for(var k=0;k<el.length;k++){
        getbutnodes(el[k])
    }
}


function initTreeData(data,code){
    var arr=[];
    for(var m=0;m<data.length;m++){
        data[m].treeCode=data[m].id;
        data[m].treePCode=data[m].pId;
        if(data[m].pId===null){
            arr.push({
                href:undefined,
                obj:data[m],
                text:data[m].name
            });
        }
    }
    //第一步：構建兩個對象 子對象，與父子關系的對象
    var treeData;
    for(var i=0,childObj={},relatArr=[],relatArr1=[],relatObj={},nodes={nodes:[]};i<data.length;i++){
        var _rowData=data[i];
        if(_rowData.treePCode===null){
            var _pnode=_rowData.treeCode;
            if(nodes[_rowData.treeCode]===undefined){
                nodes[_rowData.treeCode]={nodes:[]};
            }
            nodes.nodes=nodes[_rowData.treeCode].nodes;
        }else{
            if(nodes[_rowData.treeCode]===undefined){
                nodes[_rowData.treeCode]={text:_rowData.name,nodes:[],obj:_rowData,href:_rowData.link};
            }else{
                nodes[_rowData.treeCode].text=_rowData.name;
                nodes[_rowData.treeCode].obj=_rowData;
                nodes[_rowData.treeCode].href=_rowData.link;
            }
            if(nodes[_rowData.treePCode]===undefined){
                nodes[_rowData.treePCode]={text:'',nodes:[],obj:{},href:''};
            }
            nodes[_rowData.treePCode].nodes.push(nodes[_rowData.treeCode]);
        }
    }
    //去除nodes為空的鍵
    for(var k in nodes){
        if(k=='nodes'){
            continue;
        }
        if(nodes[k].nodes.length==0){
            delete nodes[k].nodes;
        }
    }
    if(arr.length>0){
        arr[0].nodes=nodes.nodes;
    }
    return arr;
}
    
</script>

哥版本

<html>
    <head>
        <title></title>
        <script type="text/javascript">
            
            function test(){
            
                var ary = [
                    {id:1,name:'a',pid:0},
                    {id:2,name:'a_1',pid:1},
                    {id:3,name:'a_2',pid:1},
                    {id:4,name:'b',pid:0},
                    {id:5,name:'b_1',pid:4},
                    {id:6,name:'b_1_1',pid:5},
                    {id:7,name:'a_1_1',pid:2},
                ];
                
                /*var ary = [
                    {id:1,name:'a',pid=0,children:[
                        {id:2,name:'a_1',pid=1,children:[
                            {id:7,name:'a_1_1',pid=2}
                        ]},
                        {id:3,name:'a_2',pid=1}
                    ]},
                    {id:4,name:'b',pid=0,children:[
                        {id:5,name:'b_1',pid=4,children:[
                          {id:6,name:'b_1_1',pid=5}
                        ]},
                    ]}
                ];*/
                
                
                var newary = [];
                var temp1={};
                var temp2={};
                //1.尋找根節點
                for(var i=0;i<ary.length;i++){
                    if(!temp1[ary[i].id]){
                        temp1[ary[i].id]='a';
                    }
                    
                    if(!temp2[ary[i].pid]){
                        temp2[ary[i].pid]='b';
                    }
                }
                
                var temp3={};//存放根結點
                for(var p in temp2){
                    if(!temp1[p]){
                        //找到一個根結點
                        temp3[p]='c';
                    }
                }
                
                //2.根據根節點的id找到具體元素，並存放到新的數組中
                for(var p in temp3){
                    for(var i = 0;i<ary.length;i++){
                        if(ary[i].pid == p){
                            newary.push(ary[i]);
                        }
                    }
                }
                //3.循環查詢每個元素的子節點
                for(var i=0;i<newary.length;i++){
                    findChildren(ary, newary[i]);
                }
                
                console.log(newary);
            }
            
            
            function findChildren(ary, item){
                var children = [];
                for(var i=0;i<ary.length;i++){
                    if(ary[i].pid == item.id){
                          findChildren(ary, ary[i]);
                          children.push(ary[i]);
                    }
                }
                if(children.length > 0){
                    item["children"] = children;
                }
            }
            
            test();
        </script>
    </head>
    <body>
        aaaa
    
    </body>
</html>

View Code

勇的版本（推薦）

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>將id pid的轉成children格式的</title>
 </head>
 <body>
  <script type="text/javascript">
var nodes = [
    {id:73, pId:0,treeCode:73, treePCode:0, name: "父節點1"},
    {id:7301, pId:73,treeCode:7301, treePCode:73, name: "子節點1"},
    {id:73011, pId:7301,treeCode:73011, treePCode:7301, name: "子節點1"},
    {id:73012, pId:7301, treeCode:73012, treePCode:7301,name: "子節點1"},
    {id:7302, pId:73, treeCode:7302, treePCode:73,name: "子節點1"},
    {id:73021, pId:7302,treeCode:73021, treePCode:7302, name: "子節點1"},
    {id:73022, pId:7302,treeCode:73022, treePCode:7302, name: "子節點1"}
];
window.onload=function(){
    var mm=listToTree(nodes);
    console.log(mm)
}

function listToTree(data, options) {
    if (data && data.length) {
        options = options || {}
        let ID_KEY = options.idKey || 'id'
        let PARENT_KEY = options.parentKey || 'pId'
        let CHILDREN_KEY = options.childrenKey || 'children'
        let tree = []
        let childrenOf = {}
        var item, id, parentId

        for (var i = 0, length = data.length; i < length; i++) {
            item = data[i]
            id = item[ID_KEY]
            parentId = item[PARENT_KEY] || 0
            // 每行數據都可能存在子類
            childrenOf[id] = childrenOf[id] || []
            // 初始化子類
            item[CHILDREN_KEY] = childrenOf[id]
            if (parentId != 0) {
                // 初始化其父的子節點
                childrenOf[parentId] = childrenOf[parentId] || []
                // 把它推到父類下的children
                childrenOf[parentId].push(item)
            } else {
                tree.push(item)
            }
        }
        return tree
    } else {
        return []
    }
}
  </script>
 </body>
</html>

View Code

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js==>id-pid轉children【】樹結構數據遞歸 tree ztree樹默認根據ID默認選中該條數據 DES算法原理完整版 jsonArray:JavaBean,List,Map轉成json格式(轉+整理) [面試] Java GC (未整理完) 樹插件 ztree 的基本用法 Java簡單ztree樹 ztree樹樣式的設計 zTree實現多選樹將毫秒轉成日期格式yyyy-MM-dd HH:mm:ss 整理的時間格式的轉換