亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery zTree插件使用簡單教程

 更新時(shí)間：2019年08月16日 11:40:22   作者：Shen_sy  
這篇文章主要為大家詳細(xì)介紹了jQuery zTree插件使用的簡單教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

首先說一下，在web開發(fā)過程中會(huì)有很多的地方需要到樹形的插件，JQuery 就有樹的插件，本次簡單教程講的是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", //對應(yīng)參數(shù)中的主鍵id
   pIdKey: "parentId", //對應(yīng)參數(shù)中的父id
   rootPId: 0 //根節(jié)點(diǎn)的id
  },
  key: {
   url:"nourl"
  }
 }
};

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

[{
 "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", );
});

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

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

相關(guān)文章

最新評論