树形节点的过滤处理

╰半橙微兮° 2023-01-14 01:39 141阅读 0赞

// nodes就是树形的最原始数据，query就是关键字，最后会返回满足条件的节点数组
    function filter(nodes, query) {
        // 条件就是节点的title过滤关键字
        let predicate = function (node) {
            if (node.title.indexOf(query) > -1) {
                return true;
            } else {
                return false;
            }
        };
        if (!(nodes && nodes.length)) {
            return [];
        }
        let newChildren = [];
        for (let node of nodes) {
            // 以下两个条件任何一个成立，当前节点都应该加入到新子节点集中
            // 1. 子孙节点中存在符合条件的，即 subs 数组中有值
            // 2. 自己本身符合条件
            // let subs = this.filter(node.children, query);
            // if (predicate(node)) {
            //   newChildren.push(node);
            // } else if (subs && subs.length) {
            //   node.children = subs;
            //   newChildren.push(node);
            // }
    
            // 以下只需要考虑自身的节点满足条件即可,不用带上父节点
            if (predicate(node)) {
                newChildren.push(node);
                node.children = this.filter(node.children, query);
            } else {
                newChildren.push(...this.filter(node.children, query));
            }
        }
        return newChildren.length ? newChildren : [];
    }

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

![初始状态的树形数据结构][365793db18b956901ef25832f2a718d4.png]

（初始状态的树形结构）

![过滤后不仅展示满足条件的节点，还展示其父节点][86a971a7204fec218e39022185f4e41a.png]

（过滤后不仅展示满足条件的节点，还展示其父节点）

![过滤后只展示满足条件的节点][0c88ebf8cb030bed8fddee3f8b644f9a.png]

（过滤后只展示满足条件的节点）

[48304ba5e6f9fe08f3fa1abda7d326ab.png]: /images/20221022/70d3e9fb5b9b4b4581c3ee41326b674e.png
[365793db18b956901ef25832f2a718d4.png]: /images/20221022/c39b8c2e76d74f21abee1798123b3a90.png
[86a971a7204fec218e39022185f4e41a.png]: /images/20221022/27177579adab4170b94904fd97cb59cd.png
[0c88ebf8cb030bed8fddee3f8b644f9a.png]: /images/20221022/3323917255154da8b94c54082a98cca2.png