jQuery zTree加载树形菜单功能


Posted in Javascript onFebruary 25, 2016

由于项目中需要设计树形菜单功能,于是百度找相关资料,发现zTree方面的资料不少,觉得挺不错,而且zTree官方也有API文档,介绍的非常详细,经过一番捣腾之后,终于给弄出来了,所以便记下来,也算是学习zTree的一个总结吧。

zTree的介绍:

1、zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件

2、zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载

3、采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀

4、兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器

5、支持 JSON 数据

6、支持静态 和 Ajax 异步加载节点数据

7、支持任意更换皮肤 / 自定义图标(依靠css)

8、支持极其灵活的 checkbox 或 radio 选择功能

9、提供多种事件响应回调

10、灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟

11、在一个页面内可同时生成多个 Tree 实例

核心的函数和属性介绍:

核心:zTree(setting, [zTreeNodes])

这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes,从而建立 Tree。

核心参数:setting

zTree 的参数配置都在这里完成,简单的说:树的样式、事件、访问路径等都在这里配置

var setting = { 
 showLine: true, 
 checkable: true 
 };

因为参数太多,具体参数详见zTreeAPI

核心参数:zTreeNodes

zTree 的全部节点数据集合,采用由JSON对象组成的数据结构,简单的说:这里使用Json格式保存了树的所有信息

1、zTree官方网站: http://www.ztree.me/v3/main.php#_zTreeInfo

在官网能够下载到zTree的源码、实例和API,其中作者pdf的API写得非常详细

关于zTree的节点数据的获取方式分为静态(直接定义)的和动态(后台数据库加载)的

具体的配置步骤:

第一步 —— 引入相关文件

<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="ztree/js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="ztree/js/jquery.ztree.excheck-3.5.min.js"></script>

备注:

1)、第一个(zTreeStyle.css)是zTree的样式css文件,引入了这个,才能呈现出树形的结构样式,

2)、第二个(jquery-1.9.1.min.js)是jQuery文件,因为要用到,

3)、第三个(jquery.ztree.core-3.5.min.js)则是zTree的核心js文件,这个是必须的,

4)、最后一个(js/jquery.ztree.excheck-3.5.min.js)则是拓展文件,主要用于单选框和复选框的功能,因为用到了复选框,所以也要要引进来。

第二步 —— 相关配置(具体的详细配置,请到官网参考详细API文档)

var zTree;
var setting = {
 view: {
 dblClickExpand: false,//双击节点时,是否自动展开父节点的标识
 showLine: true,//是否显示节点之间的连线
 fontCss:{'color':'black','font-weight':'bold'},//字体样式函数
 selectedMulti: false //设置是否允许同时选中多个节点
 },
 check:{
 //chkboxType: { "Y": "ps", "N": "ps" },
 chkStyle: "checkbox",//复选框类型
 enable: true //每个节点上是否显示 CheckBox 
 },
 data: {
 simpleData: {//简单数据模式
  enable:true,
  idKey: "id",
  pIdKey: "pId",
  rootPId: ""
 }
 },
 callback: {
 beforeClick: function(treeId, treeNode) {
  zTree = $.fn.zTree.getZTreeObj("user_tree");
  if (treeNode.isParent) {
  zTree.expandNode(treeNode);//如果是父节点,则展开该节点
  }else{
  zTree.checkNode(treeNode, !treeNode.checked, true, true);//单击勾选,再次单击取消勾选
  }
 }
 }
};

第三步 —— 节点数据加载,呈现树形结构

1)、html页面,直接放一个ul就可以,数据最终会自动加载到这个ul元素里面

<body>
 <div class="zTreeDemoBackground left">
 <ul id="user_tree" class="ztree" style="border: 1px solid #617775;overflow-y: scroll;height: 500px;"></ul>
 </div>
</body>

2)、js中进行数据的加载

一、静态方式(直接定义)

var zNodes =[
 { id:1, pId:0, name:"test 1", open:false},
 { id:11, pId:1, name:"test 1-1", open:true},
 { id:111, pId:11, name:"test 1-1-1"},
 { id:112, pId:11, name:"test 1-1-2"},
 { id:12, pId:1, name:"test 1-2", open:true},
   ];
   
