经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » React » 查看文章
Antd-React-TreeSelect前端搜索过滤
来源：cnblogs　　作者：Evisu47（常安欧阳）　　时间：2024/8/20 9:01:28　　对本文有异议

在开发过程中，但是antd中的搜索会把多余的也会带出来
就例如下图，我们本想去搜索1但是他会把其子节点都带出来，其实我们的本意是像搜2一样或者当中间隔层处理

但是我们该如何解决这样的问题呢如何做到下面两种情况
（1）搜索过滤掉不匹配的内容只留下匹配的内容
这是没有搜索之前

这是搜索之后，当我们去搜索5的时候我们就会直接把213过滤掉

（2）搜索中当子节点不是搜索内容但是孙节点和祖孙节点中存在要搜索的内容要把该子节点进行保留
这是没有搜索之前

这是搜索之后，我们要保留的结果

那么主要方法如下，antd-treeselect中的filterTreeNode属性,是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值

方法如下使用

  1. //toLowerCase（）的方法主要是为了使用不区分大小写使用
  2.  const filterTreeNode = (inputValue: string, treeNode: any) => {
  3.     return treeNode.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
  4.   }

接下来就是搜索功能的具体实现方法

  1.  // 此处操作主要用于前端处理搜索树时过滤掉搜索出的父节点下与搜索内容无关的其他子节点
  2.     if (searchValue) {
  3.       const fileData = [...oldfileTree]//主要用于记录tree节点使用的 oldfileTree就是树的节点功能
  4.       // 用户树搜索的功能
  5.       const searchResult = getSearchList([...fileData], searchValue)
  6.       // 将树的列表更具搜索的内容的所有父级节点和搜索到内容id的合集
  7.       let parentKeys
  8.       if (name === 'apiManage') {
  9.         parentKeys = contents
  10.           .map((item: any) => {
  11.             if (item.searchTitle.toLowerCase().indexOf(searchValue.toLowerCase()) > -1) {
  12.               return getParentName(item.id, contents)
  13.             }
  14.             return null
  15.           })
  16.           .filter((item: any, i: any, self: any) => item && self.indexOf(item) === i)
  17.       } else {
  18.         parentKeys = contents
  19.           .map((item: any) => {
  20.             if (item.searchTitle.toLowerCase().indexOf(searchValue.toLowerCase()) > -1) {
  21.               return getParentKey(item.id, contents)
  22.             }
  23.             return null
  24.           })
  25.           .filter((item: any, i: any, self: any) => item && self.indexOf(item) === i)
  26.       }
  27.       //所有需要的id扁平化处理
  28.       const parentIdsList: any = parentKeys
  29.         .flat(2)
  30.         .filter((item: any, i: any, self: any) => item && self.indexOf(item) === i)
  31.       // 获取需要展开的id集合由于过程中可能存在层级丢失，需要使用traverseParent向上寻找所有父级的id序列
  32.       const getExpendKeys = parentIdsList
  33.         .map((item: string) => {
  34.           return traverseParent(searchResult, item)
  35.         })
  36.         .flat(2)
  37.         .filter((item: any, i: any, self: any) => item && self.indexOf(item) === i)
  38.       //设置翻开节点
  39.       setTreeExpandedKeys(getExpendKeys)
  40.       // 将搜索的集合转换成列表形式
  41.       generateList(searchResult)
  42.       // 把集合做转换成Map结构
  43.       const listMap = dataList.reduce((map, item: any) => {
  44.         map.set(item.id, item)
  45.         return map
  46.       }, new Map())
  47.       //将所有展开的key与集合使用Map快速匹配对应值并将Map中存在的标记为true
  48.       getExpendKeys.map((item: string) => {
  49.         if (listMap.has(item)) {
  50.           listMap.set(item, { ...listMap.get(item), hasSearch: true })
  51.         }
  52.       })
  53.       // 将搜索的结果和Map进行匹配，如果匹配成功则将该节点换成Map中该节点的内容
  54.       const result = hasTree(searchResult, listMap)
  55.       // 将融合好的hasSearch tree（是否是搜索的节点）进行去除所有false的节点
  56.       const filterTree = removeFalseNodes(result)
  57.       // 形成所有搜索的结果
  58.       setFileTree([...filterTree] as treeDataNode[])
  59.     }

