溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jQuery zTree插件使用簡(jiǎn)單教程

發(fā)布時(shí)間：2020-09-18 10:27:07 來源：腳本之家 閱讀：181 作者：Shen_sy 欄目：web開發(fā)

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

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

官方下載地址

第一步，HTML

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

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

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

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

init(obj, zSetting, zNodes);

jQuery zTree插件使用簡(jiǎn)單教程

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

數(shù)據(jù)是請(qǐng)求后臺(tái)的數(shù)據(jù)，這里展示下json數(shù)據(jù)。注意后臺(tái)返回的參數(shù)節(jié)點(diǎn)的名稱要使用name屬性，因?yàn)閚ame屬性是默認(rèn)的，無果需要改動(dòng)那就需要去配置了。

jQuery zTree插件使用簡(jiǎn)單教程

[{
 "deptId": 1,
 "parentId": 0,
 "name": "XX科技",
 "parentName": null,
 "orderNum": 0,
 "delFlag": 0,
 "open": null,
 "list": null
}, {
 "deptId": 2,
 "parentId": 1,
 "name": "長(zhǎng)沙分公司",
 "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", );
});

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

jQuery zTree插件使用簡(jiǎn)單教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手