ztree树的使用

记录项目中关于ztree插件的使用。

实现的功能有：排序、迁移、搜索、删除、右键菜单、重命名、新增。

这里是由于项目需要不同人员的权限不同，右键菜单选项不同；如果你也有这种需求，我觉得这里有两种实现方式，一是像这里写的，点击右键时去后代判断，根据判断结果再去显示；二是在获取树的信息的时候，把判断所需要的必要参数直接放在json里一块返回来，这样前台只需要直接判断就行了。

实现的效果是：输入框内只要有输入变化，就会执行一次搜索方法

火狐有一个bug，就是假如树中含有一个名字为“haha”的节点和名字为“哈哈”的节点，这时你用中文输入法去打“哈”这个字，发现只能输入英文。。扯远了，当然这个可以不做。重点是搜索方法。

其实获取到含有搜索关键字的所有节点很简单，ztree已经封装好了，就是getNodesByParamFuzzy()。

但是，想要的效果是，执行下一次搜索时，要把上一次搜索展开的节点全都关闭，再去展开这种的符合条件的节点。

按道理讲，也很简单，调用expandAll(false)就可以将节点都关闭，然后再去展开符合条件的节点就行了。

但是这样写了以后，发现上次搜索展开的节点并不会全部关闭，而是有的关闭了，有的还是展开的。

在网上搜了很久，在ztree的github项目的issue中找到了一点线索，说展开和关闭都是有动画的。

我想可能是前面的关闭所有节点还没有执行完，与后面的展开节点冲突了。

于是就去api里找，发现有expandSpeed这个参数设置，将动画关闭，这个bug竟然好了。

具体的关于dom的内部原理我不了解。

这里实现的效果是：鼠标移动到某个节点上时，节点后面会出现一个图标，点击图标，实现something

最佳答案: treeNode.halfCheck 属性即可 请查看 halfCheck 的API 文档 以及 “Checkbox halfCheck 演示” 和 “Radio halfCheck 演示”

样式定义在metro.css文件里（或者是zTreeStyle.css……），其中可加载单个的图片，也可以从一张图片中根据坐标获取我们要用的图形。对metro.css比较重要的一个图片是metro.png，在图片中每个小方格是5px，在css中加载时按照横纵坐标进行图标的获取。

在ztree中，css主要用了两种方式来加载图标。第一种：根据背景图，图标大小，和坐标位置

第二种：直接加载图片

这两种方式，第二种比较常用，但是对于数据量大的情况，第一种方法貌似更好。对于我们想要修改的元素，可以先在网页中定位一下，找到它具体的class，然后来这里更改就可以了。

3.Bootstrap风格装饰ztree

以最近很流行的Bootstrap为例，给ztree装饰成Bootstrap的风格。上边我们已经分析过ztree是如何设定样式，这里我们只需要任选其一做更改就行了，鉴于它使用了大量以背景图片为基础的图标设定，我们最好还是设定成直接加载图片的比较方便，要不然改的数据太多了……

1）ztree也有黑白色的css、png成套的样式设置，为了更符合Bootstrap的图标样式，让它替换掉原有的css文件和彩色图标

如果页面框架是Bootstrap的，则在显示的时候根节点的图标是“破碎”的，经过查找发现，是根节点图标位置受到Bootstrap的影响，在css文件中找到设置它的位置，进行坐标更改

2）上边的步骤只能算是在ztree内部设定，还不算加上Boostrap的风格。不过，我们只需要再给它更换一个图标，看起来就有那么点味道了（为了展示方便，进行了换行处理）

这样就是另一种风格了，如果你想要自定义其它风格，根据上边的demo来做，应该不算什么难事了。

小结：

ztree中有自定义图标的方法，但是在遇到图标显示不完整的时候还是没办法解决，最后更改了css文件才让图标显示完整。在解决这个问题的过程中了解了ztree图标的加载过程，所有顺便练练手，直接从CSS来给ztree换了个风格。

---