在寫Restful服務的時候,因爲都是返回去的都是一條條的json對象,這些都對象之間又是有關係的,但是卻沒有很好的體現出來,返回到頁面的時候,不能成爲一個樹。返回去的json串數據如下:
[{"belongsname":"","id":901,"isleaf":0,"name":"XJBHX-2標項目部","pid":"","type":""},{"belongsname":"","id":902,"isleaf":1,"name":"綜合部(辦公室)","pid":"901","type":""},{"belongsname":"","id":903,"isleaf":1,"name":"工程部(工技部/技術部)","pid":"901","type":""},{"belongsname":"","id":904,"isleaf":1,"name":"安質部","pid":"901","type":""},{"belongsname":"","id":905,"isleaf":1,"name":"計財部","pid":"901","type":""},{"belongsname":"","id":906,"isleaf":1,"name":"物設部(物機部)","pid":"901","type":""},{"belongsname":"","id":907,"isleaf":1,"name":"中心試驗室","pid":"901","type":""}]
而我們在前臺界面上需要的數據可能是這樣的:
[
{
"belongsname": "",
"id": 901,
"isleaf": 0,
"name": "XJBHX-2標項目部",
"pid": "",
"type": ""
"children":[ {
"belongsname": "",
"id": 902,
"isleaf": 1,
"name": "綜合部(辦公室)",
"pid": "901",
"type": ""
},
{
"belongsname": "",
"id": 903,
"isleaf": 1,
"name": "工程部(工技部/技術部)",
"pid": "901",
"type": ""
},
{
"belongsname": "",
"id": 904,
"isleaf": 1,
"name": "安質部",
"pid": "901",
"type": ""
},
{
"belongsname": "",
"id": 905,
"isleaf": 1,
"name": "計財部",
"pid": "901",
"type": ""
},
{
"belongsname": "",
"id": 906,
"isleaf": 1,
"name": "物設部(物機部)",
"pid": "901",
"type": ""
},
{
"belongsname": "",
"id": 907,
"isleaf": 1,
"name": "中心試驗室",
"pid": "901",
"type": ""
}]
]
怎麼轉換呢?看示例:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
//將json串轉換成樹形結構
function transData(a, idStr, pidStr, chindrenStr) {
var r = [], hash = {}, id = idStr, pid = pidStr, children = chindrenStr, i = 0, j = 0, len = a.length;
for (; i < len; i++) {
hash[a[i][id]] = a[i];
}
for (; j < len; j++) {
var aVal = a[j], hashVP = hash[aVal[pid]];
if (hashVP) {
!hashVP[children] && (hashVP[children] = []);
hashVP[children].push(aVal);
} else {
r.push(aVal);
}
}
return r;
}
//測試方法
function test() {
//json串
var jsonData = eval('[{"belongsname":"","id":901,"isleaf":0,"name":"XJBHX-2標項目部","pid":"","type":""},{"belongsname":"","id":902,"isleaf":1,"name":"綜合部(辦公室)","pid":"901","type":""},{"belongsname":"","id":903,"isleaf":1,"name":"工程部(工技部/技術部)","pid":"901","type":""},{"belongsname":"","id":904,"isleaf":1,"name":"安質部","pid":"901","type":""},{"belongsname":"","id":905,"isleaf":1,"name":"計財部","pid":"901","type":""},{"belongsname":"","id":906,"isleaf":1,"name":"物設部(物機部)","pid":"901","type":""},{"belongsname":"","id":907,"isleaf":1,"name":"中心試驗室","pid":"901","type":""}]');
//綁定的字段
var jsonDataTree = transData(jsonData, 'id', 'pid', 'chindren');
console.log(jsonDataTree);
}
//窗體加載執行的方法
window.onload = test;
</script>
</head>
</head>
<body>
</body>
</html>
剛開始做的時候,想複雜了,想着自己去遍歷然後手動拼寫json串,網絡永遠做着我們先做的事。