zTree 簡單使用
阿新 • • 發佈：2019-02-18
zTree簡單來說是一款處理樹形結構的前端控制元件，下面總結一下它的簡單使用。
1，下載相關檔案。
從官網上，或者下面地址
https://github.com/zTree/zTree_v3
頁面中主要會用到css和js兩個資料夾。
2，開啟demo》》cn資料夾，新建test.html，這個檔案的位置其實沒有關係，這裡只是為了引用css和js的方便，可以自行修改。
檔案內容：
主要注意：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <head> <link rel="stylesheet" href="../../css/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="../../js/jquery.ztree.core.js"></script> </head> <body> <p>wq </p> <ul id="tree" class="ztree"></ul> </body> <SCRIPT LANGUAGE="JavaScript"> var zTreeObj; // 使用陣列array的方式，必須有這個設定 var setting = { data: { simpleData: { enable: true, idKey: "id", pIdKey: "pId", rootPId: 0 } } }; //陣列array var nodes = [ {name: "父節點1", children: [ {name: "子節點1"}, {name: "子節點2"} ]}, {name: "父節點2", children: [ {name: "子節點21"}, {name: "子節點22"} ]} ]; // 標準格式 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"} ]; $(document).ready(function(){ zTreeObj = $.fn.zTree.init($("#tree"), setting, nodes); }); </SCRIPT> </HTML>
（1）頁面的宣告方式；
（2）head中對於css以及js的引用。
（3）body中用一個ul標籤來承載tree。
（4）js程式碼中用init函式初始化tree。這個初始化函式會將建立好的tree物件返回，這樣以後就可以對樹增刪改了。setting變數是tree的配置資訊，樹節點的資訊也是以json格式存放的，然後在init函式中傳入。值得一提的是樹節點的資訊可以以兩種方式給出，一種是標準的格式，如nodes變數，也可以是簡單格式的，如zNodes變數，顯然後者的維護量要更小，但是如果要使用簡單格式的方式，那就必須在setting中配置simpleData，上面也給出了。
這是一個入門級別的小例子，後續更加複雜的功能可以在這個基礎上新增，具體的配置需要參照官網的api。