ztree树插件自定义图标----支持字体图标

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

这是ztree插件得官方介绍，我本人也是非常喜欢这个插件，灵活好用，几乎做的每一个项目都有用到它。但是久而久之，我发现ztree的一个缺点，就是它的自定义图标只能用图片，不能支持字体图标。首先使用图片，修改很不灵活，其次也比较浪费资源。

也是由于项目需要，所以，我便动了修改源码，使它支持字体图标的念头。废话不多说，直接看代码。

首先我发现图标的实现，是加了行内样式style,然后应用背景图片，background来实现，所以我去核心代码core文件中搜索“background”。（由于我复制了一份文件，为jquery.ztree.core.texttree.js,以下例子都是这个文件）。

找到makeNodeIcoStyle方法就是添加style的方法，根据makeNodeIcoStyle方法，又找到了一个关键方法“makeDOMNodeIcon”,这个方法是生成图标的方法。

本着不破坏原插件功能的原则，于是所有应用生成图标方法的地方，都需要加一个判断，判断开发者是想用图片背景还是字体图标。于是我增加了一个字段：“textIcon”,如果传入这个字段，则代表使用字体图标。

好了，现在使用字体图标的字段标识已经加好了，接下来再添加一个获取开发者传入的textIcon的值的方法。写在获取节点名getNodeName方法下面。

再找到生成图标方法makeDOMNodeIcon处，加上判断。字体图标主要是给元素加上class,如下图。

ok，到这为止，基本上大功告成。但是因为在进行一些操作的时候，图标会跟着改变，比如展开收起的时候，所以还要找到其他图标变换的地方，同样加上判断。这里就不再详细说了，附上几张图片。

最后开发者使用的时候，只要给textIcon字段赋上你想要的字体图标的class值就可以啦！

再清楚一点，比如官方初始化代码例子，加上textIcon字段，值是想要加的字体图标的class:

看一下最终效果。

成功了没有？ok了没有？

已经附上jquery.ztree.core.texttree.js文件，大家可以用这个文件替换你的jquery.ztree.core.js文件，看看效果吧~

如有错误或者不足，欢迎指正~