框架: 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 == ""){
$("#classTree").tree("expandAll"); //展开所有
$("#searchResult").html("未输入查询条件");
}else{
$("#classTree").tree("collapseAll"); //折叠所有
searchTree(parentNode, search_content);
}
}
function searchTree(parentNode,searchCon){
var children;
var matchedNodeList = [];
for(var i=0;i<parentNode.length;i++){ //循环顶级 node
children = $("#classTree").tree("getChildren",parentNode[i].target);//获取顶级node下所有子节点
if(children){ //如果有子节点
for(var j = 0 ; j < children.length ; j++){ //循环所有子节点
if(children[j].text.indexOf(searchCon)>=0){ //判断节点text是否包含搜索文本
expandParent(children[j]);
matchedNodeList.push(children[j]);
}
}
}
if(parentNode[i].text.indexOf(searchCon)>=0){
expandParent(parentNode[i]);
matchedNodeList.push(parentNode[i]);
}
}
$("#searchResult").html("查询到"+matchedNodeList.length+"条结果");
for (var i=0; i<matchedNodeList.length; i++) {
showMatchedNode(matchedNodeList[i]);
}
if(matchedNodeList.length == 0){
$("#orgTree").tree("expandAll"); //展开所有
}
};
//展开匹配结果的父节点
function expandParent(node){
var parent = node;
var t = true;
do {
parent = $("#classTree").tree("getParent",parent.target); //获取此节点父节点
if(parent){ //如果存在
t=true;
$("#classTree").tree("expand",parent.target);
}else{
t=false;
}
}while (t);
};
//高亮显示匹配结果
function showMatchedNode(node) {
//展示所有父节点
$(node.target).show();
$(".tree-title", node.target).addClass("tree-node-searched");
}
本文到此结束