本篇文章是接着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 "<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 文件和样式文件