ztree

官网：https://www.treejs.cn/v3/demo.php#_201

 html部分： 

 <div class="left">
     <div class="left-search">
          <img src="./img/index_01.png" alt="" srcset="" />
          <input onkeyup="AutoMatch()" placeholder="请输入搜索关键字" type="text" id="search"/>
      </div>
        //必须加ztree类！！！！！！！！
      <div class="left-data ztree" id="treeDemo"></div>
 </div>

 js部分：

首先引入ztree的js和css文件！！！

必须配置！！！

//设置ztree第0节点和第一节点不显示图标
function showIconForTree(treeId, treeNode) {
  return treeNode.level != 1 && treeNode.level != 0;
}
// 设置ztree配置项
var settings = {
  data: {
    simpleData: {
      enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式
      idKey: "id",  //节点数据中保存唯一标识的属性名称
      pIdKey: "pId",    //节点数据中保存其父节点唯一标识的属性名称 
      rootPId: 0  //用于修正根节点父节点数据，即 pIdKey 指定的属性值
    },
  },
  check: {
    enable: true,  //true 、 false 分别表示 显示 、不显示 复选框或单选框
    chkStyle: "checkbox",
    nocheckInherit: true  //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true
  },
  view: {
    selectedMulti: false,
    showIcon: showIconForTree,  //设置是否显示节点图标 
    showLine: false,  //设置是否显示节点与节点之间的连线 
  },
  callback: {
    onCheck: zTreeOnCheck,   //配置的节点选中事件
  },
};

模糊搜索：

//根据文本框的关键词输入情况自动匹配树内节点 进行模糊查找
function AutoMatch() {
  // 1，获取所有节点数据
  var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
  var nodes = zTreeObj.getNodes();
  var nodeChildren = zTreeObj.transformToArray(nodes);

  // 2，当查询条件为空时，显示所有节点
  if ($('#search').val() == null || $('#search').val() === '') {
    nodeChildren.forEach(function (node) {
      zTreeObj.showNode(node);
    });
  };

  // 3，把所有节点隐藏
  nodeChildren.forEach(function (node) {
    // node.checked = false
    zTreeObj.hideNode(node);
  });

  // 4，利用ztree的getNodesByParamFuzzy模糊匹配上所有符合条件的节点
  var searchNodes = zTreeObj.getNodesByParamFuzzy('name', $('#search').val());
  searchNodes.forEach(function (node) {
    zTreeObj.showNode(node);

    // 4.1将查找到的节点父节点按路径设置为显示
    var parrentNodes = node.getPath();
    parrentNodes && parrentNodes.forEach(function (node) {
      zTreeObj.showNode(node);
    });

    // 4.2将查找到的节点的所有子节点设置为显示
    // var childrenNodes = zTreeObj.transformToArray(node);
    // childrenNodes && childrenNodes.forEach(function (node) {
    //   zTreeObj.showNode(node);
    // });
  });
}

单独操作某个节点：

var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
var node = zTreeObj.getNodeByParam("id", "2", null);
zTreeObj.checkNode(node, false, true );//加上此句代码，父子联动选中状态
node.checked = false;    //node节点取消选中
zTreeObj.updateNode(node);  //更新某个节点是否被选中