jQuery zTree樹插件的使用教程

2019-11-19 11:01:27

字體：大中小

來源：轉載

供稿：網友

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

一、介紹

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

官網地址

特點：

zTree v3.0 將核心代碼按照功能進行了分割，不需要的代碼可以不用加載
采用了延遲加載技術，上萬節點輕松加載，即使在 IE6 下也能基本做到秒殺
兼容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器
支持 JSON 數據
支持靜態和 Ajax 異步加載節點數據
支持任意更換皮膚 / 自定義圖標（依靠css）
支持極其靈活的 checkbox 或 radio 選擇功能
提供多種事件響應回調
靈活的編輯（增/刪/改/查）功能，可隨意拖拽節點，還可以多節點拖拽喲
在一個頁面內可同時生成多個 Tree 實例
簡單的參數配置實現靈活多變的功能

二、使用

（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 的參數配置，深入使用請參考 API 文檔（setting 配置詳解）    var setting = {};    // zTree 的數據屬性，深入使用請參考 API 文檔（zTreeNode 節點數據詳解）   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 的參數配置，深入使用請參考 API 文檔（setting 配置詳解）      var setting = {};      // zTree 的數據屬性，深入使用請參考 API 文檔（zTreeNode 節點數據詳解）      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);        //展開所以節點        //zTreeObj.expandAll(true);        //展開第一級數節點        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 的節點上是否顯示 checkbox / radio
默認值: false

（二）view

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

效果：