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 改造完成；