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("_"));
            }

 

 

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