Ztree Fa-Awesome 圖標使用

Ztree的樣式有些醜，和系統的主題不搭配。怎麼辦？

廢話少說，先看效果：

系統使用的是BootStrap，系統圖標都是fa的，Ztree支持fa在網上找了好久，都不是很滿意。

自己搞一把，來，記錄一下過程；

先說說Ztree的應用方向，包括：樹形菜單、樹形下拉；

本着一次搞定，其他調用懶惰心理，先來個封裝：

//封裝的函數中：關於Setting中的folder設置 
folder: {
                    // 摺疊icon
                    OPEN: "open fa fa-folder-open",     // 打開文件圖標
                    CLOSE: "close fa fa-folder",        // 摺疊文件圖標
                    TREEOPEN: "open fa fa-plus",          // 打開狀態圖標
                    TREECLOSE: "close fa fa-minus",       // 摺疊狀態圖標
                    // 子節點圖標
                    CHILDNODE: " fa fa-caret-right",
                    // 複選框圖標
                    UNCHECK: " fa fa-square-o ",      //未選中
                    CHECKED: " fa fa-check-square-o ",//選中
                    HALFCHECK: " fa fa-square ",         //半選

                    DOCU: "docu"
                }

那麼在Ztree.all.js中也要帶入設置：

1. 覆蓋原始參數集，帶入fa的圖標內容

 var _initRoot = function (setting) {
        //覆蓋參數
        $.extend(true, _consts.folder, setting.folder);
      
    };

2.第二處修改，expandCollapseNode修改這個方法，設置打開和關閉時，調用的樹形打開前的圖標樣式

打開樹形、打開文件夾  

view.replaceSwitchClass(node, switchObj, consts.folder.TREEOPEN);
                    view.replaceIcoClass(node, icoObj, consts.folder.OPEN);

關閉樹形、關閉文件夾

view.replaceSwitchClass(node, switchObj, consts.folder.TREECLOSE);
                    view.replaceIcoClass(node, icoObj, consts.folder.CLOSE);

if (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.TREEOPEN);
                    view.replaceIcoClass(node, icoObj, consts.folder.OPEN);
                    if (animateFlag === false || setting.view.expandSpeed === "") {
                        ulObj.show();
                        tools.apply(callback, []);
                    } else {
                        if (children && children.length > 0) {
                            ulObj.slideDown(setting.view.expandSpeed, callback);
                        } else {
                            ulObj.show();
                            tools.apply(callback, []);
                        }
                    }
                } else {
                    view.replaceSwitchClass(node, switchObj, consts.folder.TREECLOSE);
                    view.replaceIcoClass(node, icoObj, consts.folder.CLOSE);
                    if (animateFlag === false ||
                        setting.view.expandSpeed === "" ||
                        !(children && children.length > 0)) {
                        ulObj.hide();
                        tools.apply(callback, []);
                    } else {
                        ulObj.slideUp(setting.view.expandSpeed, callback);
                    }
                }
            } else {
                tools.apply(callback, []);
            }

3.到這裏，基本上已經完成了樹形的修改圖標樣式了，但是如果需要勾選框呢？繼續：

修改方法makeChkClass 加入Checkbox樣式；

   makeChkClass: function (setting, node) {
                var c = consts.checkbox, r = consts.radio,
                    fullStyle = "";
                var nodeChecked = data.nodeChecked(setting, node);
                if (node.chkDisabled === true) {
                    fullStyle = c.DISABLED;
                } else if (node.halfCheck) {
                    fullStyle = c.PART + " " + setting.folder.HALFCHECK;
                } else if (setting.check.chkStyle === r.STYLE) {
                    fullStyle = (node.check_Child_State < 1) ? c.FULL : c.PART + " " + setting.folder.CHECKED;
                } else {
                  //  fullStyle = nodeChecked ? ((node.check_Child_State === 2 || node.check_Child_State === -1) ? c.FULL : c.PART) : ((node.check_Child_State < 1) ? c.FULL : c.PART) + " " + setting.folder.CHECKED;
                    if (nodeChecked) {
                        if (node.check_Child_State === 2 || node.check_Child_State === -1) {
                            fullStyle = c.FULL + " " + setting.folder.CHECKED;
                        } else {
                            fullStyle = c.PART + " " + setting.folder.HALFCHECK;
                        }
                    } else {
                        if (node.check_Child_State < 1) {
                            fullStyle = c.FULL + " " + setting.folder.UNCHECK; 
                        } else {
                            fullStyle = c.PART + " " + setting.folder.HALFCHECK;
                        }
                    }
                    
                }
        
                var chkName = setting.check.chkStyle + "_" + (nodeChecked ? c.TRUE : c.FALSE) + "_" + fullStyle;
                chkName = (node.check_Focus && node.chkDisabled !== true) ? chkName + "_" + c.FOCUS : chkName;
                return consts.className.BUTTON + " " + c.DEFAULT + " " + chkName;
            }

達到以上的內容基本上已經完成了。

只剩下最後一步：樣式，css文件

刪除ztree關於樹形圖片應用圖標的css

至此，Ztree fa 改造完成；