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 相关文章推荐
javascript编程起步(第二课)
Jan 10 Javascript
js 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
js仿手机页面文件下拉刷新效果
Oct 14 Javascript
vue.js学习之vue-cli定制脚手架详解
Jul 02 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 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
德劲1102收音机的打理维修案例
2021/03/02 无线电
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
ZF等常用php框架中存在的问题
2008/01/10 PHP
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
PHP 中文处理技巧
2010/04/25 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
python超简单解决约瑟夫环问题
2015/05/12 Python
Python教程之全局变量用法
2016/06/27 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
python 利用toapi库自动生成api
2020/10/19 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
一套VC试题
2015/01/23 面试题
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
Unix如何添加新的用户
2014/08/20 面试题
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB