zTree樹插件怎么在jQuery項目中使用

這篇文章將為大家詳細講解有關(guān)zTree樹插件怎么在jQuery項目中使用，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

崇仁ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

一、介紹

zTree 是一個依靠 jQuery 實現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點。

官網(wǎng)地址

特點：

  • zTree v3.0 將核心代碼按照功能進行了分割，不需要的代碼可以不用加載

  • 采用了 延遲加載 技術(shù)，上萬節(jié)點輕松加載，即使在 IE6 下也能基本做到秒殺

  • 兼容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器

  • 支持 JSON 數(shù)據(jù)

  • 支持靜態(tài) 和 Ajax 異步加載節(jié)點數(shù)據(jù)

  • 支持任意更換皮膚 / 自定義圖標（依靠css）

  • 支持極其靈活的 checkbox 或 radio 選擇功能

  • 提供多種事件響應回調(diào)

  • 靈活的編輯（增/刪/改/查）功能，可隨意拖拽節(jié)點，還可以多節(jié)點拖拽喲

  • 在一個頁面內(nèi)可同時生成多個 Tree 實例

  • 簡單的參數(shù)配置實現(xiàn) 靈活多變的功能

二、使用

（1）引入ztree組件

注意：需要添加jquery依賴

<link href="static/jquery-ztree/3.5.36/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="static/jquery/3.3.1/jquery-3.3.1.min.js"></script>
<script src="static/jquery-ztree/3.5.36/js/jquery.ztree.all.min.js" type="text/javascript"></script>

（2）向body中添加div

<div>
  <div id="treeDemo" class="ztree">
  </div>
</div>

（3）添加ztree設置

<SCRIPT LANGUAGE="JavaScript">
    var zTreeObj;
    // zTree 的參數(shù)配置，深入使用請參考 API 文檔（setting 配置詳解）
    var setting = {};
    // zTree 的數(shù)據(jù)屬性，深入使用請參考 API 文檔（zTreeNode 節(jié)點數(shù)據(jù)詳解）
   var zNodes = [{
       name: "test1",
       open: true,
       children: [
        { name: "test1_1" }, { name: "test1_2" }
         ]
       },
      {
        name: "test2",
        open: true,
        children: [
         { name: "test2_1" }, { name: "test2_2" }
        ]
      }
    ];
  $(document).ready(function() {
  zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
 zTreeObj.expandAll(true);//展開樹
</SCRIPT>

（4）頁面效果

zTree樹插件怎么在jQuery項目中使用

（5）項目截圖及html代碼

zTree樹插件怎么在jQuery項目中使用

html頁面

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>ztree測試頁面</title>
    <link href="static/jquery-ztree/3.5.36/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="static/jquery/3.3.1/jquery-3.3.1.min.js"></script>
    <script src="static/jquery-ztree/3.5.36/js/jquery.ztree.all.min.js" type="text/javascript"></script>
  </head>

  <body>
    <div>
      <div id="treeDemo" class="ztree">
      </div>
    </div>
    <SCRIPT LANGUAGE="JavaScript">
      var zTreeObj;
      // zTree 的參數(shù)配置，深入使用請參考 API 文檔（setting 配置詳解）
      var setting = {};
      // zTree 的數(shù)據(jù)屬性，深入使用請參考 API 文檔（zTreeNode 節(jié)點數(shù)據(jù)詳解）
      var zNodes = [{
          name: "test1",
          open: true,
          children: [
            { name: "test1_1" }, { name: "test1_2" }
          ]
        },
        {
          name: "test2",
          open: true,
          children: [
            { name: "test2_1" }, { name: "test2_2" }
          ]
        }
      ];
      $(document).ready(function() {
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
      });
    </SCRIPT>
  </body>

</html>

三、一些方法

（1）設置展開樹

$(document).ready(function() {
        zTreeObj = $.fn.zTree.init($("#ztree"), setting, zNodes);

        //展開所以節(jié)點
        //zTreeObj.expandAll(true);

        //展開第一級數(shù)節(jié)點
        var nodes = zTreeObj.getNodesByParam("level", 0);
        for(var i = 0; i < nodes.length; i++) {
          zTreeObj.expandNode(nodes[i], true, false, false);
        }
      });

四、setting 配置詳解

一些比較常用的配置

（一）check

1、enable: true  
設置 zTree 的節(jié)點上是否顯示 checkbox / radio
默認值: false

（二）view

 selectedMulti: false 設置是否允許同時選中多個節(jié)點。默認是true

（三）data

simpleData: { enable: true, idKey: 'id', pIdKey: 'pid', rootPId: '0' }

 var zNodes = [{ "id": 1, "pid": 0, "name": "test1" },
          { "id": 11, "pid": 1, "name": "test11" },
          { "id": 12, "pid": 1, "name": "test12" },
          { "id": 111, "pid": 11, "name": "test111" }
        ];

效果：

zTree樹插件怎么在jQuery項目中使用

關(guān)于zTree樹插件怎么在jQuery項目中使用就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

文章名稱：zTree樹插件怎么在jQuery項目中使用
鏈接分享：http://muchs.cn/article12/ihgcdc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、動態(tài)網(wǎng)站、網(wǎng)站制作、用戶體驗、品牌網(wǎng)站制作、外貿(mào)網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

綿陽服務器托管