框架: 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 == ""){