解决ztree搜索中多级菜单展示不全问题

更新时间：2020-05-22 13:18:01 作者：startmvc

ztree官网的中的SearchNodes例子中，所有菜单都是连着的，如果出现某个菜单下无子节点，那

ztree 官网的中的 Search Nodes 例子中，所有菜单都是连着的，如果出现某个菜单下无子节点，那么在搜索时，此节点便不会自动展开，这里给出对应的增强版代码


var setting = {
 data: {
 key: {
 title: "t"
 },
 simpleData: {
 enable: true
 }
 },
 view: {
 fontCss: getFontCss
 }
 };
 var zNodes =[
 { id:1, pId:0, name:"系统参数",open:true},
 { id:11, pId:1, name:"通用参数"},
 { id:111, pId:11, name:"状态A"},
 { id:112, pId:11, name:"状态B"},
 { id:12, pId:1, name:"日志"},
 { id:121, pId:12, name:"操作类型"},
 { id:122, pId:12, name:"操作结果"},
 { id:1221, pId:122, name:"操作结果1"},
 { id:1222, pId:122, name:"操作结果2"},
 { id:12221, pId:1222, name:"操作结果21"},
 { id:12222, pId:1222, name:"操作结果22"},
 { id:12223, pId:1222, name:"操作结果23"},
 { id:2, pId:0, name:"业务参数",open:true},
 { id:21, pId:2, name:"工单类型"},
 { id:22, pId:2, name:"监控类型"},
 { id:23, pId:22, name:"监控子类型1"},
 { id:24, pId:22, name:"监控子类型2"},
 { id:25, pId:24, name:"监控子子类型1"},
 { id:26, pId:24, name:"监控子子类型2"},
 ];
 var lastValue = '', nodeList = [], fontCss = {};
 function searchNode(e) {
 var zTree = $.fn.zTree.getZTreeObj("treeDemo");
 var value = $.trim(key.val());
 lastValue = value;
 //zTree.expandAll(true);
 $('#treeDemo').html("");
 $.fn.zTree.init($("#treeDemo"), setting, zNodes);
 if (value != "") {
 nodeList = zTree.getNodesByParamFuzzy("name", value);
 } else {
 nodeList = zTree.getNodesByParamFuzzy("name", "|||||||||||||||");
 }
 updateNodes(true);
 }
 var parentNode = [];
 function updateNodes(highlight) {
 var zTree = $.fn.zTree.getZTreeObj("treeDemo");
 parentNode = [];
 for( var i=0, l=nodeList.length; i<l; i++) {
 nodeList[i].highlight = highlight;
 zTree.updateNode(nodeList[i]);
 if (!nodeList[i].isParent && !parentNode.contains(nodeList[i].getParentNode().pId)) {
 zTree.expandNode(nodeList[i].getParentNode(), true, true, true);
 parentNode.push(nodeList[i].getParentNode().pId);
 console.log(nodeList[i].getParentNode().pId);
 } else {
 zTree.expandNode(nodeList[i], true, true, true);
 }
 }
 console.log(parentNode);
 }
 Array.prototype.contains = function (obj) {
 var i = this.length;
 while (i--) {
 if (this[i] === obj) {
 return true;
 }
 }
 return false;
 }
 function getFontCss(treeId, treeNode) {
 return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
 }
 var key;
 $(document).ready(function(){
 $.fn.zTree.init($("#treeDemo"), setting, zNodes);
 key = $("#search_name");
 key.bind("blur", searchNode);
 });

效果图

这里写图片描述