这里有两款非常实用的jquery tree控件：
（1）
------------------------------------------1.(根据一讲师总结)
---zTree：
jquery.ztree-2.6.min.js;下载包中有详细的api,实用文当和demo;方法非常的丰富，不用担心很麻烦。
----引入脚本;
<link href="../../Scripts/ZTree/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<link href="../../Scripts/ZTree/zTreeStyle/zTreeIcons.css" rel="stylesheet" />
<script src="../../Scripts/ZTree/jquery.ztree-2.6.min.js"></script>
----详细的案例就可以看明白：
<script type="text/javascript">
var ztree;
var treenodes;
var setting = {
showLine:true,
checkable: true,
checkStyle: "radio",
checkRadioType:"all",
isSimpleData: true, //简单数据类型，感觉最实用
treeNodeKey: "Id", //id
treeNodeParentKey: "PId", //父级id
nameCol: "Name", //名称
expandSpeed: "fast",
checkType: {"Y":"ps","N":"ps"}, //全选和对应的父节点一次选中效果；
callback: {
dblclick:guo //回调函数；
}
};
function guo(event,treeId,treeNode) {
//alert("hhah ");
alert(treeNode.PId);
alert(treeNode.Name);
}
$(function () {
$.getJSON("../ceshi/GetZTree", {}, function (data) {
ztree = $("#map").zTree(setting,data);
})
});
-------html:
<ul id="map" class="tree" style="width:500px; overflow:auto;">
</ul>
----------------------------------------------第二种：treeview.js；
---------动态加载案例：
function createMenuContent(data) {
var strHtml = '<ul class="filetree">';
for (var i = 0; i < data.length; i++) {
if (data[i].ChildPages.length > 0) {
strHtml += '<li><span class="folder">' + data[i].CurrentPage.PName + '</span>';
strHtml += createMenuContent1(data[i].ChildPages);
strHtml += '</li>'
}
else {
strHtml += '<a target="main" href="' + data[i].CurrentPage.Url + '" class="menuLink"><li><span class="file">' + data[i].CurrentPage.PName + '</span></li></a>';
}
}
strHtml += '</ul>';
return strHtml;
}
function createMenuContent1(data) {
var strHtml = '<ul>';
for (var i = 0; i < data.length; i++) {
if (data[i].ChildPages.length > 0) {
strHtml += '<li><span class="folder">' + data[i].CurrentPage.PName + '</span>';
strHtml += createMenuContent1(data[i].ChildPages);
strHtml += '</li>'
}
else {
strHtml += '<a target="main" href="' + data[i].CurrentPage.Url + '" class="menuLink"><li><span class="file">' + data[i].CurrentPage.PName + '</span></li></a>';
}
}
strHtml += '</ul>';
return strHtml;
}
------------------主要是通过class属性来标记；
------------------需要注意的是，当一个页面加载多个时，文件夹图标和加号会图标会和展开和并相反
所以就手动控制css样式了：
function Set() {
//treeview存在bug,页面出现多个时，节点图片与节点展示隐藏相反不对应
$.each($("#menuList").find("li[class='expandable']"), function () {
$(this).attr("class", "collapsable");
// $(this).first("div[class='hitarea expandable-hitarea']").attr("class", "hitarea collapsable-hitarea");
$(this).find("div[class='hitarea expandable-hitarea']").first().attr("class", "hitarea collapsable-hitarea");
});
$.each($("#menuList").find("li[class='expandable lastExpandable']"), function () {
$(this).attr("class", "collapsable lastCollapsable");
$(this).find("div[class='hitarea expandable-hitarea lastExpandable-hitarea']").first().attr("class", "hitarea collapsable-hitarea lastCollapsable-hitarea");
});
}