getSearchList 就是用于搜索高亮使用的，hasSearch搜索到的值为true，搜索不到的值则为false

  1.   const getSearchList = (data: treeDataNode[], searchValue: string) => {
  2.     const result: treeDataNode[] = data.map(item => {
  3.       const strTitle = item.searchTitle as string
  4.       const index = strTitle.toLowerCase().indexOf(searchValue.toLowerCase())
  5.       const beforeStr = strTitle.substring(0, index)
  6.       const afterStr = strTitle.slice(index + searchValue.length)
  7.       const regExp = new RegExp(searchValue, 'gi')
  8.       const matches = strTitle.match(regExp)
  9.       let value = ''
  10.       if (matches) {
  11.         strTitle.replace(regExp, (match: any) => {
  12.           value = match
  13.           return match
  14.         })
  15.       }
  17.       const alias =
  18.         index > -1 ? (
  19.           <span>
  20.             {beforeStr}
  21.             <span className='site-tree-search-value'>{value}</span> //site-tree-search-value设置css样式，设置你需要的高亮的颜色什么颜色都可以
  22.             {afterStr}
  23.           </span>
  24.         ) : (
  25.           <span>{strTitle}</span>
  26.         )
  28.       if (item.children) {
  29.         return {
  30.           ...item,
  31.           alias,
  32.           value: item.id,
  33.           hasSearch: index > -1 ? true : false, //将所有搜索结果是真的标记为true否则为false
  34.           children: getSearchList(item.children, searchValue)
  35.         }
  36.       }
  37.       return {
  38.         ...item,
  39.         value: item.id,
  40.         hasSearch: index > -1 ? true : false, //将所有搜索结果是真的标记为true否则为false
  41.         alias
  42.       }
  43.     })
  44.     return result
  45.   }

getParentKey 的目的是找到给定 key 所对应的节点的直接父节点，并返回该父节点的 id 和 parentId。
getParentKey 函数没有明确处理未找到父节点的情况，可能会返回意外的结果或 undefined或者空数组。因而要使用.flat(2).filter((item: any, i: any, self: any) => item && self.indexOf(item) === i)来过滤

  1.   const getParentKey = (key: React.Key, tree: any): React.Key => {
  2.     let parentKey: any
  3.     for (let i = 0; i < tree.length; i++) {
  4.       const node = tree[i]
  5.       if (node.children) {
  6.         if (node.children.some((item: any) => item.id === key)) {
  7.           parentKey = [node.id, node.parentId]
  8.         } else if (getParentKey(key, node.children)) {
  9.           parentKey = [getParentKey(key, node.children), node.parentId]
  10.         }
  11.       }
  12.     }
  13.     return parentKey
  14.   }

traverseParent 的目的是递归地查找给定 parentId 的所有祖先节点，并将它们的 id 收集到一个数组中。
traverseParent 在未找到指定 parentId 的情况下会返回一个空数组。因而要使用.flat(2).filter((item: any, i: any, self: any) => item && self.indexOf(item) === i)来过滤

  1.   const traverseParent = (treeData: treeDataNode[], parentId?: string) => {
  2.     let result: string[] = []
  3.     function traverse(nodes: treeDataNode[], parentId: string) {
  4.       for (let i = 0; i < nodes.length; i++) {
  5.         const node = nodes[i]
  6.         if (node.id === parentId) {
  7.           result = [...result, node.id]
  8.           if (node.parentId) {
  9.             traverse(treeData, node.parentId)
  10.           }
  11.           break
  12.         } else if (node.children) {
  13.           traverse(node.children, parentId)
  14.         }
  15.       }
  16.     }
  17.     if (parentId) traverse(treeData, parentId)
  19.     return result
  20.   }

