這里有兩款非常實用的jquery tree控件：

（1）

------------------------------------------1.(根據(jù)一講師總結(jié))

---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,????????? //簡單數(shù)據(jù)類型，感覺最實用

??????????? treeNodeKey: "Id",????????? //id

??????????? treeNodeParentKey: "PId",?? //父級id

??????????? nameCol: "Name",??????????? //名稱

??????????? expandSpeed: "fast",

??????????? checkType: {"Y":"ps","N":"ps"}, //全選和對應的父節(jié)點一次選中效果；

??????????? callback: {

??????????????? dblclick:guo //回調(diào)函數(shù)；

??????????? }

??????? };

??? ????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；

---------動態(tài)加載案例：

?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,頁面出現(xiàn)多個時，節(jié)點圖片與節(jié)點展示隱藏相反不對應

??????????? $.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");

??????????? });

??????? }

?

實用的兩款jquery樹形tree插件