树形结构数据，进行搜索功能，保留父级节点

蒙蒙的口香糖

已于 2024-01-10 17:58:10 修改

阅读量879

点赞数 11

分类专栏： js前台页面处理文章标签：前端 javascript linux

于 2024-01-10 17:53:46 首次发布

本文链接：https://blog.csdn.net/xiaoxiaoyang007/article/details/135509480

版权

js前台页面处理专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了在处理大量或复杂树形结构数据时，如何设计一个实用的过滤方法，通过map复制数据确保不修改原始数据，实现输入内容实时过滤并保持父节点数据。作者分享了基于input事件监听和节点匹配的具体实现细节。

摘要由CSDN通过智能技术生成

实际应用中，树形结构数据存在数据量大或者结构复杂时，会有搜索功能的需求。输入内容实时过滤数据并渲染，还需要保留树形结构，根据搜索内容保留父节点数据。一开始思路不开阔，想逐层遍历，保留各层级内容。但是细想这种方式不够实用，也不灵活，不具备复用功能，也不是一个成熟程序员该用的正确方式。因此开阔思路后，最终实现了需要的功能，并且实用。

1、整体一个过滤方法，接受两个参数，一个树数据，一个方法（该方法通过搜索输入的内容进行节点匹配）。

2、过滤方法中，需要先用map复制一下数据，避免修改到原始的树数据

具体实现如下：

（1）、// 监听input事件，输入和改变
		$('#searchMenu').on('input change', function(){
			// 判断是否是谷歌浏览器
			if(!inputFocus){
				let newMenus = treeFilter(menuList, filterNode);
				drawMenu(newMenus);
				inputFilter = true;
			}

		})
（2）、
// 过滤方法
function treeFilter (tree, func) {
		// 使用map复制一下节点，避免修改到原树
		return tree.map(node => ({ ...node })).filter(node => {
			node.childMenus = node.childMenus && treeFilter(node.childMenus, func)
			return func(node) || (node.childMenus && node.childMenus.length)
		})
	}
	/**
	 * 对树节点进行筛选
	 */
	function filterNode(node) {
		let text = $('#searchMenu').val();
		if (!text) return true;
		return node['text'].indexOf(text) !== -1;
	}