jQuery zTree插件使用簡單教程

來源：懂視網責編：小OO 時間：2020-11-27 21:52:12

jQuery zTree插件使用簡單教程

本文實例為大家分享了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)。

推薦度：

點擊下載本文 文檔為doc格式

導讀本文實例為大家分享了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)。

本文實例為大家分享了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", );
});

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