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实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
使用jquery实现轮播图效果
Jan 02 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&amp;&amp;mysql)三
2006/10/09 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
Skyscanner波兰:廉价航班
2017/11/07 全球购物
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
保险公司演讲稿
2014/09/02 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
法定代表人证明书
2014/11/28 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
python套接字socket通信
2022/04/01 Python
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏
Python 文字识别
2022/05/11 Python
MySQL分布式恢复进阶
2022/07/23 MySQL
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技