jQuery zTree插件使用简单教程


Posted in jQuery onAugust 16, 2019

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

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

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 #jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 #jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 #jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 #jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 #jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 #jQuery
jQuery中DOM常见操作实例小结
Aug 01 #jQuery
You might like
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
Python Web版语音合成实例详解
2019/07/16 Python
化学教师自荐信范文
2013/12/28 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
个人借款担保书
2014/04/02 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis
MySQL创建管理子分区
2022/04/13 MySQL
js判断两个数组相等的5种方法
2022/05/06 Javascript