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

最新推荐文章于 2021-09-14 13:57:59 发布

原创最新推荐文章于 2021-09-14 13:57:59 发布 · 339 阅读

0 ·

CC 4.0 BY-SA版权

going-client 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种将zTree的默认图标替换为字体图标的简便方法，通过修改源代码中的几个关键函数，实现了从图片图标到字体图标的转换，并提供了详细的步骤和代码示例。

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{

}

大功告成，结果：

在这里插入图片描述