jquery.ztree.js搜索插件v1.0发布:jquery.ztree.search.js

之前工作中有个需求,是模糊搜索ztree树节点名称,然后展示出来,当时研究了下ztree,然后做出来了,当时只是写了几个零散的方法就实现了(DEMO见之前一篇文章:《我也来实现ztree模糊搜索功能》)。

这几天,突然有同事问我要代码,看来其他同事也会使用呢,于是我把几个零散的方法给了他。可是我在给他的过程中,觉得零散方法是挺乱的,而且有些过度方法也会暴露给调用者,为什么不自己封装一下呢?另外既然ztree原生没有这种功能(原生ztree只能找到搜索出来的节点,要展示还需要结合另外几个方法),那么我应该做一个插件实现这个功能,就一个js,其他的同事只要引入,然后直接用tree对象调用方法就可以实现。

于是研究了下ztree的源码,发现ztree对象的生成是靠绑定在$上的zTree.init方法实现的,于是按照作者的思路和写法对zTree.init方法进行了重写,这样我自己就可以很容易的插入自定义的方法了,于是就完成了这个插件。

插件下载地址:
https://github.com/strangeen/jquery.ztree.search

下面是Quick Start,详见上面的地址:

<script type="text/javascript" src="jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="jquery.ztree.search.js"></script>
<script type="text/javascript">
  var zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
</script>
  
<input type="text" value="" id="in" />
<input type="button" value="SEARCH" onclick="zTreeObj.searchNodes($('#in').val())" />
  1. jquery.ztree.search.js必须在jquery.ztree.all.min.js下方引入
  2. 点击search按钮,zTree对象zTreeObj在页面上的显示状态就为按输入框中值搜索后的结果,清空输入框会擦除高亮展示,tree视图不改变