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 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
Mootools 1.2教程 事件处理
Sep 15 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 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安装攻略:常见问题解答(二)
2006/10/09 PHP
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
php图片上传类 附调用方法
2016/05/15 PHP
33种Javascript 表格排序控件收集
2009/12/03 Javascript
JavaScript中的类继承
2010/11/25 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
星球大战与Python之间的那些事
2016/01/07 Python
怎样使用Python脚本日志功能
2016/08/14 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
在线课程:Skillshare
2019/04/02 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
物业管理专业个人的自我评价
2013/11/19 职场文书
工业自动化毕业生自荐信范文
2014/01/04 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏
如何通过cmd 连接阿里云服务器
2022/04/18 Servers
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技