我也来实现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);
	}
}

2,设置字体高亮

// 设置高亮字体
function setHighlight(treeId, treeNode) {
          return (treeNode.highlight) ? {color:"green", "font-weight":"bold", "background-color": "#ddd"} : {color:"#000", "font-weight":"normal"};
   }

需要注意的是,setting中一定要设置fontCss为该方法:

var setting = {
	view: {
		fontCss: setHighlight // 高亮一定要设置,setHighlight是自定义方法
	}
};

3,延时执行搜索,如果文本框的键盘事件不使用延时执行,那么就会出现树乱跳的情况

// 有输入后定时执行一次,如果上次的输入还没有被执行,那么就取消上一次的执行
var timeoutId = null;
function searchNodeLazy(value) {
	if (timeoutId) {
		clearTimeout(timeoutId);
	}
	timeoutId = setTimeout(function(){
		searchNode(value);	
	}, 500);
}

好了,代码并不多,还是要思考一下如何实现的,这样就很容易了,多看看API…

——————- 我是割割割 ——————-

2016.08.28补充:

昨晚上写ztree节点展开的时候,说到“如果不展开根节点,下面的节点无法展开,不知道是不是bug”,但是如果需求就是加载ztree的时候就是折叠了所有节点的状态怎么办呢?今天早上又想到了这个问题,因为没有解决,觉得心里不舒服,于是想了想…

突然想到,我既然在折叠全部节点后,再展开根节点,那为什么不能在搜索的时候先展开根节点,再执行搜索的到的节点的展开呢???只是一个执行顺序的问题,不久解决问题了吗!!!所以有时候需要转变思路和思考问题的顺序就可以解决问题了,关键是能不能想到转变,或者是怎么转变…

“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);

	// 原来在这里的“展开根节点”的代码就移动到了下面“展开搜索到的节点的父节点”的上面了

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

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

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

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

那么再来看看new demo

本文《我也来实现ztree模糊搜索功能》来自 www.juwends.com ,欢迎转载或CV操作,但请注明出处,谢谢!