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 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
javascript 获取表单file全路径
Dec 31 Javascript
javascript判断office版本示例
Apr 11 Javascript
js中window.open打开一个新的页面
Aug 10 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
JS+css3实现幻灯片轮播图
Aug 14 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
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
Tensorflow 多线程设置方式
2020/02/06 Python
如何使用python传入不确定个数参数
2020/02/18 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
干部现实表现材料
2014/02/13 职场文书
企业授权委托书范本
2014/04/02 职场文书
贷款担保书范文
2014/05/13 职场文书
新店开张活动方案
2014/08/24 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python