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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 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 过滤页面中的BOM(实现代码)
2013/06/29 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
Laravel日志用法详解
2016/10/09 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
js倒计时抢购实例
2015/12/20 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
详解Python中的动态属性和特性
2018/04/07 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
流行文化收藏品:Sideshow(DC漫画,星球大战,漫威)
2019/03/17 全球购物
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
个人评价范文分享
2014/01/11 职场文书
党建工作经验交流材料
2014/05/25 职场文书
师范生求职自荐信
2014/06/14 职场文书
机械操作工岗位职责
2014/08/08 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
安全生产月标语
2014/10/07 职场文书
Pygame Time时间控制的具体使用详解
2021/11/17 Python
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