树形数据递归过滤

news/2024/7/19 15:43:35 标签: js, 树结构

这里写目录标题

  • 树形数据过滤
    • 寻找解决办法
  • 代码实现

树形数据过滤

说明: 遇到问题树形数据过滤, 并保留原有树形结构不变, 即如果有子集被选中,父级同样保留

寻找解决办法

思路: 
	1. 对数据进行处理, 根据过滤标识对匹配的数据添加标识 例如: visible: true
	2. 对有标识的子集的父级添加 visible 标识
	3. 数据根据visible 标识进行递归过滤得到过滤后的数据

代码实现

	// 根据传入的值进行数据匹配, 并返回匹配结果
	filterMethod(val, data, filterType) {
      return data[filterType].includes(val)
    },
    /*
	*	对表格数据进行处理
	*	data 为树形数据数组
	*	filter 为过滤参数即用户输入的值
	*	filterType 为用户通过什么字段与filter 匹配
	*/
	tableFilter(data, filter, filterType) {
      const traverse = (data) => {
        data.forEach(child => {
          child.visible = this.filterMethod(filter, child, filterType)
          if(child.children) traverse(child.children)
          if (!child.visible && child.children.length) {
            let visible = !child.children.some(child => child.visible);
            child.visible = visible === false;
          }
        })
      }
      traverse(data)
      return this.filterDataByVisible(data)
    },
    // 递归过滤符合条件的数据
    filterDataByVisible(data) {
      return data.filter(item => {
        if (item.children) {
          item.children = this.filterDataByVisible(item.children)
        }
        if (item.visible) {
          return true
        }
      })
    },

http://www.niftyadmin.cn/n/1483360.html

相关文章

C++数据结构——统计子串

统计子串 编写算法,统计子串t在主串s中出现的次数。 输入格式: 首先输入一个整数T,表示测试数据的组数,然后是T组测试数据。每组测试数据在第一行中输入主串s,在第二行中输入子串t,s和t中不包含空格。 输出格式: 对于每…

Java学习笔记#多态

多态:指的是同一个方法调用,由于对象不同,可能会有不同的行为。(现实生活中,同一个方法,具体的实现会不一样) 要点: 1.多态是方法的多态,不是属性的多态。(多…

用LinqToExcel处理有标题表格的数据

1. 先根据表格标题定义一个类。 public class News { public string Title { set; get; } public string Content { set; get; } public DateTime AddTime { get; set; } } 2. 引入Excel工作簿文件string filename "c:\new3.xls";ExcelQueryFactory excel new Exc…

C++数据结构——最长公共子串

一个序列中去掉若干&#xff08;也可以不去掉&#xff09;元素剩下的部分称为其子序列。对于给定的序列X <x1&#xff0c;x2&#xff0c;…&#xff0c;xm>&#xff0c;称序列Z <z1&#xff0c;z2&#xff0c;…&#xff0c;zk>为X的一个子序列&#xff0c;仅当在…

《超凡蜘蛛侠2》前瞻

2019独角兽企业重金招聘Python工程师标准>>> 《超凡蜘蛛侠2》预告截图&#xff0c;小蜘蛛再次进入拯救世界模式 由索尼哥伦比亚公司出品的明夏超级英雄续集大作《超凡蜘蛛侠2》今日发布首款预告30秒预览&#xff0c;完整版预告片即将于北京时间12月5日发布。从这款…

洛谷 - P2657 - windy数 - 数位dp

https://www.luogu.org/problemnew/show/P2657 不含前导零且相邻两个数字之差至少为2的正整数被称为windy数。 这道题是个显然到不能再显然的数位dp了。 来个最神奇的dp[i][j]表示i位数&#xff0c;开头为j的windy数的个数吧。 那么dp[i][j]的求法是很显然的&#xff0c;写个su…

IIS5.1/6.0 windows XP系统下php5.4安装

1、首先php从5.2中已经修改为FastCGI方式安装&#xff0c;所以安装最新版的php5.4需要先安装fastcgi&#xff0c;fastcgi的下载地址如下&#xff1a; http://www.iisboy.com/iis_down/552.html 下载后直接运行安装 2、下载php最新代码 下载地址&#xff1a;http://windows.php.…

C++数据结构——删除子串

删除子串 编写算法&#xff0c;从串s中删除所有和串t相同的子串。 输入格式: 测试数据有多组&#xff0c;处理到文件尾。每组测试数据在第一行中输入不超过80个字符的字符串s&#xff0c;在第二行中输入不超过80个字符的字符串t&#xff0c;s和t中允许包含空格。 输出格式: 对于…