ztree插件怎么实现搜索

1. 利用zTree显示完整树结构；

2. 根液州据关键字，筛选出不包含关键字的叶子节点，并将这些不符合条件的叶子节点全部隐藏

主要代码

1. 页面部分

1. html页面需要引入以下资源

<!-- jquery包，ztree依赖jquery --><script type="text/javascript" src="ztree/js/jquery-1.4.4.min.js"></script><!-- ztree核心包，ztree核心功能 --> <script type="text/javascript" src="ztree/js/jquery.ztree.core-3.5.min.js"></script><!-- ztree exhide包，ztree隐藏显示结点需要此包支持 --> <script type="text/javascript" src="ztree/js/jquery.ztree.exhide-3.5.min.js"></script>12345678

2. html 页面结构

<div class="container">

<div class="search-bar">

<input id="keyword" type="text" placeholder="请输入..."卜李>

<button id="search-bt">搜索</button>

</div>

<div class="content">

<!-- 用于显示ztree的html元素的class一定要设置为ztree-->

<ul id="tree-obj" class="ztree"></ul>

</div>

</div>12345678910

2. JS代码

下面只给出用于模糊搜索的核心代码

var hiddenNodes=[]//用于存储被隐藏的结点//过滤ztree显示数据function filter(){

//显示上次搜索后背隐藏的结点

zTreeObj.showNodes(hiddenNodes) //查找闹弊蔽不符合条件的叶子节点

function filterFunc(node){

var _keywords=$("#keyword").val() if(node.isParent||node.name.indexOf(_keywords)!=-1) return false return true

} //获取不符合条件的叶子结点

hiddenNodes=zTreeObj.getNodesByFilter(filterFunc) //隐藏不符合条件的叶子结点

zTreeObj.hideNodes(hiddenNodes)

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---