欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-30 15:22:46
ztree 官网的中的 search nodes 例子中,所有菜单都是连着的,如果出现某个菜单下无子节点,那么在搜索时,此节点便不会自动展开,这里给出对应的增强版代码...

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搜索中多级菜单展示不全问题

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