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

 

 

上面的改法都是根據個人需求而定，我這個是在學習 洞庭夕照（傳送門）大神的教學系列修改的。