实用的两款jquery树形tree插件

这里有两款非常实用的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");

});

}