Spring Boot 入门（六）：集成 treetable 和 zTree 实现树形图

番茄西红柿发布于2019-04-23 11:45 / 3039人阅读

摘要：本篇文章是接着入门五集成进行日志管理写的，主要集成了树形图，在部门列表或者权限列表中，树形图经常被用上。

本篇文章是接着Spring Boot 入门（五）：集成 AOP 进行日志管理写的，主要集成了树形图，在部门列表或者权限列表中，树形图经常被用上。主要是根据相应的 API 凭借 html 字符串

1.treetable

  1 <link href="/plugins/treeTable/themes/default/treeTable.css" rel="stylesheet" type="text/css" />
  2 <script src="/plugins/treeTable/jquery.treeTable.min.js" type="text/javascript">script>
  3 <script type="text/javascript">
  4     $(document).ready(function() {});
  5 script>
  6     
  7 <div class="row">
  8     <div class="col-xs-12">
  9        <div class="box">
 10          <div class="box-header  with-border">
 11             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 12                 <span aria-hidden="true">×span>
 13             button>
 14            <h3 class="box-title">选择部门h3>
 15          div>
 16          <div class="box-body">
 17             <table id="tcXzqh_tab" class="table table-striped table-bordered table-hover">
 18                <thead>
 19                    <tr>
 20                     <th>部门编号th>
 21                     <th>部门名称th>
 22                     <th>上级部门编号th>
 23                     <th>上级部门名称th>
 24                    tr>
 25                thead>
 26                <tbody>
 27                tbody>
 28            table>
 29          div>
 30        div>
 31     div>
 32 div>
 33   
 34 <script>
 35 var tcXzqh_tab;
 36 function loadTcXzqhTable(){
 37 
 38   $.ajax({
 39         url: /admin/dept/spage,
 40         type: post,
 41         dataType: json,
 42         success: function (data) {
 43             if(data !=null){
 44                 var html = "";
 45                 for (var int = 0; int < data.resultData.length; int++) {
 46                     var item = data.resultData[int];
 47                     if(item.hasChild == true){
 48                         html+=
 49                                 ""+item.xzqhbm+" pId="+item.pXzqhbm+" haschild=true ondblclick=_callback(" + item.xzqhbm + ":" + item.xzqh + ")>";
 50                     }else{
 51                         html+=
 52                                 ""+item.xzqhbm+" pId="+item.pXzqhbm+" ondblclick=_callback(" + item.xzqhbm + ":" + item.xzqh + ")>";
 53                     }
 54                     html+=
 55                             ""+item.xzqhbm+""+
 56                             ""+item.xzqh+""+
 57                             ""+item.pXzqhbm+""+
 58                             ""+item.pXzqh +""+
 59                         "";
 60                 }
 61                 $("#tcXzqh_tab tbody").html(html);
 62                 initTcXzqh_treeTable();
 63             }
 64             //$("#loading").hide();
 65         }
 66     });
 67  }
 68 function initTcXzqh_treeTable(){
 69         var option = {
 70              /*theme:vsStyle,*//*这里的主题和引入的CSS有关*/
 71              expandLevel : 2,
 72              beforeExpand : function($treeTable, id) {
 73                  //alert(id);
 74                  //判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用
 75                  if ($(. + id, $treeTable).length) { return; }
 76                  //这里的html可以是ajax请求
 77                  openHandleLoading();
 78                  var childHtml="";
 79                      $.ajax({
 80                             url: /admin/dept/expand?parentId=+id,
 81                             type: post,
 82                             dataType: json,
 83                             success: function (data) {
 84                                 //alert(data);
 85                                 if(data !=null){
 86                                     //var html = "";
 87                                     for (var int = 0; int < data.resultData.length; int++) {
 88                                         var item = data.resultData[int];
 89                                         
 90                                         if(item.hasChild == true){
 91                                             childHtml+= 
 92                                             ""+item.xzqhbm+" pId="+item.pXzqhbm+" haschild=true ondblclick=_callback(" + item.xzqhbm + ":" + item.xzqh + ")>";
 93                                             
 94                                         }else{
 95                                             childHtml+= 
 96                                             ""+item.xzqhbm+" pId="+item.pXzqhbm+" ondblclick=_callback(" + item.xzqhbm + ":" + item.xzqh + ")>";
 97                                             
 98                                         }
 99                                         childHtml+= 
100                                                 ""+item.xzqhbm+""+
101                                                 ""+item.xzqh+""+
102                                                 ""+item.pXzqhbm+""+
103                                                 ""+item.pXzqh+""+
104                                             "";
105                                     }
106                     
107                                 }
108                                  $treeTable.addChilds(childHtml);
109                                  closeHandleLoading();
110                             }
111                           });
112              },
113             onSelect : function($treeTable, id) {
114                 //console.log(onSelect: + id);
115             }
116 
117          };
118         
119         $("#tcXzqh_tab").treeTable(option).show();
120         //$("#tcXzqh_tab").treeTable({expandLevel : 2,column:0}).show();
121  }
122 function _callback(chooseValue) {
123      /*alert(chooseValue);*/
124     $("#${inputId!}").val(chooseValue);
125     $("#lgModal2").modal("hide");
126 }
127 $(function () {
128       loadTcXzqhTable();
129 });
130 
131 script>

