源数据目录树生成

时间:2021-07-18 12:33:26

在做网站时经常会有需要从后台获取目录结构的情况,而后台经常发过来的数据都是父目录和子目录混在一起的,这就需要我们前端自己处理了。
源数据一般都会有数据主键字段、父类主键字段及其他数据字段组成。我们只要封装一个方法就可以随意取用。源码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script>
            var needjson = [
            {
                "id": 2,
                "parentid": 0,
                "name": "单据"
            },
            {
                "id": 401,
                "parentid": 0,
                "name": "库存"
            },
            {
                "id": 402,
                "parentid": 0,
                "name": "经营"
            },
            {
                "id": 1,
                "parentid": 0,
                "name": "信息"
            },
            {
                "id": 2002,
                "parentid": 1,
                "name": "往来单位"
            },
            {
                "id": 2009,
                "parentid": 2,
                "name": "付款单"
            },
            {
                "app_id": 5,
                "id": 2003,
                "parentid": 1,
                "name": "仓库信息"
            },
            {
                "id": 2010,
                "parentid": 2,
                "name": "收款单"
            },
            {
                "id": 2001,
                "parentid": 1,
                "name": "商品信息"
            },
            {
                "id": 2008,
                "parentid": 2,
                "name": "销售退货单"
            },
            {
                "id": 2005,
                "parentid": 1,
                "name": "职员信息"
            },
            {
                "id": 2007,
                "parentid": 2,
                "name": "销售出库单"
            },
            {
                "id": 2006,
                "parentid": 1,
                "name": "部门信息"
            },
            {
                "id": 3000,
                "parentid": 2006,
                "name": "部门三级"
            },
            {
                "id": 3001,
                "parentid": 2006,
                "name": "部门三级二"
            },
            {
                "app_id": 5,
                "id": 3002,
                "parentid": 2006,
                "name": "部门三级三"
            },
            {
                "id": 2004,
                "parentid": 1,
                "name": "地区信息"
            }];
            function getTreeData(data,idField, parentidField, result) {
                //data:源数据   idField:数据主键在源数据中的字段名   parentidField:父目录主键在源数据中的字段名    result:结果数组中子目录的key名
                // 删除 所有 children,以防止多次调用
                for (var i=0;i<data.length;i++) {
                    delete data[i][result];
                }
                // 将数据处理成 idField 为 KEY 的 json数据
                var jstemp = {};
                for (var j=0;j<data.length;j++) {
                    jstemp[data[j][idField]] = data[j];
                }
                var val = [];
                for(var k=0;k<data.length;k++){
                    var parent = jstemp[data[k][parentidField]];
                    if (parent) {
                        (parent[result] || ( parent[result] = [] )).push(data[k]);
                    }else{
                        val.push(data[k]);
                    }
                }
                return val;
            }
            console.log(getTreeData(needjson,"id","parentid",'child'))
        </script>
    </body>
</html>

ok,完美解决!