ztree实现树形图，添加查询操作

根据输入框输入的keyword，查询节点。

let initDbData = [
    {
      "id: "8aaa862176e0e0ce0176e60f3fd1001d",
      "name": "22-1",
      "children": [
        {
          "id": "8aaa862176e0e0ce0176e612f0200023",
          "name": "22-1",
          "children": [
            {
              "id": "8aaa862176e0e0ce0176e668054f0028",
              "name": "22-1-2",
              "children": []
            }
          ]
        },
        {
          "id": "8aaa862176e0e0ce0176e61531d10025",
          "name": "22-2",
          "children": []
        }
      ]
    },
    {
      "id": "8aaa862176e0e0ce0176e60f9ecc001f",
      "name": "33",
      "children": []
    },
    {
      "id": "8aaa82b676d787d40176dacfc0630001",
      "name": "11",
      "children": [
        {
          "id": "8aaa862176e0e0ce0176e583bc71000f",
          "name": "11-1",
          "children": [
            {
              "id": "8aaa862176e0e0ce0176e58409950010",
              "name": "11-1-1",
              "children": [
                {
                  "id": "8aaa862176e0e0ce0176e58449c30011",
                  "name": "11-1-1-1",
                  "children": []
                },
                {
                  "id": "8aaa862176e0e0ce0176e58449c30011",
                  "name": "11-1-1-2",
                  "children": []
                }
              ]
            }
          ]
        },
        {
          "id": "8aaa862176e0e0ce0176e64daf170027",
          "name": "11-2",
          "children": []
        }
      ]
    }
  ]

查询方式：

1. 根据 keyword 先查找一级节点，如果一级节点包含 keyword，直接返回一级节点，一级节点下的数据全部保留。
2. 如果一级节点不包含，查找二级节点，如果二级节点包含 keyword ，返回二级节点，二级节点下的数据全部保留。
3. ...
4. 如果都不包含 keyword ，返回空数组。
5. 如果输入的keyword 为空，返回所有的数据initDbData。

二级节点查询

  function searchByKeyword1(keyword, arrData) {
      let searchedData = []
      if (keyword) {
        // 如果用户输入内容，执行查询操作
        searchedData = arrData.filter(item => {
          if (item.name && item.name.toLowerCase().includes(keyword.toLowerCase())) {
            return true;
          }else {
            if (item.children&&item.children.length> 0) {
               let children = item.children.filter(item1 => {
                  if(item1.name && item1.name.toLowerCase().includes(keyword.toLowerCase())) {
                      return true;
                  }else return false;
              });
              item.children = children;
            }
            let flag = item.children && item.children.length>0 ? true : false;
            return flag;
          }
        });
      }else {
        searchedData = arrData;
      }
      return searchedData
    }

三级节点查询

function searchByKeyword2(keyword, arrData) {
    let searchedData = []
    if (keyword) {  // 
      // 如果用户输入内容，执行查询操作
      searchedData = arrData.filter(item => {
        if (item.name && item.name.toLowerCase().includes(keyword.toLowerCase())) {
            console.log('item', item.name)
          return true;
        }else {
            if (item.children&&item.children.length> 0) { // [22-1, 22-2]
                let children = item.children.filter(item1 => { // 22-1 / 22-2
                    if(item1.name && item1.name.toLowerCase().includes(keyword.toLowerCase())){
                        return true;
                    }else{
                        if (item1.children  && item1.children.length > 0) {
                            let children = item1.children.filter(item2 => { // 22-1-2
                                if(item2.name && item2.name.toLowerCase().includes(keyword.toLowerCase())){
                                    return true;
                                }else return false
                            })
                            // 用查询到的三级节点组成的数组，作为二级节点的children（覆盖原来的三级节点）
                            item1.children = children
                        }
                        // 如果此时的二级节点，存在children属性，则返回当前的二级节点
                        let flag = item1.children && item1.children.length>0 ? true : false;
                        return flag;
                    }
                });
                // 用查询到的二级节点组成的数组，作为有一级节点的children（覆盖原来的二级节点）
                item.children = children;
            }
            // 如果此时的一级节点，存在children属性，返回当前的一级节点，
            // 如果此时一级节点下不存在二级节点，那么这个一级节点就不用返回了
            let flag = item.children && item.children.length>0 ? true : false;
            return flag;
        }
      });
    }else {
        // 如果 keyword 为空，返回初始的数组数据
        searchedData = arrData;
    }
    return searchedData
  }

递归实现

  function searchByKeyword(keyword, arrData) {
    let searchedData = []
    if (keyword) {
      // 如果用户输入内容，执行查询操作
      searchedData = arrData.filter(item => {
        if (item.name && item.name.toLowerCase().includes(keyword.toLowerCase())) {
            console.log('item', item.name)
          return true;
        }else {
            if(item.children && item.children.length > 0){
              let children = searchByKeyword(keyword, item.children)
              item.children = children
            }
            let flag = item.children && item.children.length>0 ? true : false;
            return flag;
        }
      });
    }else {
      searchedData = initDbData;
    }
    return searchedData
  }

测试

  console.log(searchByKeyword('22-1', initDbData));

• 此时，一级节点就包含 keyword ，所以返回一级节点为（22-1）下的所有数据。

console.log(searchByKeyword('11-1-1-1', initDbData));

• 返回11-1-1-1，所在的一支，不会返回 11-1-1-2。