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

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

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

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

首先說(shuō)一下，在web開(kāi)發(fā)過(guò)程中會(huì)有很多的地方需要到樹(shù)形的插件，JQuery 就有樹(shù)的插件，本次簡(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);

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)的名稱(chēng)要使用name屬性，因?yàn)閚ame屬性是默認(rèn)的，無(wú)果需要改動(dòng)那就需要去配置了。

[{
 "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": "銷(xiāo)售部",
 "parentName": "上海分公司",
 "orderNum": 1,
 "delFlag": 0,
 "open": null,
 "list": null
}]

第三步，jquery渲染樹(shù)

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

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

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

您可能感興趣的文章:

相關(guān)文章

修改好的jquery滾動(dòng)字幕效果實(shí)現(xiàn)代碼
修改好的jquery滾動(dòng)字幕效果，需要的朋友可以參考下。
2011-06-06
前端必備神器 Snap.svg 彈動(dòng)效果
SVG(可縮放矢量圖形)是基于可擴(kuò)展標(biāo)記語(yǔ)言（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的子集），用于描述二維矢量圖形的一種圖形格式。它由萬(wàn)維網(wǎng)聯(lián)盟制定，是一個(gè)開(kāi)放標(biāo)準(zhǔn)。
2014-11-11
jQuery實(shí)現(xiàn)的分頁(yè)功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的分頁(yè)功能,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery實(shí)現(xiàn)分頁(yè)功能的具體步驟及相關(guān)操作技巧,包括前臺(tái)樣式、布局及jQuery分頁(yè)插件的調(diào)用方法,需要的朋友可以參考下
2017-01-01
jQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框?qū)崙?zhàn)（5）
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
BootStrap table表格插件自適應(yīng)固定表頭(超好用)
這篇文章主要介紹了BootStrap table表格插件自適應(yīng)固定表頭(超好用)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
jquery插件bootstrapValidator表單驗(yàn)證詳解
這篇文章主要為大家詳細(xì)介紹了jquery插件bootstrapValidator表單驗(yàn)證，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
jquery?validation驗(yàn)證電話(huà)號(hào)碼,email(實(shí)例代碼)
jquery?validation驗(yàn)證電話(huà)號(hào)碼,email(實(shí)例代碼),需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
2013-11-11
jQuery實(shí)現(xiàn)購(gòu)物車(chē)的總價(jià)計(jì)算和總價(jià)傳值功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)購(gòu)物車(chē)的總價(jià)計(jì)算和總價(jià)傳值功能 ,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-11-11
Jquery組件easyUi實(shí)現(xiàn)手風(fēng)琴(折疊面板)示例
這篇文章主要為大家詳細(xì)介紹了Jquery組件easyUi實(shí)現(xiàn)手風(fēng)琴示例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08
jquery實(shí)現(xiàn)Ajax請(qǐng)求的幾種常見(jiàn)方式總結(jié)
這篇文章主要介紹了jquery實(shí)現(xiàn)Ajax請(qǐng)求的幾種常見(jiàn)方式,結(jié)合實(shí)例形式總結(jié)分析了jQuery實(shí)現(xiàn)ajax請(qǐng)求常用的load()、post()、get()及Ajax()方法相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05