zoukankan      html  css  js  c++  java
  • ztree使用font-awesome字体的问题,

    ztree要使用自定义图标字体的时候 需要自己做皮肤cssstyle,官方有文档,但是有些时候我们值需要简单的设置图标字体class样式 是没办法使用的,我们需要对两个函数进行修改。

    下面是两个函数请自己看注释

    expandCollapseNode是节点折叠展开的函数
                expandCollapseNode: function (setting, node, expandFlag, animateFlag, callback) {
                    var root = data.getRoot(setting),
                        childKey = setting.data.key.children;
                    var tmpCb, _callback;
                    if (!node) {
                        tools.apply(callback, []);
                        return;
                    }
                    if (root.expandTriggerFlag) {
                        _callback = callback;
                        tmpCb = function () {
                            if (_callback) _callback();
                            if (node.open) {
                                setting.treeObj.trigger(consts.event.EXPAND, [setting.treeId, node]);
                            } else {
                                setting.treeObj.trigger(consts.event.COLLAPSE, [setting.treeId, node]);
                            }
                        };
                        callback = tmpCb;
                        root.expandTriggerFlag = false;
                    }
                    if (!node.open && node.isParent && ((!$$(node, consts.id.UL, setting).get(0)) || (node[childKey] && node[childKey].length > 0 && !$$(node[childKey][0], setting).get(0)))) {
                        view.appendParentULDom(setting, node);
                        view.createNodeCallback(setting);
                    }
                    if (node.open == expandFlag) {
                        tools.apply(callback, []);
                        return;
                    }
                    var ulObj = $$(node, consts.id.UL, setting),
                        switchObj = $$(node, consts.id.SWITCH, setting),
                        icoObj = $$(node, consts.id.ICON, setting);
    
                    if (node.isParent) {
                        node.open = !node.open;
                        if (node.iconOpen && node.iconClose) {
                            icoObj.attr("style", view.makeNodeIcoStyle(setting, node));
                        }
    
                        if (node.open) { //这个判断打开的时候用什么图标
                            view.replaceSwitchClass(node, switchObj, consts.folder.OPEN);
                            view.replaceIcoClass(node, icoObj, consts.folder.OPEN);//这里替换的是 span的class 进去自行修改
                            if (animateFlag == false || setting.view.expandSpeed == "") {
                                ulObj.show();
                                tools.apply(callback, []);
                            } else {
                                if (node[childKey] && node[childKey].length > 0) {
                                    ulObj.slideDown(setting.view.expandSpeed, callback);
                                } else {
                                    ulObj.show();
                                    tools.apply(callback, []);
                                }
                            }
                        } else {
                            view.replaceSwitchClass(node, switchObj, consts.folder.CLOSE); 
                            view.replaceIcoClass(node, icoObj, consts.folder.CLOSE);//这里替换的是 span的class 进去自行修改   
                            if (animateFlag == false || setting.view.expandSpeed == "" || !(node[childKey] && node[childKey].length > 0)) {
                                ulObj.hide();
                                tools.apply(callback, []);
                            } else {
                                ulObj.slideUp(setting.view.expandSpeed, callback);
                            }
                        }
                    } else {
                        tools.apply(callback, []);
                    }
                }

    MakNodeIcoClass是加载节点生成class的函数  如果这里像我这里修改 需要把 expandCollapseNode函数的两行代码注视掉:view.replaceIcoClass(node, icoObj, consts.folder.CLOSE)

                //makeNodeIcoClass 负责加载节点的时候生成class
                //我根据自己需求改了一下,注视掉的代码 都是原始代码
                makeNodeIcoClass: function (setting, node) {
                    var icoCss = ["ico"];
                    if (!node.isAjaxing) {
                        icoCss[0] = (node.iconSkin ? node.iconSkin /*+ "_" */: "");// + icoCss[0];
                        if (node.isParent) {
                            //icoCss.push(node.open ? consts.folder.OPEN : icoCss.join('_')/*consts.folder.CLOSE*/);
                        } else {
                            //icoCss.push(consts.folder.DOCU);
                        }
                    }
                    return /*consts.className.BUTTON + " " +*/ icoCss.join('_');
                }

    通过上面的修改以后,我们只需要 给出 iconSkin 就可以了,iconClose 和 iconOpen 如果按照我这种改法是没办法使用的。 需要再进一步修改。

    [{"id":10,"name":"test","pId":0,"iconSkin":"fa fa-link","url":"/system/Category/Details/10","iconOpen":null,"iconClose":null}]

    不需要注视上面提到的两行代码,需要修改replaceIcoClass函数如下,

                replaceIcoClass: function (node, obj, newName) {
                    if (!obj || node.isAjaxing) return;
                    var tmpName = obj.attr("class");
                    if (tmpName == undefined) return;
                    var tmpList = tmpName.split("_");
                    switch (newName) {
                        case consts.folder.OPEN:
                            tmpList[tmpList.length - 1] = node.iconOpen;
                            break;
                        case consts.folder.CLOSE:
                            tmpList[tmpList.length - 1] = node.iconClose;
                            break;
                        case consts.folder.DOCU:
                            //tmpList[tmpList.length-1] = newName;
                            tmpList[tmpList.length - 1] = node.iconSkin;
                            break;
                    }
                    //obj.attr("class", tmpList[tmpList.length - 1]);
                    obj.attr("class", tmpList.join("_"));
                }

    上面的改法都是根据个人需求而定,我这个是在学习 洞庭夕照(传送门)大神的教学系列修改的。

  • 相关阅读:
    忍者必须死3 模拟器按键设置
    C# 工厂模式 个人基本流程
    WPF Boolean类型转化器收集 反转转化器
    Json实体类驼峰名称转化器
    TDengine + EMQ X + Grafana 轻松搭建高效低成本的边缘侧工业互联网平台
    呼声最高的数据更新功能来了,用户需要什么,我们就开源什么
    年轻人不讲武德,TDengine边缘侧数据存储方案挑战SQLite
    保姆级演示一分钟搞定TDengine的下载安装
    双汇大数据方案选型:从棘手的InfluxDB+Redis到毫秒级查询的TDengine
    HiveMQ TDengine extension 使用指南
  • 原文地址:https://www.cnblogs.com/yueyue184/p/6510340.html
Copyright © 2011-2022 走看看