JQuery簡單寫個樹菜單，給大家簡單參考下，用的TreeView的CSS，其他手寫。這裡用的是假數據
效果圖
JS代碼部分：
var data = [
{ "id": "1", "pid": "0", "name": "頂級分類1" },
{ "id": "2", "pid": "0", "name": "頂級分類2" },
{ "id": "3", "pid": "0", "name": "頂級分類3" },
{ "id": "4", "pid": "1", "name": "分類1父1" },
{ "id": "5", "pid": "1", "name": "分類1父2" },
{ "id": "6", "pid": "2", "name": "分類2父1" },
{ "id": "7", "pid": "2", "name": "分類2父2" },
{ "id": "8", "pid": "3", "name": "分類3父1" },
{ "id": "9", "pid": "3", "name": "分類3父2" },
{ "id": "10", "pid": "4", "name": "分類1父1子1" },
{ "id": "11", "pid": "5", "name": "分類1父2子1" },
{ "id": "12", "pid": "6", "name": "分類2父1子1" },
{ "id": "13", "pid": "7", "name": "分類2父2子1" },
];
$(document).ready(function () {
init();
});
//初始化數據
function init() {
//這裡請求借口獲取頂級節點
//這裡用假數據
var tree = $("#browser");
var firstId = "";
for (var i = 0; i < data.length; i++) {
if (data[i].pid == "0") {
if (firstId == "") { firstId = data[i].id; }
tree.append("<li id='" + data[i].id + "' class='hasChildren expandable'>" +
"<span class='folder' onclick='choiceChildren(" + data[i].id + ")'>" +
data[i].name + "</span><ul></ul></li>");
}
}
//默認展開第一個節點
choiceChildren(firstId);
//默認展開第一個節點的子節點
choiceChildren(getChildren(firstId));
}
//展開節點
function choiceChildren(id) {
//這裡請求借口獲取頂級節點
//這裡用假數據
var childrenPanel = $("#" + id);
var attr = childrenPanel.attr("class");
if (attr != "hasChildren expandable") {
if (attr == "expandable") {
childrenPanel.each(function () {
$("#" + id + " ul").slideToggle();
});
childrenPanel.attr("class", "collapsable")
}
else {
childrenPanel.each(function () {
$("#" + id + " ul").slideToggle();
});
childrenPanel.attr("class", "expandable")
}
} else {
for (var i = 0; i < data.length; i++) {
if (data[i].pid == id) {
childrenPanel.append("<ul id = 'p" + id + "'><li id='" +
data[i].id + "' class='hasChildren expandable'>" +
"<span class='folder' onclick='choiceChildren(" + data[i].id + ")'>" +
data[i].name +
"</span></li></ul>");
}
}
//設置節點數據已經加載完成
childrenPanel.attr("class", "collapsable");
}
}
//獲取默認的第一個節點的子節點
function getChildren(id) {
//這裡要請求借口訪問獲取該下面的默認子節點
//這裡還是在data裡邊拿數據
for (var i = 0; i < data.length; i++) {
if (data[i].pid == id) {
return data[i].id;
}
}
return 0;
}
Html代碼部分：
<div id="main">
<p><h1>樹形顯示關系圖,並且默認顯示第一節，第一節子節點</h1></p>
<ul id="browser" class="treeview"></ul>
</div>
