简单实用的树形结构拼接方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html,
#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=egAs3pKxpHT6hAV8zu3KEqUsRQGNcy3m"></script>
<title>js拼接树形结构数组</title>
</head>
<body>
<script type="text/javascript">
var dataArray = [{
id: 1,
parentId: 0,
name: "动物",
rank: 1
},
{
id: 2,
parentId: 0,
name: "植物",
rank: 1
},
{
id: 3,
parentId: 0,
name: "微生物",
rank: 1
},
{
id: 4,
parentId: 1,
name: "哺乳动物",
rank: 1
},
{
id: 5,
parentId: 1,
name: "卵生动物",
rank: 1
},
{
id: 6,
parentId: 2,
name: "种子植物",
rank: 1
},
{
id: 7,
parentId: 2,
name: "蕨类植物",
rank: 1
},
{
id: 8,
parentId: 4,
name: "大象",
rank: 1
},
{
id: 9,
parentId: 4,
name: "海豚",
rank: 1
},
{
id: 10,
parentId: 4,
name: "猩猩",
rank: 1
},
{
id: 11,
parentId: 5,
name: "蟒蛇",
rank: 1
},
{
id: 12,
parentId: 5,
name: "麻雀",
rank: 1
},
];
var copyVal = deepCopy(dataArray);
var treeArray = assembleTree({
data: copyVal,
parent: "parentId",
id: "id",
child: "children"
});
// 深度拷贝
function deepCopy(data) {
return JSON.parse(JSON.stringify(data));
};
function assembleTree(params) {
var options = {
data: params.data,
parent: params.parent,
id: params.id,
child: params.child
};
let tree = options.data.filter(function (parent) {
let item = options.data.filter(function (child) {
return parent[options.id] == child[options.parent];
});
if (item.length > 0) {
parent[options.child] = item;
}
return parent[options.parent] == 0;
});
return tree;
}
console.log(treeArray);
</script>
</body>
</html>
执行结果如下：
