將後臺返回數據去重並渲染到樹狀圖上

今天做項目時遇到了個樹狀圖渲染的問題，這邊要求最終實現效果如下，顯示所有企業所有的汽車車牌號:

後臺返回的數據格式將每個企業對應的車輛分別爲一條一條數據，我當時的想法是讓後臺返回一個企業爲一個對象，該對象又包含着一個車輛數組對象，鑑於後臺同事說接口沒法實現這樣的數據格式，因此實現字段處理需要前端來實現。

後臺返回的數據：var items=[{"Cid":11,"Cname":'企業1',"Pno":'粵Axxxx1',"Vid":'p11'},

{"Cid":11,"Cname":'企業1',"Pno":'粵Axxxx2',"Vid":'p12'},

{"Cid":12,"Cname":'企業2',"Pno":'粵Bxxxx1',"Vid":"p21"},

{"Cid":12,"Cname":'企業2',"Pno":'粵Bxxxx2',"Vid":'p22'}....];

而樹圖渲染需要的數據格式爲：

var zNodes = [

{ id: 1, pId: 0, name: '廣東省企業彙總', open: true },
{ id: 11, pId: 1, name: '東莞市xxx企業', open: true },
{ id: 111, pId: 11, name: '粵xxxx1', icon: "../../resources/images/timg.png" },
{ id: 112, pId: 11, name: '粵xxxx2', icon: "../../resources/images/timg.png" },
{ id: 12, pId: 1, name: '廣州市xxx企業', open: true },
{ id: 121, pId: 12, name: '粵xxxx1', icon: "../../resources/images/timg.png" },
{ id: 122, pId: 12, name: '粵xxxx2', icon: "../../resources/images/timg.png" },
{ id: 13, pId: 1, name: '深圳市xxx企業', open: true },
{ id: 131, pId: 13, name: '粵xxxx1', icon: "../../resources/images/timg.png" },
{ id: 132, pId: 13, name: '粵xxxx2', icon: "../../resources/images/timg.png" },

];

我的想法是先得到如下數據的一個數組，再轉變爲樹圖所需格式：

dataRender = [

{"父節點ID1":[{"Cid",'企業id'},{"Cname":'企業名稱'},Vitems:[{"Vid":'汽車1id',"Pno":"汽車1車牌號"},{"Vid":'汽車2id',"Pno":"汽車2車牌號"}]},

{"父節點ID2":[{"Cid",'企業id'},{"Cname":'企業名稱'},Vitems:[{"Vid":'汽車1id',"Pno":"汽車1車牌號"},{"Vid":'汽車2id',"Pno":"汽車2車牌號"}]}.....];

第一步，把items數組對象轉爲dataRender對象，這一步涉及到數組去重，考慮到通過key值可以直接判斷是否已經存在該ID的企業，因此以ID號作爲數組的key值，並且以該key值屬性爲一個對象；

實現代碼如下：

    $.each(items,function(i,item){
        if(!dataRender[item.Cid]){
            dataRender[item.Cid]={"Cid":item.Cid,"Cname":item.Cname,Vitems:[{"Pno":item.Pno,"Vid":item.Vid}]};
        }else{
            dataRender[item.Cid].Vitems.push({"Pno":item.Pno,"Vid":item.Vid});
        }
    });

第二步，得到dataRender後，將dataRender轉爲樹圖數據格式，即zNodes數組對象，實現代碼如下：

    var zNodes = [{ id: 'p1', pId: 0, name: '廣東省企業彙總', open: true }];
    $.each(dataRender,function(Cid,item){
        // console.log(i,item.Vitems);
        zNodes.push({id:Cid,pId:'p1',name:item.Cname,open: true});
        $.each(item.Vitems,function(i,item){
            zNodes.push({id:item.Vid, pId:Cid, name:item.Pno});
        });
    });

控制檯輸出zNodes數據如下：

第三步，將數據渲染到樹圖div中，

html:

    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>

javascript:

var setting = {
        check:{
            enable:true
        },
        data:{
            simpleData:{
                enable:true
            }
        }
    };
    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });

即可達到預設效果，該過程中，js使用了三次each循環遍歷，但是總覺得應該還有其他更方便的js代碼可以實現這個過程的轉換，請灑潘江，各傾陸海云爾，希望能夠有更好更快的js得以實現這個過程~~