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 读取图片文件的大小
Jun 25 Javascript
jquery 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
axios实现简单文件上传功能
Sep 25 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 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防注入安全代码
2008/04/09 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
python 文件与目录操作
2008/12/24 Python
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
Python中的__slots__示例详解
2017/07/06 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
python 识别图片中的文字信息方法
2018/05/10 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
设计模式的基本要素是什么
2014/04/21 面试题
生物化工专业个人自荐信
2013/09/26 职场文书
应届生人事助理求职信
2013/11/09 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
文案策划岗位职责
2015/02/11 职场文书
工作后的感想
2015/08/07 职场文书