$(document).ready(function(){
 $.fn.zTree.init($("#user_tree"), setting, zNodes);
});
function onCheck(e,treeId,treeNode){
 var treeObj=$.fn.zTree.getZTreeObj("user_tree"),
 nodes=treeObj.getCheckedNodes(true),
 v="";
 for(var i=0;i<nodes.length;i++){
 v+=nodes[i].name + ",";
 alert(nodes[i].id); //获取选中节点的值
 }
}

二、动态方式(从后台数据库加载)

/**
 * 页面初始化
 */
$(document).ready(function(){
 onLoadZTree();
});

/**
 * 加载树形结构数据
 */
function onLoadZTree(){
 var treeNodes;
 $.ajax({
 async:false,//是否异步
 cache:false,//是否使用缓存
 type:'POST',//请求方式:post
 dataType:'json',//数据传输格式:json
 url:$('#ctx').val()+"SendNoticeMsgServlet?action=loadUserTree",//请求的action路径
 error:function(){
  //请求失败处理函数
  alert('亲,请求失败!');
 },
 success:function(data){
// console.log(data);
  //请求成功后处理函数
  treeNodes = data;//把后台封装好的简单Json格式赋给treeNodes
 }
 });
 
 var t = $("#user_tree");
 t = $.fn.zTree.init(t, setting, treeNodes);
}

java后台加载数据代码:

1、定义tree的VO类,这个也可以不用定义,由于我要用到其他操作,方便一些

/**
 * zTree树形结构对象VO类
 * 
 * @author Administrator
 * 
 */
public class TreeVO {
 private String id;//节点id
 private String pId;//父节点pId I必须大写
 private String name;//节点名称
 private String open = "false";//是否展开树节点,默认不展开

 public String getId() {
 return id;
 }

 public void setId(String id) {
 this.id = id;
 }

 public String getpId() {
 return pId;
 }

 public void setpId(String pId) {
 this.pId = pId;
 }

 public String getName() {
 return name;
 }

 public void setName(String name) {
 this.name = name;
 }

 public String getOpen() {
 return open;
 }

 public void setOpen(String open) {
 this.open = open;
 }

}

2、查询数据库,并且sql的结构字段也要是id,pId,name,open(可选)这种格式(注意:pId中间的I必须大写),然后将结果封装到TreeVO类中。

/**
 * 加载树形结构数据
 * @param request
 * @param response
 * @throws IOException 
 */
 public void loadUserTree(HttpServletRequest request, HttpServletResponse response) throws IOException{
 WeiXinUserService weixinUserService = new WeiXinUserServiceImpl();
 List<TreeVO> user_tree_list = weixinUserService.getUserTreeList();
 String treeNodesJson = JSONArray.fromObject(user_tree_list).toString();//将list列表转换成json格式 返回
 
 PrintWriter out = response.getWriter();
 //利用Json插件将Array转换成Json格式 
 out.print(treeNodesJson);
 
 //释放资源
 out.close();
 }

更多关于ztree控件的内容,请参考专题《jQuery插件ztree使用汇总》

这里就完成了整个操作了,?,文笔不好,组织语言自然就不怎么样了,大家见谅!共同学习,共同成长!

Javascript 相关文章推荐
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
jquery图片滚动放大代码分享(1)
Aug 25 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 Javascript
简单实现JS计算器功能
Dec 21 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
深入解析ES6中的promise
Nov 08 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
js实现时分秒倒计时
Dec 03 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 #Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 #Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 #Javascript
利用jQuery中的ajax分页实现代码
Feb 25 #Javascript
Jquery zTree 树控件异步加载操作
Feb 25 #Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 #Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 #Javascript
You might like
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
laravel请求参数校验方法
2019/10/10 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
javascript prototype 原型链
2009/03/12 Javascript
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
详解webpack介绍&amp;安装&amp;常用命令
2017/06/29 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
python实现的简单文本类游戏实例
2015/04/28 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
基层党组织公开承诺书
2014/03/28 职场文书
大学三年计划书范文
2014/04/30 职场文书
会议主持人开场白台词
2015/05/28 职场文书
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
Python正则表达式中flags参数的实例详解
2022/04/01 Python