欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Spring Boot 入门(六):集成 treetable 和 zTree 实现树形图

程序员文章站 2022-06-15 13:02:28
本篇文章是接着Spring Boot 入门(五):集成 AOP 进行日志管理写的,主要集成了树形图,在部门列表或者权限列表中,树形图经常被用上。主要是根据相应的 API 凭借 html 字符串 1.treetable 1

 

本篇文章是接着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">&times</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                                 "<tr id='"+item.xzqhbm+"' pid='"+item.pxzqhbm+"' haschild='true' ondblclick=_callback('" + item.xzqhbm + ":" + item.xzqh + "')>";
 50                     }else{
 51                         html+=
 52                                 "<tr id='"+item.xzqhbm+"' pid='"+item.pxzqhbm+"' ondblclick=_callback('" + item.xzqhbm + ":" + item.xzqh + "')>";
 53                     }
 54                     html+=
 55                             "<td nowrap>"+item.xzqhbm+"</td>"+
 56                             "<td nowrap>"+item.xzqh+"</td>"+
 57                             "<td nowrap>"+item.pxzqhbm+"</td>"+
 58                             "<td nowrap>"+item.pxzqh +"</td>"+
 59                         "</tr>";
 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                                             "<tr id='"+item.xzqhbm+"' pid='"+item.pxzqhbm+"' haschild='true' ondblclick=_callback('" + item.xzqhbm + ":" + item.xzqh + "')>";
 93                                             
 94                                         }else{
 95                                             childhtml+= 
 96                                             "<tr id='"+item.xzqhbm+"' pid='"+item.pxzqhbm+"' ondblclick=_callback('" + item.xzqhbm + ":" + item.xzqh + "')>";
 97                                             
 98                                         }
 99                                         childhtml+= 
100                                                 "<td nowrap>"+item.xzqhbm+"</td>"+
101                                                 "<td nowrap>"+item.xzqh+"</td>"+
102                                                 "<td nowrap>"+item.pxzqhbm+"</td>"+
103                                                 "<td nowrap>"+item.pxzqh+"</td>"+
104                                             "</tr>";
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 文件和样式文件

Spring Boot 入门(六):集成 treetable 和 zTree 实现树形图
 
然后初始化列表界面
Spring Boot 入门(六):集成 treetable 和 zTree 实现树形图
此部分对应的后台只需要返回一个 list 集合即可,用于初始化界面,其效果如下:

 

Spring Boot 入门(六):集成 treetable 和 zTree 实现树形图
由于需要在展开节点的时候需要动态加载,所以需要实现 expend 方法
Spring Boot 入门(六):集成 treetable 和 zTree 实现树形图
在展开节点的时候,需要根据父节点去查找其下级几点的信息,并返回给页面,实现动态加载树形图,其效果如下:

Spring Boot 入门(六):集成 treetable 和 zTree 实现树形图

 

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("<li>" + str + "</li>");
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++) {
52             ids+=nodes[i].id+",";
53         }
54         //console.log(ids.substring(0,ids.length-1));
55         $("#permissionids").val(ids.substring(0,ids.length-1));
56     }
57 </script>

 

Spring Boot 入门(六):集成 treetable 和 zTree 实现树形图
 
效果如下:

 

Spring Boot 入门(六):集成 treetable 和 zTree 实现树形图