需求:
在查询框中输入关键字,按回车键,查询树中所有相关的节点,展开查到结果的文件夹,并将结果高亮显示。效果如下图:
实现:
<div class="easyui-tabs" data-options="fit:true">
<div title="脚本管理">
<div class="zTreeDemoBackground left">
。。。
</div>
</div>
<div title="元数据" class="metaDbInfoTree" >
<input class="easyui-searchbox" data-options="searcher:searchDept,prompt:'请输入表名称'"
id="searchText" onchange="resetTreeNode()" style="width: 186px; height: 32px;"></input>
<ul id="metaDbInfo" class="easyui-tree"> </ul>
</div>
<div title="任务列表">
。。。
</div>
<div title="脚本缓存">
。。。
</div>
</div>
function searchDept(){
var parentNode
=$('#metaDbInfo').tree('getRoots');
var searchCon
= $("#searchText").val();
var children
;
for(var i
=0;i
<parentNode
.length
;i
++){
children
= $('#metaDbInfo').tree('getChildren',parentNode
[i
].target
);
if(children
){
for(var k
=0;k
<children
.length
;k
++){
var subchildren
= $('#metaDbInfo').tree('getChildren',children
[k
].target
);
for(var j
=0;j
<subchildren
.length
;j
++) {
if (subchildren
[j
].text
.indexOf(searchCon
) >= 0) {
if (subchildren
[j
]){
$('#metaDbInfo').tree('update', {
target
: subchildren
[j
].target
,
text
: "<span style='color:red;'>"+ subchildren
[j
].text
+"</span>"
});
}
expandParent(subchildren
[j
]);
}else{
subchildren
[j
].text
= subchildren
[j
].text
.replace('red','black');
$('#metaDbInfo').tree('update', {
target
: subchildren
[j
].target
,
text
:subchildren
[j
].text
});
}
}
}
}else{
if(parentNode
[i
].text
.indexOf(searchCon
)>=0){
if (parentNode
[i
]){
$('#metaDbInfo').tree('update', {
target
: parentNode
[i
].target
,
text
: "<span style='color:red;'>"+ parentNode
[i
].text
+"</span>"
});
}
expandParent(parentNode
[i
]);
}
}
}
}
function selectNode(node
){
$('#metaDbInfo').tree('select',node
.target
);
};
function expandParent(node
){
var parent
= node
;
var t
= true;
do {
parent
= $('#metaDbInfo').tree('getParent',parent
.target
);
if(parent
){
t
=true;
$('#metaDbInfo').tree('expand',parent
.target
);
}else{
t
=false;
}
}while (t
);
};
转载请注明原文地址: https://lol.8miu.com/read-28368.html