ztree搜索树

业务场景：加载树型数据，能够模糊搜索树的节点

待优化点：搜索出来的父节点无法展开

 

效果图：

​HTML页：

  <div class="col-md-3 sidebar">
    <div class="row">
      <div style="position: relative;">
        <input id="key" type="text" style="padding-right: 50px;" class="empty form-control"
               readonly="readonly" placeholder="请选择">
        <input id="keyValue" type="hidden"
               autocomplete="off">
        <div style="position: absolute; right: 10px; top: 10px;">
          <a id="clickDown" class="glyphicon glyphicon-menu-down" onclick="showTree()"></a>
        </div>
      </div>
    </div>
    <div id="treeComponent" class="dropdown-menu open"
         style="display: none;max-height: 200px; overflow: hidden; min-height: 134px; min-width: 150px;">
      <div class="bs-searchbox">
        <input id="inputSearch" class="form-control" aria-label="Search" oninput="inputChange()"
               autocomplete="off">
      </div>
      <div class="inner open" aria-expanded="false" tabindex="-1"
           style="max-height: 150px; overflow-y: auto; min-height: 92px;">
        <ul id="tree" class="ztree"></ul>
      </div>
    </div>
  </div>

​

js：

let setting = {
  view: {
    dblClickExpand: false,
    nameIsHTML: true, //允许name支持html,
    showLine: false,
    showIcon: false
  },
  callback: {
    onClick: zTreeOnClick,
  }
};

let zNodes = [
  {
    "name": "北京", "value": '1', children: [
      {"name": "东城区", "value": '2'},
      {"name": "朝阳区", "value": '3'}
    ]
  },//open:true表示默认展开
  {
    "name": "重庆", "value": '4', children: [
      {
        "name": "巴南区", "value": '5', children: [
          {"name": "南泉", "value": '6'},
          {"name": "界石", "value": '7'}
        ]
      },
      {"name": "渝中区", "value": '8'}
    ]
  }
];

//获取路径名字
function getFilePath(treeObj) {
  if (treeObj == null) return "";
  let filename = '';
  if (treeObj.oldname != null && treeObj.oldname != undefined && treeObj.oldname != '') {
    filename = treeObj.oldname;
  } else {
    filename = treeObj.name;
  }
  let pNode = treeObj.getParentNode();
  if (pNode != null) {
    filename = getFilePath(pNode) + ">" + filename;
  }
  return filename;
}
//获取路径上的value、
function getFileValue(treeObj) {
  if (treeObj == null) return "";
  let fileValue = treeObj.value;
  let pNode = treeObj.getParentNode();
  if (pNode != null) {
    fileValue = getFileValue(pNode) + "," + fileValue;
  }
  return fileValue;
}

//树的显隐
function showTree() {
    if ($('#treeComponent').css('display') === 'none') {
        $('#treeComponent').css({'width': $($('#key').parent('div')[0]).width()}).show();
    } else {
        $('#treeComponent').hide();
    }
}

//节点点击事件
function zTreeOnClick(event, treeId, treeNode) {
  let zTree = $.fn.zTree.getZTreeObj("tree");
  zTree.expandNode(treeNode);
  if (!treeNode.isParent) {
    $('#key').val(getFilePath(treeNode))
    $('#keyValue').val(getFileValue(treeNode))
    $.fn.zTree.init($("#tree"), setting, zNodes);
    $("#treeComponent").css({display: "none"});
  }
}
//输入框改变事件
function inputChange() {
  $("#treeComponent").css({display: "block"});
}

//阻止事件向上传递
function stopFunc(e) {
  e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
}

//初始化
$(document).ready(function () {
  $.fn.zTree.init($("#tree"), setting, zNodes);
  fuzzySearch('tree', '#inputSearch', null, true); //初始化模糊搜索方法
  document.onclick = function () {
    $('#treeComponent').css({display: "none"});
  }
  $('#clickDown').click(function (e) {
    stopFunc(e);
    $('#treeComponent').css({display: "block"});
  }, false)
  $('#treeComponent').click(function (e) {
    stopFunc(e);
  }, false)
});

参考：

ztree官网文档：http://www.treejs.cn/v3/main.php#_zTreeInfo。

点击div区域外隐藏div：https://www.cnblogs.com/sghy/p/10044313.html