网络编程 
首页 > 网络编程 > 浏览文章

jQuery zTree插件使用简单教程

(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )

本文实例为大家分享了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插件使用简单教程

var setting = {
 data: {
  simpleData: {
   enable: true,
   idKey: "deptId", //对应参数中的主键id
   pIdKey: "parentId", //对应参数中的父id
   rootPId: 0 //根节点的id
  },
  key: {
   url:"nourl"
  }
 }
};

数据是请求后台的数据,这里展示下json数据。注意后台返回的参数节点的名称要使用name属性,因为name属性是默认的,无果需要改动那就需要去配置了。

jQuery zTree插件使用简单教程

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

这样就完成了,看下效果。

jQuery zTree插件使用简单教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:JS中的算法与数据结构之常见排序(Sort)算法详解
下一篇:jquery树形插件zTree高级使用详解
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap