1、效果圖
需求：首先這是一個數據集—js的類型，我們需要把生成一個tree形式的對象 :
var data = [
{ id: 1, name: "辦公管理", pid: 0 },
{ id: 2, name: "請假申請", pid: 1 },
{ id: 3, name: "出差申請", pid: 1 },
{ id: 4, name: "請假記錄", pid: 2 },
{ id: 5, name: "系統設置", pid: 0 },
{ id: 6, name: "權限管理", pid: 5 },
{ id: 7, name: "用戶角色", pid: 6 },
{ id: 8, name: "菜單設置", pid: 6 },
];
id,與pid之間的對應關系，當pid不存在，或pid:0的時候，這一項，應該為樹的頂端,那么我們需要去重新建一次索引，怎么建呢，，，以原數據集的id的值，重新生成一個數據如下:
var data = [
{id: 1, name: "辦公管理", pid: 0 ,
children:[
{ id: 2, name: "請假申請", pid: 1,
hildren:[
{ id: 4, name: "請假記錄", pid: 2 },
],
},
{ id: 3, name: "出差申請", pid: 1},
]
},
{id: 5, name: "系統設置", pid: 0 ,
children:[
{ id: 6, name: "權限管理", pid: 5,
hildren:[
{ id: 7, name: "用戶角色", pid: 6 },
{ id: 8, name: "菜單設置", pid: 6 },
]
},
]
},
];
js轉換為上面數據集，實現數樹級遞歸方法：
<script>
function toTree(data) {
// 刪除 所有 children,以防止多次調用
data.forEach(function (item) {
delete item.children;
});
// 將數據存儲為 以 id 為 KEY 的 map 索引數據列
var map = {};
data.forEach(function (item) {
map[item.id] = item;
});
// console.log(map);
var val = [];
data.forEach(function (item) {
// 以當前遍歷項，的pid,去map對象中找到索引的id
var parent = map[item.pid];
// 好繞啊，如果找到索引，那么說明此項不在頂級當中,那么需要把此項添加到，他對應的父級中
if (parent) {
(parent.children || ( parent.children = [] )).push(item);
} else {
//如果沒有在map中找到對應的索引ID,那么直接把 當前的item添加到 val結果集中，作為頂級
val.push(item);
}
});
return val;
}
console.log(toTree(data))
</script>
使用jquery，生成上述效果圖的完整實例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.8.3.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
var data = [
{ id: 1, name: "辦公管理", pid: 0 },
{ id: 2, name: "請假申請", pid: 1 },
{ id: 3, name: "出差申請", pid: 1 },
{ id: 4, name: "請假記錄", pid: 2 },
{ id: 5, name: "系統設置", pid: 0 },
{ id: 6, name: "權限管理", pid: 5 },
{ id: 7, name: "用戶角色", pid: 6 },
{ id: 8, name: "菜單設置", pid: 6 },
];
GetData(0, data);
$("body").append(menus);
});
//菜單列表html
var menus = '';
//根據菜單主鍵id生成菜單列表html
//id：菜單主鍵id
//arry：菜單數組信息
function GetData(id, arry) {
var childArry = GetParentArry(id, arry);
if (childArry.length > 0) {
menus += '<ul>';
for (var i in childArry) {
menus += '<li>' + childArry[i].name;
GetData(childArry[i].id, arry);
menus += '</li>';
}
menus += '</ul>';
}
}
//根據菜單主鍵id獲取下級菜單
//id：菜單主鍵id
//arry：菜單數組信息
function GetParentArry(id, arry) {
var newArry = new Array();
for (var i in arry) {
if (arry[i].pid == id)
newArry.push(arry[i]);
}
return newArry;
}
</script>
</body>
</html>