生成tree/menu结构
2012-05-14 23:27 飞魚 阅读(204) 评论(0) 编辑 收藏 举报<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<ul id="test">
</ul>
<script src="jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript">
var zNodes = [
{ id: 1, pId: 0, name: "父节点1 - 展开", open: true },
{ id: 11, pId: 1, name: "父节点11 - 折叠" },
{ id: 111, pId: 11, name: "叶子节点111" },
{ id: 112, pId: 11, name: "叶子节点112" },
{ id: 113, pId: 11, name: "叶子节点113" },
{ id: 114, pId: 11, name: "叶子节点114" },
{ id: 12, pId: 1, name: "父节点12 - 折叠" },
{ id: 121, pId: 12, name: "叶子节点121" },
{ id: 122, pId: 12, name: "叶子节点122" },
{ id: 123, pId: 12, name: "叶子节点123" },
{ id: 124, pId: 12, name: "叶子节点124" },
{ id: 13, pId: 1, name: "父节点13 - 没有子节点", isParent: true },
{ id: 2, pId: 0, name: "父节点2 - 折叠" },
{ id: 21, pId: 2, name: "父节点21 - 展开", open: true },
{ id: 211, pId: 21, name: "叶子节点211" },
{ id: 212, pId: 21, name: "叶子节点212" },
{ id: 213, pId: 21, name: "叶子节点213" },
{ id: 214, pId: 21, name: "叶子节点214" },
{ id: 22, pId: 2, name: "父节点22 - 折叠" },
{ id: 221, pId: 22, name: "叶子节点221" },
{ id: 222, pId: 22, name: "叶子节点222" },
{ id: 223, pId: 22, name: "叶子节点223" },
{ id: 224, pId: 22, name: "叶子节点224" },
{ id: 23, pId: 2, name: "父节点23 - 折叠" },
{ id: 231, pId: 23, name: "叶子节点231" },
{ id: 232, pId: 23, name: "叶子节点232" },
{ id: 233, pId: 23, name: "叶子节点233" },
{ id: 234, pId: 23, name: "叶子节点234" },
{ id: 3, pId: 0, name: "父节点3 - 没有子节点", isParent: true }
];
function log(a) {
console.log(a);
}
function transformTozTreeFormat(sNodes) {
var i, l,
key = "id",
parentKey = "pId",
childKey = "child";
if (!key || key == "" || !sNodes) return [];
var r = [];
var tmpMap = [];
for (i = 0, l = sNodes.length; i < l; i++) {
tmpMap[sNodes[i][key]] = sNodes[i];
}
for (i = 0, l = sNodes.length; i < l; i++) {
if (tmpMap[sNodes[i][parentKey]] && sNodes[i][key] != sNodes[i][parentKey]) {
if (!tmpMap[sNodes[i][parentKey]][childKey])
tmpMap[sNodes[i][parentKey]][childKey] = [];
tmpMap[sNodes[i][parentKey]][childKey].push(sNodes[i]);
} else {
r.push(sNodes[i]);
}
}
log(r);
return r;
}
function createHTML(ay, level) {
var html = [];
for (var i = 0, j = ay.length; i < j; i++) {
var chtml = [], isParent = false;
if (ay[i]["child"] && ay[i]["child"].length > 0) {
isParent = true;
chtml = arguments.callee(ay[i]["child"], level + 1);
}
html.push("<li>");
html.push(ay[i]["name"]);
if (isParent) {
html.push("<ul>" + chtml.join("") + "</ul>");
}
html.push("</li>");
}
return html;
}
var html = createHTML(transformTozTreeFormat(zNodes), 0).join("");
$("#test").append(html);
</script>
</body>
</html>
