山铝菜单

因为菜单选用了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);
}

 

ztree树id、pid转成children格式的

 

 

例子:

<!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>

 

 

ztree树id、pid转成children格式的ztree树id、pid转成children格式的

 

 

项目延生

js

<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>

 

哥版本

ztree树id、pid转成children格式的
<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

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-02-24
  • 2021-11-28
  • 2021-06-16
  • 2021-06-20
猜你喜欢
  • 2022-01-19
  • 2022-12-23
  • 2021-10-01
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案