首先引入相应的 JS 文件和样式文件

然后初始化列表界面
此部分对应的后台只需要返回一个 List 集合即可，用于初始化界面，其效果如下：

由于需要在展开节点的时候需要动态加载，所以需要实现 expend 方法
在展开节点的时候，需要根据父节点去查找其下级几点的信息，并返回给页面，实现动态加载树形图，其效果如下：

2.ztree

引入 JS 和 CSS 样式

1 <link rel="stylesheet" href="/plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
2 <script type="text/javascript" src="/plugins/ztree/js/jquery.ztree.core.js">script>
3 <script type="text/javascript" src="/plugins/ztree/js/jquery.ztree.excheck.js">script>

编写一个div，用于存放树形图

1  <div class="form-group clearfix">
2           <label id="parentdmLabel" class="col-sm-2 control-label" style="text-align:right">菜单权限label>
3           <div class="col-sm-10">
4               <div id="treeDemoUpdate" class="ztree">div>
5           div>
6   div>

JS部分代码

 1 <SCRIPT type="text/javascript">
 2     var setting = {
 3         check: {
 4             enable: true
 5         },
 6         data: {
 7             simpleData: {
 8                 enable: true
 9             }
10         },
11         callback: {
12             beforeCheck:true,
13             onCheck:zTreeOnClick
14         }
15     };
16     var zNodes ;
17     var code;
18     function setCheck() {
19         var zTree = $.fn.zTree.getZTreeObj("treeDemoUpdate"),
20         type = {"Y": "ps", "N": "ps"};
21         zTree.setting.check.chkboxType = type;
22         showCode(setting.check.chkboxType = { "Y" : " + type.Y + ", "N" : " + type.N + " };);
23     }
24     function showCode(str) {
25         if (!code) code = $("#code");
26         code.empty();
27         code.append("" + str + "");
28     }
29     $(document).ready(function () {
30        $.ajax({
31             url: /admin/role/roleUpdateTree?roleId=+${tRole.roleId},
32             type: post,
33             async: false ,
34             dataType: json,
35             success: function (data) {
36                 zNodes=data;
37             }
38         });
39         $.fn.zTree.init($("#treeDemoUpdate"), setting, zNodes);
40         setCheck();
41         /* $("#py").bind("change", setCheck);
42          $("#sy").bind("change", setCheck);
43          $("#pn").bind("change", setCheck);
44          $("#sn").bind("change", setCheck);*/
45     });
46     
47     function zTreeOnClick(event, treeId, treeNode) {
48         var treeObj = $.fn.zTree.getZTreeObj("treeDemoUpdate");
49         var nodes = treeObj.getCheckedNodes(true);
50         var ids="";
51         for (var i = 0; i < nodes.length; i
                 
                                                                                                                    
                         云服务器
                                             
                         GPU云服务器
                                                                                                                                                 
                                      
                     
                    
                                                                                               Spring Boot
                                                                                                           spring boot webrtc
                                                                                                           spring boot微服务
                                                                                                           spring boot 云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1104.html

Java学习路线总结，搬砖工逆袭Java架构师（全网最强）

摘要：哪吒社区技能树打卡打卡贴函数式接口简介领域优质创作者哪吒公众号作者架构师奋斗者扫描主页左侧二维码，加入群聊，一起学习一起进步欢迎点赞收藏留言前情提要无意间听到领导们的谈话，现在公司的现状是码农太多，但能独立带队的人太少，简而言之，不缺干 ? 哪吒社区Java技能树打卡【打卡贴 day2...

Scorpion 2021-11-18 10:02 评论0 收藏0
spring boot - 收藏集 - 掘金

摘要：引入了新的环境和概要信息，是一种更揭秘与实战六消息队列篇掘金本文，讲解如何集成，实现消息队列。博客地址揭秘与实战二数据缓存篇掘金本文，讲解如何集成，实现缓存。 Spring Boot 揭秘与实战（九）应用监控篇 - HTTP 健康监控 - 掘金Health 信息是从 ApplicationContext 中所有的 HealthIndicator 的 Bean 中收集的， Spring...

rollback 2019-06-26 17:16 评论0 收藏0
前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 评论0 收藏0
Spring Boot 2.x 系列教程：WebFlux 系列教程大纲（一）

摘要：使用则需要及以上版本。开发使用框架七系列教程目录系列教程大纲快速入门实践实践整合整合中和实践整合中实现缓存中实现通信集成测试及部署实战图书管理系统 WebFlux 系列教程大纲一、背景大家都知道，Spring Framework 是 Java/Spring 应用程序跨平台开发框架，也是 Java EE（Java Enterprise Edition）轻量级框架，其 Spring ...

jone5679 2019-08-16 16:53 评论0 收藏0