当你在做一个Tree导航时,如果需要导航树搜索,一般思路都是后台进行过滤搜索后,重新生成Tree,这样即浪费了资源,也影响了效率。Ztree树控件,可以利用getNodesByFilter功能,很方便的通过js实现前端搜索,不需要再和后台交互。
下面实现是根据自己需求定制的,不同的场合,可能过滤会有所不同。
实现方式:
//用于存储被隐藏的结点
var hiddenNodes = [];
//过滤ztree显示数据
function ZtreeKeyfilter() {
var zTreeObj = $.fn.zTree.getZTreeObj("ZBTree_detail");
//显示上次搜索后背隐藏的结点
zTreeObj.showNodes(hiddenNodes);
//查找不符合条件的叶子节点
function filterFunc(node) {
//需要过滤的关键词
var _keywords = $("#keyword").val();
if (node.name.indexOf(_keywords) != -1)
return false;
if (node.isParent)
{
//是父节点时需要判断子节点是否符合条件,是的话则父节点需要保留
var bl = CheckChildNodesIsContainKeyword(node);
//console.log(bl);
return bl;
}
else {
//是子节点时,需要判断父节点是否符合条件,是的话则子节点需要保留
var bl2 = CheckParentNodesIsContainKeyword(node);
return bl2;
}
return true;
};
//获取不符合条件的叶子结点
hiddenNodes = zTreeObj.getNodesByFilter(filterFunc);
//隐藏不符合条件的叶子结点
zTreeObj.hideNodes(hiddenNodes);
};
//tree搜索时:是父节点时需要判断子节点是否符合条件,是的话则父节点需要保留
function CheckChildNodesIsContainKeyword(pNode)
{
var childs = pNode.children;
var isexit = true;
for(var i=0;i<childs.length;i++)
{
if (childs[i].isParent)
{
isexit = CheckChildNodesIsContainKeyword(childs[i]);
if (!isexit)
return isexit;
}
else {
var _keywords = $("#keyword").val();
if (childs[i].name.indexOf(_keywords) != -1)
return false;
}
}
return true;
}
//tree 搜索时:子节点时,需要判断父节点是否符合条件,是的话则子节点需要保留
function CheckParentNodesIsContainKeyword(cNode) {
var pnode = cNode.getParentNode();
if (pnode != null)
{
var _keywords = $("#keyword").val();
if (pnode.name.indexOf(_keywords) != -1)
return false;
else {
return CheckParentNodesIsContainKeyword(pnode)
}
}
return true;
}