jQuery zTree插件使用簡單教程

2019-11-19 11:01:48

字體：大中小

來源：轉載

供稿：網友

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

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

官方下載地址

第一步，HTML

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

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

zTree 初始化方法，創建 zTree 必須使用此方法

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

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

數據是請求后臺的數據，這里展示下json數據。注意后臺返回的參數節點的名稱要使用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": "技術部", "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", );});

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