generateList 的目的是用于扁平化树形数据结构并转换每个节点的格式

  1.  const dataList: { key: React.Key; title: string; name: string }[] = []
  2.   const generateList = (data: treeDataNode[]) => {
  3.     for (let i = 0; i < data.length; i++) {
  4.       const node = data[i]
  5.       dataList.push({ ...node, name: node.title })
  6.       if (node.children) {
  7.         generateList(node.children)
  8.       }
  9.     }
  10.   }

hasTree 就是将树重新构建，将树中存在的与Map结构中同样内容的值换成Map结构的信息

  1.   const hasTree = (tree: treeDataNode[], map: any) => {
  2.     return tree.map(node => {
  3.       if (map.has(node.id)) {
  4.         node = map.get(node.id)
  5.       }
  6.       // 如果节点有子节点，递归处理子节点
  7.       if (node.children && node.children.length > 0) {
  8.         node.children = hasTree(node.children, map)
  9.       }
  10.       return node
  11.     })
  12.   }

removeFalseNodes 是删除hasSearch 为false的置换成undefined在将其过滤掉最后剩下的就是搜索出的结果

  1. const removeFalseNodes = (data: treeDataNode[]) => {
  2.     return data
  3.       .map(item => {
  4.         // 递归处理children数组
  5.         item.children = item.children && item.children.filter(child => child.hasSearch)
  6.         if (item.children && item.children.length > 0) {
  7.           removeFalseNodes(item.children)
  8.         }
  9.         // 如果当前对象的hasSearch为false且children为空数组，则返回undefined以从结果中排除
  10.         return item.hasSearch || (item.children && item.children.length > 0) ? item : undefined
  11.       })
  12.       .filter(item => item !== undefined)
  13.   }

总之，在一些时候搜索为了迎合需要不得不这么操作，那么该操作结合了antd官方的搜索操作，在此之前需要保持清醒的头脑

首先我们搜索出来高亮这个操作antd TreeSelect的是可以实现，但是搜索中我们发现实现不了搜索过滤，但是又要解决这个问题，想尝试使用数组方法将不是的部分删除，只能解决节点是的情况，当出现差层，何为差层就是当子节点不是搜索内容但是孙节点和祖孙节点中存在要搜索的内容要把该子节点进行保留的时候发现数据保留不住，不知道该如何解决，翻阅了ES6后发现使用Map做一层数据存储，并结合搜索情况将所有搜索的父节点向上遍历将其hasSearch设置为true，这样在重新构建树的时候可以将所有需要的节点变成true，再最后将所有节点是false的节点进行删除，只保留hasSearch为true的节点。总之该操作中使用了数组的方法，以及ES6的Map结构，当做出来的时候感觉雨过天晴，但是个人觉得这些还是太冗余了，之后会更进方法，如果大家有什么更好的方法请多指教 (′?Д?)」

最后就是如果这种问题可以放在后端在搜索的时候进行请求来减少前端遍历和重组的过程减少渲染次数会更好

原文链接：https://www.cnblogs.com/Evisu47/p/18368117

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

React热门文章

  • React报错解决之ref返回undefined或null
  • 使用react-beautiful-dnd实现列表间拖拽踩坑
  • 理解 React 中的 useEffect、useMemo 与 useCallback
  • React antd tabs切换造成子组件重复刷新
  • vue3+ts中ref与reactive指定类型实现示例
  • 基于React.js实现简单的文字跑马灯效果
  • 深入解析React DnD拖拽原理，轻松掌握拖放技巧！
  • react实现全局组件确认弹窗
  • React使用高德地图的实现示例(react-amap)
  • react 高效高质量搭建后台系统 系列 —— 表格的封装

    • React推荐文章

  • Antd-React-TreeSelect前端搜索过滤
  • React组件封装：文字、表情评论框
  • Taro：高性能小程序的最佳实践
  • Netty源码学习4——服务端是处理新连接的&netty的reactor模式
  • 关于 React 性能优化和数栈产品中的实践
  • 【Vue3响应式入门#01】Reactivity
  • React跨路由组件动画
  • Vue vs React：你需要知道的一切
  • 为react项目添加开发/提交规范（前端工程化、eslint、prettier、husky、commitlint、stylelint）
  • react18 hooks自定义移动端Popup弹窗组件RcPop

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号