zTree -- jQuery 樹插件使用方法與例子

時間 2019-11-09

標籤 ztree jquery 插件使用方法例子欄目 JQuery 简体版

原文原文鏈接

簡介

zTree 是一個依靠 jQuery 實現的多功能「樹插件」。php

網址：http://www.ztree.me/v3/main.p...css

上面的網址裏有ztree的詳細介紹、Demo 演示、API 文檔、入門指南以及下載。html

這裏再也不贅述。jquery

使用說明

一、下載ztree文件
將須要使用的 zTree v3.x 相關的 js、css、img 文件分別放置到相應目錄，而且保證相對路徑正確。
二、引入ztree文件
將下載的ztree文件保留須要用的相關的 js、css、img 文件整個複製到本身的項目相應的文件夾下，以下圖，我習慣將這類插件統一放在common/plugin/下，（其餘不須要用的文件能夠刪除。

三、html 頁面
分別在<head>和<body>中引入css、js文件，如代碼所示。chrome

按照如下代碼，製做 html 頁面，注意：segmentfault

zTree 的容器 className 別忘了設置爲 "ztree"！！！異步

示例代碼

html代碼：

<!DOCTYPE html>
    <html lang="en-us">

       <head>
          <meta charset="utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

          <title>ztreeDemo</title>
          <link rel="stylesheet" href="../../../common/plugin/ztree/zTreeStyle.css" type="text/css">
    
       </head>
       <body>   
          <div class="row">
             <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 pt10">
                 <div class="well sidebar-nav ">
                     <ul id="planTree" class="ztree"></ul>
             </div>
         </div>
         
         <!-- zTree  這裏使用的 all.js = core + excheck + exedit ( 不包括 exhide )-->
         <script src="../../../common/plugin/ztree/jquery.ztree.all.min.js"></script>
          <!--my zTree  這裏引入的是下面所示的js代碼文件 -->
         <script src ="../../../common/js-data/mytree.js"></script>
         </body>

    </html>

js代碼：

（這些代碼，我寫在了按習慣的相應頁面html同名的.js文件中，在<body>引入的ztree.all.min.js之下，將該文件引入頁面便可。）ide

$(function () {
        init();
      });

      function init() {
        builePlanTree();
      }

     //ZTREE
      function builePlanTree() {
         var setting = {
          view: {
            showIcon: true//設置 zTree 是否顯示節點的圖標。
            },
          data: {
            simpleData: {
              enable: true
             }
         },
         callback: {
          // beforeExpand: beforeExpand,
          // onExpand: onExpand,
          onClick: zTreeOnClick
       }
     }

     var zNodes =[
      { id:1, pId:0, name:"課程目錄", open:true},
      { id:11, pId:1, name:"季度產品知識課程", open:true},
      { id:111, pId:11, name:"13Q4產品知識", },
      { id:112, pId:11, name:"14Q1產品知識", },
      { id:113, pId:11, name:"14Q2產品知識", },
      { id:114, pId:11, name:"14Q3產品知識", },
      { id:115, pId:11, name:"14Q4產品知識", },
      { id:12, pId:1, name:"項目宣講類課程", open:true},
      { id:121, pId:12, name:"項目宣講類課程1"},
      { id:122, pId:12, name:"項目宣講類課程2"},
      { id:123, pId:12, name:"項目宣講類課程3"},
      { id:13, pId:1, name:"移動商學院", open:true},
      { id:131, pId:13, name:"技能類"},
      { id:132, pId:13, name:"心態類"},
      { id:132, pId:13, name:"知識類"}
    ];

       $.fn.zTree.init($("#planTree"), setting, zNodes);
       
          function zTreeOnClick(event, treeId, treeNode) {
          //這裏定義點擊書中節點時，相應的頁面其餘的操做，示例：
          // 每次點擊節點後， 彈出該節點的 tId、name 的信息
          alert(treeNode.tId + ", " + treeNode.name);
          };

      }

這樣頁面上的樹目錄就成了，效果以下圖所示：ui

總結

很明顯，這樣的樹只是一個靜態固定節點的樹，在大型項目中，每每須要不一樣的用戶看到不一樣的目錄，不一樣的地區顯示不一樣的目錄，等等，但你又不能一個一個定義這些配置來知足那麼多數據需求，因此就須要異步加載子節點的的父節點，經過構造treeNode的 JSON 數據對象方法來實現，這個方法會在本專欄 zTree -- jQuery 樹插件構造treeNode JSON 數據對象詳細介紹。spa