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视图不改变

我也来实现ztree模糊搜索功能

之前看了一篇oschina上的关于ztree模糊搜索的文章,我很负责任的说,作者很不负责任,代码不COPY完就贴出来,反正看完似懂非懂,想了想,还是自己实现来得快,于是就自己实现咯…

先看demo,如果感觉效果还不错就继续看下面代码:

主要代码就3块:

1,搜索:

// 模糊搜索name满足条件的节点
function searchNode(value) {
	if (value == "") return;
	
	// 获取与value匹配的节点,使用的ztreeAPI getNodesByParamFuzzy
	var nodes = treeObj.getNodesByParamFuzzy("name", value);

	// 关闭所有节点的高亮
	// 使用API transformToArray获取所有的节点,getNodes()只能获得根节点,属性children也只能获取下一级节点
	var allNodes = treeObj.transformToArray(treeObj.getNodes());

	for (var i = 0; i < allNodes.length; i ++) {

		// 关闭高亮是利用节点属性highlight来控制fontCss实现的
		// 需要配合setting.view中设置的fontCss使用,后面代码会说
		allNodes[i].highlight = false;

		// 更新节点,因为hightlight改变了,使用updateNode可以更新节点
		treeObj.updateNode(allNodes[i]);
	}
	// 先关闭所有节点
	treeObj.expandAll(false);

	// 展开根节点(如果不展开根节点,下面的节点无法展开,不知道是不是bug)
	treeObj.expandNode(treeObj.getNodes()[0],true);

	// 高亮并展开搜索到的节点
	for (var i = 0; i < nodes.length; i ++) {

		nodes[i].highlight = true;
		treeObj.updateNode(nodes[i]); // 更新节点,让高亮生效

		// 展开搜索到的节点的父节点
		treeObj.expandNode(nodes[i].getParentNode(),true);
	}
}

继续阅读