easyui-tree的本地搜索功能

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

框架: 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 == ""){
	
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值