美文网首页
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