going-client(三)zTree使用自定義字體圖標

上一節寫了ztree使用字體圖標,因爲當時時間比較晚,只能倉促都將字體圖標寫死,自然這樣是不符合項目要求的,變更圖標顯示纔有價值。
圖標映射:左邊爲參數名字 右邊爲ztree的圖標calss名字
openIcon------》root_open
closeIcon------》root_close
openFolder------》ico_open
closeFolder------》ico_close
openIcon------》bottom_open
closeIcon------》bottom_close
detailIcon------》icon-detail

第一步:修改replaceClassName方法,從參數中獲取,如果不存在才取默認值

function replaceClassName(str,treeObj){
    console.log(str,"--1--ddd");
    var icons={};
    if(typeof treeObj!='undefined'){
        icons=treeObj["icons"];
    }

    str=str.replace("root_open","root_open "+(icons["openIcon"]||'icon-minus-square')+" icon goingicon");
    str=str.replace("root_close","root_close "+(icons["closeIcon"]||'icon-plus-square')+" icon goingicon");
    str=str.replace("ico_open","ico_open "+(icons["openFolder"]||'icon-folder-open')+" icon goingicon");
    str=str.replace("ico_close","ico_close "+(icons["closeFolder"]||'icon-folder')+" icon goingicon");
    str=str.replace("bottom_open","bottom_open "+(icons["openIcon"]||'icon-minus-square')+"  icon goingicon");
    str=str.replace("bottom_close","bottom_close "+(icons["closeIcon"]||'icon-plus-square')+" icon goingicon");
    console.log(str,"--2--ddd");
    return str;
}

第二步:修改makeNodeIcoClass方法:

makeNodeIcoClass: function (a, b) {
            if(a.icons==null){
                a.icons={};
            }
            var openFolder=a.icons["openFolder"]||"icon-folder-open";
            var closeFolder=a.icons["closeFolder"]||"icon-folder";
            var detailIcon=a.icons["detailIcon"]||"icon-detail";

            var c = ["ico"];
            if (!b.isAjaxing) {
                var d = e.nodeIsParent(a, b);
                c[0] = (b.iconSkin ? b.iconSkin + "_" : "") + c[0];
                d ? c.push(b.open ? f.folder.OPEN +" "+openFolder: f.folder.CLOSE+" "+closeFolder) : c.push(f.folder.DOCU+" "+detailIcon)
            }
            return f.className.BUTTON + " " + c.join("_")+" "+"icon goingicon"
        }

第三步:修改makeNodeLineClass方法:

makeNodeLineClass: function (a, b) {
            var c = [];
            a.view.showLine ? b.level == 0 && b.isFirstNode && b.isLastNode ? c.push(f.line.ROOT) : b.level == 0 && b.isFirstNode ? c.push(f.line.ROOTS) : b.isLastNode ? c.push(f.line.BOTTOM) : c.push(f.line.CENTER) : c.push(f.line.NOLINE);
            e.nodeIsParent(a, b) ? c.push(b.open ? f.folder.OPEN : f.folder.CLOSE) : c.push(f.folder.DOCU);
            return replaceClassName(i.makeNodeLineClassEx(b) + c.join("_"),a)
        }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章