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
        }
  • 相关阅读:
    PlantsVsZombies_v2.0_1
    attackZombie如何实现符合需求的攻击函数_3
    attackZombie如何实现符合需求的攻击函数_2
    list_head.h
    attackZombie如何实现符合需求的攻击函数
    PlantsVsZombies_3
    串口服务器在激光切割机远程监控系统中的使用
    串口转以太网服务器在物联网中的行业应用
    物联网能源系统应用解决方案和作用什么?
    4G工业路由器在智能安防和监控中的应用
  • 原文地址:https://www.cnblogs.com/jingguorui/p/14072197.html
Copyright © 2011-2022 走看看