jQuery zTree插件使用簡單教程

更新時間：2019年08月16日 11:40:22 作者：Shen_sy

這篇文章主要為大家詳細介紹了jQuery zTree插件使用的簡單教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

首先說一下，在web開發(fā)過程中會有很多的地方需要到樹形的插件，JQuery 就有樹的插件，本次簡單教程講的是zTree的使用教程。

官方下載地址

第一步，HTML

<ul id="deptTree" class="ztree"></ul>

第二步，zTree在init的時候都需要什么參數(shù)

zTree 初始化方法，創(chuàng)建 zTree 必須使用此方法

$.fn.zTree.init($("#deptTree"), setting, data);

init(obj, zSetting, zNodes);

var setting = {
 data: {
  simpleData: {
   enable: true,
   idKey: "deptId", //對應(yīng)參數(shù)中的主鍵id
   pIdKey: "parentId", //對應(yīng)參數(shù)中的父id
   rootPId: 0 //根節(jié)點的id
  },
  key: {
   url:"nourl"
  }
 }
};

數(shù)據(jù)是請求后臺的數(shù)據(jù)，這里展示下json數(shù)據(jù)。注意后臺返回的參數(shù)節(jié)點的名稱要使用name屬性，因為name屬性是默認的，無果需要改動那就需要去配置了。

[{
 "deptId": 1,
 "parentId": 0,
 "name": "XX科技",
 "parentName": null,
 "orderNum": 0,
 "delFlag": 0,
 "open": null,
 "list": null
}, {
 "deptId": 2,
 "parentId": 1,
 "name": "長沙分公司",
 "parentName": "XX科技",
 "orderNum": 1,
 "delFlag": 0,
 "open": null,
 "list": null
}, {
 "deptId": 3,
 "parentId": 1,
 "name": "上海分公司",
 "parentName": "XX科技",
 "orderNum": 2,
 "delFlag": 0,
 "open": null,
 "list": null
}, {
 "deptId": 4,
 "parentId": 3,
 "name": "技術(shù)部",
 "parentName": "上海分公司",
 "orderNum": 0,
 "delFlag": 0,
 "open": null,
 "list": null
}, {
 "deptId": 5,
 "parentId": 3,
 "name": "銷售部",
 "parentName": "上海分公司",
 "orderNum": 1,
 "delFlag": 0,
 "open": null,
 "list": null
}]

第三步，jquery渲染樹

$.ajax({
 type: "get",
 url: baseURL+"sys/dept/list",
 success:function(data){
 ztree = $.fn.zTree.init($("#deptTree"), setting, data);
 var node = ztree.getNodeByParam("deptId", );
});

這樣就完成了，看下效果。