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

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);
  });

效果图

以上所述是小编给大家介绍的ztree搜索中多级菜单展示不全的解决方法，希望对大家有所帮助