jQuery zTree树插件简单使用教程_网络技术_宿州市腾雀网络科技有限公司

jQuery zTree树插件简单使用教程

发布时间 - 2026-01-10 22:25:41 点击率：次

前言

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 里面更多的示例和说明。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# jQuery # zTree # zTree jQuery 树插件的使用(实例讲解) # jQuery zTree树插件动态加载实例代码 # jQuery树插件zTree使用方法详解 # Jquery树插件zTree实现菜单树 # 多功能jQuery树插件zTree实现权限列表简单实例 # Jquery树插件zTree用法入门教程 # jQuery zTree树插件的使用教程 # 勾选 # 是一个 # 加载 # 数据格式 # 在此 # 下载地址 # 树状 # 多功能 # 大家多多 # 主要是 # 文档 # 实体类 # id # json # SCRIPT # data # setting # var # color # JS

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：韶关公司网站制作公司,韶关好的网站，论坛有哪些？

下一篇：开发建议：如何优化ThinkPHP应用的性能

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：韶关公司网站制作公司,韶关好的网站，论坛有哪些？

下一篇：开发建议：如何优化ThinkPHP应用的性能