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

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

需求分析

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

javascript 复制代码
 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

实现步骤

  1. 初始化节点显示属性

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

  2. 递归遍历树形结构

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

  3. 设置子节点显示属性

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

代码实现

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

javascript 复制代码
function setSearchText(text) {
    // 初始化所有节点的show属性为false
    function 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属性为false
    treeData.forEach(node => setFalse(node));

    // 从根节点开始遍历
    treeData.forEach(node => {
        traverse(node, []);
    });
}

// 示例:设置包含"酸菜"的节点及其所有子节点和父节点的show属性为true
setSearchText("酸菜");

console.log(treeData);

用于树形节点过滤筛选

通过以上代码,我们成功实现了在树形结构数据中根据特定条件设置节点及其所有子节点的显示属性,通过遍历treeData,生成对应的ul和li,并根据show属性隐藏或显示,就能通过input输入框实现树结构的节点过滤啦

相关推荐
echola_mendes11 分钟前
LangChain 结构化输出:用 Pydantic + PydanticOutputParser 驯服 LLM 的“自由发挥”
服务器·前端·数据库·ai·langchain
拉不动的猪15 分钟前
刷刷题46(常见的三种js继承类型及其优缺点)
前端·javascript·面试
关注我:程序猿之塞伯坦23 分钟前
JavaScript 性能优化实战:突破瓶颈,打造极致 Web 体验
开发语言·前端·javascript
兰德里的折磨55028 分钟前
对于后端已经实现逻辑了,而前端还没有设置显示的改造
前端·vue.js·elementui
hikktn42 分钟前
【开源宝藏】30天学会CSS - DAY9 第九课 牛顿摆动量守恒动画
前端·css·开源
悦涵仙子2 小时前
NG-ZORRO中tree组件的getCheckedNodeList怎么使用
javascript·ecmascript·angular.js
申朝先生2 小时前
面试的时候问到了HTML5的新特性有哪些
前端·信息可视化·html5
在下千玦2 小时前
#前端js发异步请求的几种方式
开发语言·前端·javascript
知否技术2 小时前
面试官最爱问的Vue3响应式原理:我给你讲明白了!
前端·vue.js
Angelyb3 小时前
前端Vue
开发语言·javascript·ecmascript