当前位置：首页 > news >正文

JS实现树形结构数据中特定节点及其子节点显示属性设置的技巧(可用于树形节点过滤筛选)

news 2025/7/20 6:59:36

大家好，今天我要分享的是如何在树形结构的数据中，根据特定条件设置节点及其所有子节点的显示属性。在实际项目中，这种需求非常常见，特别是在需要动态展示和隐藏节点的情况下。下面我将通过一个具体的示例来讲解实现过程。

需求分析

假设我们有一个树形结构的数据，如下所示：

 const treeData = [{name: "父节点1",id: 1,children: [{name: "子节点1-1", id: 11, children: [{name: "酸菜", id: 111, children: [{ name: "豆芽", id: 1111, }]}, { name: "豌豆", id: 12, }]},{ name: "子节点1-2", id: 13 }]},{name: "父节点2",id: 2,children: [{ name: "子节点2-1", id: 22, },{name: "子节点2-2",id: 23,children: [{ name: "子节点2-2-1", id: 24 }]}]}];

我们的需求是：当输入一个文本时，找到所有name属性包含该文本的节点，并将这些节点及其所有子节点和所有父节点的show属性设置为true。

实现步骤

初始化节点显示属性

在开始遍历之前，我们需要将所有节点的show属性初始化为false。这可以通过递归遍历实现。
递归遍历树形结构

我们编写一个递归函数traverse，用于遍历树形结构。当找到包含特定文本的节点时，我们需要将该节点及其所有子节点和所有父节点的show属性设置为true。
设置子节点显示属性

为了实现这一功能，我们添加了一个内部函数setChildrenTrue，该函数递归地将所有子节点的show属性设置为true。

代码实现

以下是实现上述需求的完整代码：

function setSearchText(text) {// 初始化所有节点的show属性为falsefunction setFalse(node) {node.show = false;if (node.children) {node.children.forEach(child => setFalse(child));}}// 递归遍历树形结构并设置节点及其子节点和父节点的show属性function traverse(node, parent) {if (node.name.includes(text)) {node.show = true;parents.forEach(parent => {parent.show = true;});function setChildrenTrue(child) {child.show = true;if (child.children) {child.children.forEach(grandChild => setChildrenTrue(grandChild));}}if (node.children) {node.children.forEach(child => setChildrenTrue(child));}} else if (node.children) {node.children.forEach(child => traverse(child,[...parents, node]));}}// 遍历树之前先设置所有节点的show属性为falsetreeData.forEach(node => setFalse(node));// 从根节点开始遍历treeData.forEach(node => {traverse(node, []);});
}// 示例：设置包含"酸菜"的节点及其所有子节点和父节点的show属性为true
setSearchText("酸菜");console.log(treeData);