jQuery zTree插件使用簡單教程

來源：懂視網(wǎng) 責(zé)編：小OO 時間：2020-11-27 21:52:12

jQuery zTree插件使用簡單教程

本文實例為大家分享了jQuery zTree插件使用簡單教程，供大家參考，具體內(nèi)容如下：首先說一下，在web開發(fā)過程中會有很多的地方需要到樹形的插件，JQuery 就有樹的插件，本次簡單教程講的是zTree的使用教程。官方下載地址；第一步，HTML；<；ul id="deptTree" class="ztree">；<；/ul>。第二步，zTree在init的時候都需要什么參數(shù)。zTree 初始化方法，創(chuàng)建 zTree 必須使用此方法。$.fn.zTree.init($("#deptTree").setting.data)；init(obj.zSetting.zNodes)。

推薦度：

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

導(dǎo)讀本文實例為大家分享了jQuery zTree插件使用簡單教程，供大家參考，具體內(nèi)容如下：首先說一下，在web開發(fā)過程中會有很多的地方需要到樹形的插件，JQuery 就有樹的插件，本次簡單教程講的是zTree的使用教程。官方下載地址；第一步，HTML；<；ul id="deptTree" class="ztree">；<；/ul>。第二步，zTree在init的時候都需要什么參數(shù)。zTree 初始化方法，創(chuàng)建 zTree 必須使用此方法。$.fn.zTree.init($("#deptTree").setting.data)；init(obj.zSetting.zNodes)。

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

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

官方下載地址

第一步，HTML

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

第二步，zTree在init的時候都需要什么參數(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é)點的id
 },
 key: {
 url:"nourl"
 }
 }
};

數(shù)據(jù)是請求后臺的數(shù)據(jù)，這里展示下json數(shù)據(jù)。注意后臺返回的參數(shù)節(jié)點的名稱要使用name屬性，因為name屬性是默認(rèn)的，無果需要改動那就需要去配置了。

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

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

jQuery zTree插件使用簡單教程

推薦度：

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

標(biāo)簽：插件插件使用控件

熱門焦點

jQuery zTree插件使用簡單教程

jQuery zTree插件使用簡單教程

jQuery zTree插件使用簡單教程

最新推薦

猜你喜歡

熱門推薦