going-client(二)zTree替换成字体图标

怼烎@ 2023-06-23 15:22 9阅读 0赞

zTree采用的图片方式，希望改成字体图片，网上看下有许多方法可以实现，但每种方式都比较麻烦，现在摸索了一种简单都方式，直接上代码  
1、替换叶子节点都图标,找到makeNodeIcoClass方法，替换成下面代码：

makeNodeIcoClass: function (a, b) {
                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 +" icon-folder-open": f.folder.CLOSE+" icon-folder") : c.push(f.folder.DOCU+" icon-detail")
                }
                return f.className.BUTTON + " " + c.join("_")+" "+"icon goingicon"
            }

2、定义类替换函数：

function replaceClassName(str){
        console.log(str,"--1--ddd");
        str=str.replace("root_open","root_open icon-minus-square icon goingicon");
        str=str.replace("root_close","root_close icon-plus-square icon goingicon");
        str=str.replace("ico_open","ico_open icon-folder-open icon goingicon");
        str=str.replace("ico_close","ico_close icon-folder icon goingicon");
        str=str.replace("bottom_open","bottom_open icon-minus-square  icon goingicon");
        str=str.replace("bottom_close","bottom_close icon-plus-square icon goingicon");
        console.log(str,"--2--ddd");
        return str;
    }

3、找到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("_"))
            }

4、找到replaceIcoClass方法，修改成：

replaceIcoClass: function (a, b, c) {
                if (b && !a.isAjaxing && (a = b.attr("class"),
                a != void 0)) {
                    a = a.split("_");
                    switch (c) {
                        case f.folder.OPEN:
                        case f.folder.CLOSE:
                        case f.folder.DOCU:
                            a[a.length - 1] = c
                    }
                    var clas=a.join("_");
                    b.attr("class", replaceClassName(clas));
                }
            }

5、找到replaceSwitchClass方法，修改成：

replaceSwitchClass: function (a, b, c) {
                if (b) {
                    var d = b.attr("class");
                    if (d != void 0) {
                        d = d.split("_");
                        switch (c) {
                            case f.line.ROOT:
                            case f.line.ROOTS:
                            case f.line.CENTER:
                            case f.line.BOTTOM:
                            case f.line.NOLINE:
                                d[0] = i.makeNodeLineClassEx(a) + c;
                                break;
                            case f.folder.OPEN:
                            case f.folder.CLOSE:
                            case f.folder.DOCU:
                                d[1] = c
                        }
                        var clas=d.join("_");
                        b.attr("class", replaceClassName(clas));
                        c !== f.folder.DOCU ? b.removeAttr("disabled") :
                            b.attr("disabled", "disabled")
                    }
                }
            }

6、增加部分扩展样式信息：

.ztree li span.button.ico_docu,.ztree li span.button.ico_open,.ztree li span.button.ico_close,.ztree li span.button.root_open,.ztree li span.button.root_close,.ztree li span.button.bottom_open,.ztree li span.button.bottom_close{
        background-image:none !important;
        font-size: 18px;
        line-height: 22px;
    }
    
    .ztree .goingicon.icon-minus-square,.ztree .goingicon.icon-plus-squareicon{
        font-size: 18px !important;
    }
    
    .ztree li span.button.ico_open{
    
    }

大功告成，结果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191220010655332.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM=,size_16,color_FFFFFF,t_70