jQuery zTree樹插件的使用教程

2019-11-19 11:01:27

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

本文為大家分享了jQuery zTree樹插件的使用教程，供大家參考，具體內(nèi)容如下

一、介紹

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

官網(wǎng)地址

特點：

zTree v3.0 將核心代碼按照功能進(jìn)行了分割，不需要的代碼可以不用加載
采用了延遲加載技術(shù)，上萬節(jié)點輕松加載，即使在 IE6 下也能基本做到秒殺
兼容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器
支持 JSON 數(shù)據(jù)
支持靜態(tài) 和 Ajax 異步加載節(jié)點數(shù)據(jù)
支持任意更換皮膚 / 自定義圖標(biāo)（依靠css）
支持極其靈活的 checkbox 或 radio 選擇功能
提供多種事件響應(yīng)回調(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設(shè)置

<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）頁面效果

（5）項目截圖及html代碼

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）設(shè)置展開樹

$(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
設(shè)置 zTree 的節(jié)點上是否顯示 checkbox / radio
默認(rèn)值: false

（二）view

selectedMulti: false 設(shè)置是否允許同時選中多個節(jié)點。默認(rèn)是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" }        ];

效果：