亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

實用的兩款jquery樹形tree插件

系統 2391 0

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

(1)

實用的兩款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>

? 實用的兩款jquery樹形tree插件_第2張圖片

----------------------------------------------第二種: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");

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

??????? }

?

實用的兩款jquery樹形tree插件


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

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

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 国产毛片久久久久久国产毛片 | 999热成人精品国产免 | 波多野结衣视频一区 | 日韩视频在线观看一区二区 | 精品一区视频 | 中文字幕专区在线亚洲 | 国内精品久久久久久久久久久久 | 亚洲精品久久久午夜伊人 | a免费网站 | 久久精品国产曰本波多野结衣 | 看日本黄色录像 | 99久久精品国产综合一区 | 狠狠色丁香婷婷久久 | 黄 色 免 费 网站在线观看 | 特黄特级a级黄毛片免费观看多人 | 国产日韩欧美亚洲综合在线 | 麻豆国产精品免费视频 | 99热久久这里只有精品99 | 国产日韩欧美综合一区 | 午夜香蕉 | 欧美精品国产 | 狠狠艹 | 天天天天操 | 亚洲 欧美 日韩 综合 | 欧美一级一极性活片免费观看 | 日日撸夜夜干 | 亚洲成人福利 | 免费国产a| 亚洲一区二区欧美日韩 | 久久成人毛片 | 爱爱免费 | 日本人一级毛片免费视频 | 亚洲一区二区三区不卡在线播放 | 国产成人夜间影院在线观看 | www.精东| 久久久精品麻豆 | 亚洲中字幕 | 伊人精品成人久久综合欧美 | 午夜a一级毛片一.成 | 91久久精品国产一区二区 | 天天射天天干天天色 |