美文网首页
id pid父子级结构转树结构及ztree修改icon

id pid父子级结构转树结构及ztree修改icon

作者: 祈粼 | 来源:发表于2019-12-18 14:01 被阅读0次
    function initData(data){
        //第一步:构建两个对象 子对象,与父子关系的对象
        var treeData;
        for(var i=0,subs={subs:[]};i<data.length;i++){
            var _rowData=data[i];
            if(_rowData.parentPositionKId=='0'){
                var _pnode=_rowData.positionKId;
                if(subs[_rowData.positionKId]===undefined){
                    subs[_rowData.positionKId]={subs:[],iconSkin:'cc',positionCNName:_rowData.positionCNName+'【'+_rowData.staffCNName+'】',metadata:_rowData};
                }
                if(subs.subs.length<=0)subs.subs=[];
                subs.subs.push(subs[_rowData.positionKId]);
            }else{
                if(subs[_rowData.positionKId]===undefined){
                    subs[_rowData.positionKId]={positionCNName:_rowData.positionCNName+'【'+_rowData.staffCNName+'】',subs:[],metadata:_rowData,iconSkin:'cc'};
                }else{
                    subs[_rowData.positionKId].positionCNName=_rowData.positionCNName+'【'+_rowData.staffCNName+'】';
                    subs[_rowData.positionKId].metadata=_rowData;
                    subs[_rowData.positionKId].iconSkin='cc';
                }
                if(subs[_rowData.parentPositionKId]===undefined){
                    subs[_rowData.parentPositionKId]={positionCNName:'',subs:[],metadata:{},iconSkin:'cc'};
                }
                subs[_rowData.parentPositionKId].subs.push(subs[_rowData.positionKId]);
            }
        }
        //去除subs为空的键
        for(var k in subs){
            if(k=='subs'){
                continue;
            }
            if(subs[k].subs.length==0){
                delete subs[k].subs;
            }
        }
        console.log(subs.subs);
        return (subs.subs);
    }
    

    ztree更改icon样式

    .ztree li span.button.cc_ico_open,.ztree li span.button.cc_ico_close,.ztree li span.button.cc_ico_docu{margin-right:8px; background: url("../images/c.png") no-repeat scroll 0 0 transparent;background-size: 100% 100%; vertical-align:top; *vertical-align:middle}
    

    数据中增加iconSkin 值就是自己设置的样式

    var nodes = [
        //父节点展开 折叠时使用相同的图标
        { name:"父节点1", iconSkin:"cc"},
    
        //父节点展开 折叠时分别使用不同的图标
        { name:"父节点2", iconSkin:"cc"},
    
        //叶子节点个性化图标
        { name:"叶子节点", iconSkin:"cc"}
    ]
    
    

    相关文章

      网友评论

          本文标题:id pid父子级结构转树结构及ztree修改icon

          本文链接:https://www.haomeiwen.com/subject/etcunctx.html