jQuery zTree树插件简单使用教程

站长资源 2024/9/22 佚名

7 1538 7

相思资源网 Design By www.200059.com

前言

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

下载地址：zTree

静态zTree开发流程

引入资源

<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.4.4.min.js">

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

标签：

jQuery,zTree

相思资源网 Design By www.200059.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

相思资源网 Design By www.200059.com

评论“jQuery zTree树插件简单使用教程”

暂无jQuery zTree树插件简单使用教程的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

jQuery zTree树插件简单使用教程

jQuery,zTree

微信小程序 Button 组件详解及简单实例

详解JS中的快速排序与冒泡

评论“jQuery zTree树插件简单使用教程”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

友情链接