這里有兩款非常實用的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");
??????????? });
??????? }
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
