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 相关文章推荐
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
jquery 列表双向选择器之改进版
Aug 09 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
vue组件实例解析
Jan 10 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
详解Vue中的Props与Data细微差别
Mar 02 Javascript
如何使用CocosCreator对象池
Apr 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
Ajax PHP分页演示
2007/01/02 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
php输入流php://input使用浅析
2014/09/02 PHP
php单文件版在线代码编辑器
2015/03/12 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python采集腾讯新闻实例
2014/07/10 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
python加载自定义词典实例
2019/12/06 Python
python getopt模块使用实例解析
2019/12/18 Python
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
小学数学教学反思
2014/02/02 职场文书
职业生涯规划书范文
2014/03/10 职场文书
优秀大学生求职自荐信范文
2014/04/19 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
同学聚会通知书
2015/04/20 职场文书
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript