您的位置：首页 > Web前端 > JavaScript

JS 数组转树结构代码

2017-08-25 10:26 106 查看

<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>

结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航