tree树形数据处理扁平化树状树状扁平化处理树里的数据

web修理工

已于 2024-04-09 18:16:19 修改

阅读量455

点赞数

分类专栏： JavaScript 文章标签： javascript vue.js 开发语言

于 2022-07-21 19:23:12 首次发布

本文链接：https://blog.csdn.net/qq_42374676/article/details/125919258

版权

JavaScript 专栏收录该内容

163 篇文章 2 订阅

订阅专栏

vue3.0 公司流程图 https://sangtian152.github.io/vue3-tree-org/demo/
vue-tree-color


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 树的递归 :https://blog.csdn.net/qq_36647492/article/details/121386372
        let arr = [
            {
                parentId: 0,
                id: 235
            },
            {
                parentId: 235,
                id: 337
            },
            {
                parentId: 235,
                id: 329
            },
            {
                parentId: 235,
                id: 344
            },
            {
                parentId: 344,
                id: 615
            },
            {
                parentId: 344,
                id: 614
            },
            {
                parentId: 614,
                id: 615
            }
        ];

        function test(list) {    // 这是个启动方法，需要这个方法发动技能
            let result = [];    //    结果集
            arrayToTree(list, result, 0);    // 递归启动！！！
            return result;
        }

        /**
         * @param {*} data 源数组
         * @param {*} result 将结果添加到这个数组
         * @param {*} pid 父id
         */
        function arrayToTree(data, result, pid) {
            for (let item of data) {    // 每次调用此方法都重新遍历一遍源数组
                if (item.pid === pid) {    // 如果当前的pid等于传进来的父id，则
                    let newItem = { ...item, chilrden: [] };    // 将当前对象所有属性和新增属性chilrden合并成一个新对象
                    result.push(newItem);    // 将新对象添加的传进来的数组中
                    arrayToTree(data, newItem.chilrden, item.id);    // 这里注意，调用递归方法时，将新对象的chilrden作为结果数组传入，下一层的结果则会添加到这一层对象的chilrden中
                }
            }
        }



        // function arrayToTree(list) {
        //     let result = [];    // 结果集
        //     let map = {};

        //     for (let item of list) {    // 遍历一遍源数组
        //         map[item.id] = { ...item, chilrden: [] };    // 将源数组中每一个对象的id作为key，将当前对象所有属性和新增属性chilrden作为value。
        //     }

        //     console.log(map, '===map')

        //     for (let item of list) {
        //         if (item.parentId === 0) {    // 当pid为0时，添加到结果集
        //             let newItem = map[item.id];    // 注意！这里一定要将map[item.id] 赋值给新变量，这样newItem就和map[item.id]指向同一个内存地址了，达到数据共享
        //             result.push(newItem);
        //         } else {
        //             map[item.parentId].chilrden.push(map[item.id]);    // 将key为当前id的对象，添加到key等于pid的对象的chilrden中
        //         }
        //     }
        //     return result;
        // }

        function arrayToTree(list) {
            let result = [];
            let map = {};

            // for(let item of list) {    // 遍历一遍源数组
            //     map[item.id] = {...item, chilrden: []};    // 将源数组中每一个对象的id作为key，将当前对象所有属性和新增属性chilrden作为value。
            // }

            for (let item of list) {

                map[item.id] = { ...item, chilrden: [] };    // 将源数组中每一个对象的id作为key，将当前对象所有属性和新增属性chilrden作为value。

                if (item.parentId === 0) {    // 当pid为0时，添加到结果集
                    let newItem = map[item.id];    // 注意！这里一定要将map[item.id] 赋值给新变量，这样newItem就和map[item.id]指向同一个内存地址了，达到数据共享
                    result.push(newItem);
                } else {
                    map[item.parentId].chilrden.push(map[item.id]);    // 将key为当前id的对象，添加到key等于pid的对象的chilrden中
                }
            }
            return result;
        }


        console.log(arrayToTree(arr), '===parentId')




        let tree = [
            {
                parentId: 320,
                id: 235,
                children: [
                    {
                        parentId: 235,
                        id: 337
                    },
                    {
                        parentId: 235,
                        id: 329
                    },
                    {
                        parentId: 235,
                        id: 344,
                        children: [{
                            parentId: 344,
                            id: 615
                        },
                        {
                            parentId: 344,
                            id: 614
                        }]
                    },
                ]
            },
        ];

        // 树的扁平化
        function readNodes(nodes = [], arr = []) {
            for (let item of nodes) {
                arr.push({
                    parentId: item.parentId,
                    id: item.id
                })
                if (item.children && item.children.length) {
                    readNodes(item.children, arr)
                }
            }
            return arr
        }

        console.log(readNodes(tree), 'readNodes(tree)===')


        // 改变树里面的内容

        let tree1 = [
            {
                parentId: 320,
                id: 235,
                children: [
                    {
                        parentId: 235,
                        id: 337
                    },
                    {
                        parentId: 235,
                        id: 329
                    },
                    {
                        parentId: 235,
                        id: 344,
                        children: [{
                            parentId: 344,
                            id: 615
                        },
                        {
                            parentId: 344,
                            id: 614
                        }]
                    },
                ]
            },
        ];

        function selectChange(arr, result = []) {
            let organizationList = [614]
            let add = (arr, result) => {
                arr.forEach((item) => {
                    item.checked = false;
                    if (organizationList.includes(item.id)) {
                        item.checked = true;
                    }

                    if (item.children && Array.isArray(item.children)) {
                        add(item.children);
                    }
                });
            };
            add(arr, result);
            console.log(tree1, '===tree2')
        }

        selectChange(tree1)

        console.log(tree1, '===tree1')



    </script>

    <script>




    </script>
</body>

</html>