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版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery实现图片切换效果
Oct 19 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
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
PHP之数组学习
2011/05/29 PHP
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
php去掉文件前几行的方法
2015/07/29 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
ie focus bug 解决方法
2009/09/03 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
Python3多线程操作简单示例
2018/05/22 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
自学python的建议和周期预算
2019/01/30 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
挂靠协议书范本
2014/04/22 职场文书
班级年度安全计划书
2014/05/01 职场文书
公司投资建议书
2014/05/16 职场文书
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
Java SSM配置文件案例详解
2021/08/30 Java/Android