jQuery zTree树插件简单使用教程


Posted in Javascript onJanuary 10, 2017

前言

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
支持静态 和 Ajax 异步加载节点数据.
在开发中我们常需要用到树状的展示.

下载地址:zTree

静态zTree开发流程

引入资源

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

html元素

<div>
 <ul id="treeDemo" class="ztree"></ul>
</div>

JS方式一-简单json数据格式

<SCRIPT type="text/javascript">
  <!--
  var setting = {
   data: {
    simpleData: {
     enable: true
    }
   }
  };

  var zNodes =[
   { id:1, pId:0, name:"父节点1 - 展开", open:true},
   { id:11, pId:1, name:"父节点11 - 折叠"},
   { id:111, pId:11, name:"叶子节点111"},
   { id:112, pId:11, name:"叶子节点112"},
   { id:113, pId:11, name:"叶子节点113"},
   { id:114, pId:11, name:"叶子节点114"},
   { id:12, pId:1, name:"父节点12 - 折叠"},
   { id:121, pId:12, name:"叶子节点121"},
   { id:122, pId:12, name:"叶子节点122"},
   { id:123, pId:12, name:"叶子节点123"},
   { id:124, pId:12, name:"叶子节点124"},
   { id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
   { id:2, pId:0, name:"父节点2 - 折叠"},
   { id:21, pId:2, name:"父节点21 - 展开", open:true},
   { id:211, pId:21, name:"叶子节点211"},
   { id:212, pId:21, name:"叶子节点212"},
   { id:213, pId:21, name:"叶子节点213"},
   { id:214, pId:21, name:"叶子节点214"},
   { id:22, pId:2, name:"父节点22 - 折叠"},
   { id:221, pId:22, name:"叶子节点221"},
   { id:222, pId:22, name:"叶子节点222"},
   { id:223, pId:22, name:"叶子节点223"},
   { id:224, pId:22, name:"叶子节点224"},
   { id:23, pId:2, name:"父节点23 - 折叠"},
   { id:231, pId:23, name:"叶子节点231"},
   { id:232, pId:23, name:"叶子节点232"},
   { id:233, pId:23, name:"叶子节点233"},
   { id:234, pId:23, name:"叶子节点234"},
   { id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
  ];

  $(document).ready(function(){
   $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  });
  //-->
 </SCRIPT>

JS方式二-标准json数据格式

<SCRIPT type="text/javascript">
  <!--
  var setting = { };

  var zNodes =[
   { name:"父节点1 - 展开", open:true,
    children: [
     { name:"父节点11 - 折叠",
      children: [
       { name:"叶子节点111"},
       { name:"叶子节点112"},
       { name:"叶子节点113"},
       { name:"叶子节点114"}
      ]},
     { name:"父节点12 - 折叠",
      children: [
       { name:"叶子节点121"},
       { name:"叶子节点122"},
       { name:"叶子节点123"},
       { name:"叶子节点124"}
      ]},
     { name:"父节点13 - 没有子节点", isParent:true}
    ]},
   { name:"父节点2 - 折叠",
    children: [
     { name:"父节点21 - 展开", open:true,
      children: [
       { name:"叶子节点211"},
       { name:"叶子节点212"},
       { name:"叶子节点213"},
       { name:"叶子节点214"}
      ]},
     { name:"父节点22 - 折叠",
      children: [
       { name:"叶子节点221"},
       { name:"叶子节点222"},
       { name:"叶子节点223"},
       { name:"叶子节点224"}
      ]},
     { name:"父节点23 - 折叠",
      children: [
       { name:"叶子节点231"},
       { name:"叶子节点232"},
       { name:"叶子节点233"},
       { name:"叶子节点234"}
      ]}
    ]},
   { name:"父节点3 - 没有子节点", isParent:true}

  ];

  $(document).ready(function(){
   $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  });
  //-->
 </SCRIPT>

异步zTree加载

前面的配置相同,在此不再阐述.主要是js不同.

异步JS

var setting = {
 //可勾选
 check: {
   enable: true
  },
 data : {
  simpleData : {
   enable : true
  }
 }
};

 function initTree(){
  var payFreq = $("#payFreq").val();
  var fyType = $('#fyType').val();
  var setHzType = $('#setHzType').val();

  $.ajax({
   url : "/demo/initTree",
   data : {payFreq:payFreq,
     fyType:fyType,
     setHzType:setHzType
   },
   success: function(object){
    var nodes = "";
    //拼接simple格式的json字符串
    $.each(object.data, function(i,item) {
     nodes+="{id:'"+item.id+"', pId:'"+item.pid+"', name:'"+item.name+"', isParent:'"+item.isParent+"'},";
    });
    var zNodes = "["+nodes+"]";
    var json = eval('(' + zNodes + ')'); 
    //console.log(json);
    zTreeInit(json);
   }
  });

 }
 /* 初始化树 */
 function zTreeInit(json) {
  $.fn.zTree.init($("#treeDemo"), setting, json);
  var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  //全部展开
  zTree.expandAll(true);
  //Y代表勾选时,N代表取消勾选 p代表父节点,s代表字节点
  setting.check.chkboxType = { "Y" : "ps", "N" : "ps" };

 }

java代码

Controller层

@RequestMapping("initTree")
 @ResponseBody
 public DataMessage initTree(String setHzType,String payFreq,String fyType){
  params.put("setHzType", setHzType);
  params.put("fyType", fyType);
  params.put("fkmattr_xt", fkmattr_xt);
  //获取treeinfo列表
  List<TreeInfo> treeInfos = feeTransferService.initTree(params);
  return DataMessage.successData(treeInfos);
 }

tree实体类

public class TreeInfo {

 private String id;
 private String pid;
 private String name;
 private String isParent;
 }

说明

更多实例可以参看zTree中文文档
或参见zTree GitHub 里面更多的示例和说明。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
单元选择合并变色示例代码
May 26 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
Jun 02 Javascript
js实现全选和全不选
Jul 28 Javascript
详解JS中的快速排序与冒泡
Jan 10 #Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 #Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 #Javascript
js自定义QQ菜单效果
Jan 10 #Javascript
js实现将json数组显示前台table中
Jan 10 #Javascript
详解Vue自定义过滤器的实现
Jan 10 #Javascript
JS实现的表头列头固定页面功能示例
Jan 10 #Javascript
You might like
WINXP下apache+php4+mysql
2006/11/25 PHP
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
PHP页面中文乱码分析
2013/10/29 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
php经典趣味算法实例代码
2020/01/21 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
基于jquery的图片懒加载js
2010/06/30 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
angular.bind使用心得
2015/10/26 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
Python内置函数dir详解
2015/04/14 Python
Python在Console下显示文本进度条的方法
2016/02/14 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
银行办公室岗位职责
2014/03/10 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
大学新学期计划书
2014/04/28 职场文书
完美的中文自荐信
2014/05/24 职场文书
依法行政工作汇报
2014/10/28 职场文书
红高粱观后感
2015/06/10 职场文书
优质护理服务心得体会
2016/01/22 职场文书
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技