功能需求,实现树节点检索,多次检索时将上次结果折叠,只展开显示当前搜索内容节点
需要脚本:jquery.ztree.all-3.5.js,jquery.ztree.exhide-3.5.js(插件Demo下载地址:zTree_v3: jQuery 树插件 zTree v3 系列)
核心方法:
var hisNodeList = [];//历史搜索节点
//通过输入内容检索节点,names:输入内容,target为目标DOM
function searchNodesByName (target, names) {
var id = target.attr("id");
var eleTreeId = id + "_tree";
var zTreeObj = $.fn.zTree.getZTreeObj(eleTreeId);//通过DOM id获取ztree对象
//console.log('zTreeObj', zTreeObj);
var nodes = zTreeObj.getNodes();//获取所有树节点
//zTreeObj.expandAll(false);//折叠所有节点,但功能有BUG,未验证是否是数据过多导致
if (names == null || names === '') {//如果输入内容为空,则显示所有节点
console.log('输入内容为空')
zTreeObj.showNodes(nodes);//显示所有节点
} else {//如果输入内容不为空
//console.log('zTreeObj-', zTreeObj);
zTreeObj.hideNodes(nodes);//隐藏所有节点
var searchNodes = zTreeObj.getNodesByParamFuzzy('name', names);//通过检索内容检索节点,获取匹配的节点数组
if (hisNodeList.length > 0) {//当历史节点内容不为空时,循环折叠历史节点内容
hisNodeList.forEach(function (hisNode) {
zTreeObj.expandNode(hisNode, false, true);
});
}
hisNodeList = searchNodes;//将当前匹配的节点内容保存,在第二次搜索时折叠当前搜索到的节点内容
searchNodes.forEach(function (node) {
while (true) {//循环获取节点父级,并将其展开
//console.log('while------------node', node);
if (!node.parentTId) {//如果节点父级为空,说明是省级节点,展开当前节点并跳出循环
zTreeObj.expandNode(node, true, false);
break
}
var parentNode = zTreeObj.getNodeByTId(node.parentTId);//通过父级ID获取父节点
if (!parentNode.open) {//如果当前父级节点open属性为false,设置为true
parentNode.open = true;
}
//console.log('while------------parentNode', parentNode);
zTreeObj.expandNode(node, true, false);//展开当前节点
if (node.isHidden) {//如果当前节点isHidden属性为true,说明当前节点未显示,显示当前节点
zTreeObj.showNode(node);
}
node = parentNode;//将父节点赋值给当前节点继续循环
}
//通过当前节点获取当前节点下的子节点,并循环。通过父级遍历后当前节点一般为省级节点
var childrenNodes = zTreeObj.transformToArray(node);
childrenNodes && childrenNodes.forEach(function (node) {
if (node.isHidden) {//如果当前节点isHidden属性为true,说明当前节点未显示,显示当前节点
zTreeObj.showNode(node);
}
});
});
}
}
注意:如果hideNodes,showNodes,showNode方法报错,一般为未加载jquery.ztree.exhide-3.5.js脚本