【ztree系列——图标的修改】Bootstrap风格的ztree

前段时间项目中需要用树形结构，在选取的时候参考了很多插件，经过很多尝试，最后又回归到了ztree上。以前用的界面框架是EasyUI，但是它的树结构在实现起来有点复杂，并且功能不是特别完善。dtree在做demo的时候没什么问题，但是放到项目中，从数据库读取数据后还需要进行转换……码了n个demo后，还是觉得ztree最好用！

1.ztree图标

       ztree功能强大，使用方便是一方面，但是若使用它自带的图标，在有些网页设计中就不太搭调了，或者还会出现样式冲突，使得图标显示凌乱的问题（在使用Bootstrap框架的时候，根节点的图标会变形）。如果我们能自定义它的图标，根据网页风格来设定样式，这样就会让我们的页面看起来更加美观了。我们先看一张，使用ztree原生态图标的树形结构。

       在这棵树中，一共有3种图标，分别是“打开节点、关闭节点、叶子节点”三种类型的，它们都在ztree的css样式中进行了定义。

2.分析ztree图标的定义

       从官网上可下载ztree文件 http://www.ztree.me/v3/main.php，它的样式定义在metro.css文件里（或者是zTreeStyle.css……），其中可加载单个的图片，也可以从一张图片中根据坐标获取我们要用的图形。对metro.css比较重要的一个图片是metro.png，在图片中每个小