easyui-tree的本地搜索功能

最新推荐文章于 2021-12-24 14:29:51 发布

原创

最新推荐文章于 2021-12-24 14:29:51 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#tree #easyui

本文介绍了如何在Jquery Easyui框架下实现Tree组件的本地搜索功能，无需服务器查询。搜索时，若子节点都不匹配，则节点收起；若有匹配子节点，则展开并高亮显示。

框架: Jquery. Easyui

实现一种不需要从服务器中进行查询,直接在前端对tree的折叠,展开,高亮的模糊搜索功能.子节点均不匹配,则收起. 有一个或以上的子节点匹配到,则展开

效果如下图

直接上代码

//高亮的样式
.tree-node-searched {
	background: #feed81;
	color: #404040;
}

<ul id="classTree" class="easyui-tree" style="margin-top:10px;"
				data-options="
				checkbox : false,
				onLoadSuccess : loadSuccess ,
				url:'${basePath }test/treeData'"></ul>

            //搜索
			function search(){
				var value = $("input[name=search]").val();
				var search_content = $.trim(value);
				var parentNode=$("#classTree").tree("getRoots"); //得到tree顶级node
				$(".tree-node-searched").removeClass("tree-node-searched");
				if(search_content == ""){