JS 数组转树结构代码

最新推荐文章于 2024-07-19 13:54:51 发布

编程圈子

最新推荐文章于 2024-07-19 13:54:51 发布

阅读量4.9k

点赞数

分类专栏： # JS-HTML

本文链接：https://blog.csdn.net/xundh/article/details/77563075

版权

JS-HTML 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<html>
<head>
</head>
<body>
<script>
    /*
     *函数定义
     *入口参数data,平行数组
     *key，id字段
     *parentKey，父字段
     *map,需要将原始属性名称转换为什么名称
     */
    function treeUtil(data,key,parentKey,map) {
        this.data=data;
        this.key=key;
        this.parentKey=parentKey;
        this.treeParentKey=parentKey;   //parentKey要转换成什么属性名称
        this.treeKey=key;           //key要转换成什么属性名称
        this.map=map;
        if(map){
            if(map[key])this.treeKey=map[key];
        }
        this.toTree=function () {
            var data=this.data;
            var pos={};
            var tree=[];
            var i=0;
            while(data.length!=0){
                if(data[i][this.parentKey]==0){
                    var _temp = this.copy(data[i]);
                    tree.push(_temp);
                    pos[data[i][this.key]]=[tree.length-1]; 
                    data.splice(i,1);
                    i--;
                }else{
                    var posArr=pos[data[i][this.parentKey]];
                    if(posArr!=undefined){                      
                        var obj=tree[posArr[0]];
                        for(var j=1;j<posArr.length;j++){
                            obj=obj.children[posArr[j]];
                        }
                        var _temp=this.copy(data[i]);
                        obj.children.push(_temp);
                        pos[data[i][this.key]]=posArr.concat([obj.children.length-1]);
                        data.splice(i,1);
                        i--;
                    }
                }
                i++;
                if(i>data.length-1){
                    i=0;
                }
            }
            return tree;
        }
        this.copy=function (item) {
            var _temp={
                children:[]
            };
            _temp[this.treeKey]=item[this.key];
            for(var _index in item){
                if(_index!=this.key && _index!=this.parentKey){
                    var _property = item[_index];
                    if((!!this.map) && this.map[_index])
                        _temp[this.map[_index]]=_property;
                    else
                        _temp[_index]=_property;
                }
            }
            return _temp;
        }
    }
    //使用示例，data需要有key parentKey属性，其它属性内容没有限制。
    var data=[
        {id:1,parent:0,text:'A'},
        {id:2,parent:4,text:"B"},
        {id:3,parent:7,text:"C"},
        {id:4,parent:1,text:"D"},
        {id:5,parent:0,text:"E"},
        {id:6,parent:5,text:'B'},
        {id:7,parent:4,text:"F"}
    ];
    //简单使用
    var tree = new treeUtil(data,'id','parent');
    console.log(tree.toTree());
    //带属性名称转换
    data=[
        {id:1,parent:0,text:'A'},
        {id:2,parent:4,text:"B"},
        {id:3,parent:7,text:"C"},
        {id:4,parent:1,text:"D"},
        {id:5,parent:0,text:"E"},
        {id:6,parent:5,text:'B'},
        {id:7,parent:4,text:"F"}
    ];
    var map={"text":"title","id":"id0"};
    var tree1 = new treeUtil(data,'id','parent',map);
    console.log(tree1.toTree());
</script>
</body>
</html>