zoukankan      html  css  js  c++  java
  • 树形数据结构的搜索功能

    树形结构

    let tree = [{
            id: '01000000',
            text: '北京',
            children: [{
                id: '01001000',
                text: '北京市',
                children: [
                    {
                        id: '01001001',
                        text: '西城区',
                        children: null,
                    }, {
                        id: 12,
                        text: '东城区',
                        children: null,
                    },
                ],
            }],
        }, {
            id: '02000000',
            text: '上海',
            children: [{
                id: '02001000',
                text: '上海市',
                children: [{
                    id: '02001001',
                    text: '黄浦区',
                    children: null,
                }],
            }],
        }];

    前端搜索(条件查询到的数据添加属性view=true)

    function hasProp(string, prop) {
            return string.indexOf(prop) > -1;
        }
    
        console.log(hasProp('111', ''));
        let arr1 = [];
        filterTreeData(tree, '', arr1);
        console.log(arr1);
        for (let i = 0; i < arr1.length; i++) {
            changeTreeOpen(arr1[i], tree);
        }
        console.log(tree);
    
        function filterTreeData(data, val, arr1, indexArr = []) {
            data.map((item, index) => {
                let arr = [...indexArr, index];
                const children = item.children;
                item.view = false;
                item.isOpen = false;
                if (val && hasProp(item.text, val)) {
                    arr1.push(arr);
                }
                if (children) {
                    filterTreeData(children, val, arr1, arr);
                }
            });
        }
        // 列表树是否展开
        function changeTreeOpen(indexArr, data) {
            if (indexArr.length > 1) {
                const arr = indexArr.slice(1, indexArr.length);
                this.changeTreeOpen(arr, data[indexArr[0]].children);
                data[indexArr[0]].view = true;
            }
            data[indexArr[0]].isOpen = true;
        };

    前端搜索(将查询到的数据返回,多余的数据清除掉)

    //
        console.log(recursiveFn1(tree,'上'));
        function recursiveFn1(data, val) {
            let arr = []
            data.map(item => {
                if (item.children) {
                    let children = item.children
                    item.children = recursiveFn1(children, val)
                    if (hasProp(item.text, val) || (item.children && item.children.length > 0)) {
                        arr.push(item)
                    }
                } else {
                    if (hasProp(item.text, val)) {
                        arr.push(item)
                    }
                }
            })
            return arr
        }
  • 相关阅读:
    事物的五种传播机制与七种传播行为
    Spring jdbcTemplate
    SpriingMVC执行流程结构
    SpringMVC视图解析器
    promise的基本使用和理解
    集合set的类型转换
    数据结构小结一
    Dotween的一些常用方法记录
    线程与进程的解释
    反射和特性
  • 原文地址:https://www.cnblogs.com/jingguorui/p/14072197.html
Copyright © 2011-2022 走看看