going-client(三)zTree使用自定义字体图标

短命女 2023-06-24 01:28 12阅读 0赞

上一节写了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方法，从参数中获取，如果不存在才取默认值

第二步：修改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)
            }