zoukankan      html  css  js  c++  java
  • 树形节点的过滤处理

    // 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 : [];
    }

    初始状态的树形数据结构

    (初始状态的树形结构)

     

     

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

     (过滤后不仅展示满足条件的节点,还展示其父节点)

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

     (过滤后只展示满足条件的节点)

     

  • 相关阅读:
    Spring配置数据源和注解开发
    spring 的配置介绍
    spring
    maven
    mybatis初始
    idea中配置xml不自动提示解决方案(eclipse配置XmlCatalog)
    JSON、AJAX
    ThreadLocal的使用
    Filter过滤器
    谷歌 kaptcha 图片验证码的使用
  • 原文地址:https://www.cnblogs.com/grow-up-up/p/13215122.html
Copyright © 2011-2022 走看看