摘要:本篇文章是接著入門五集成進(jìn)行日志管理寫的,主要集成了樹形圖,在部門列表或者權(quán)限列表中,樹形圖經(jīng)常被用上。
本篇文章是接著Spring Boot 入門(五):集成 AOP 進(jìn)行日志管理寫的,主要集成了樹形圖,在部門列表或者權(quán)限列表中,樹形圖經(jīng)常被用上。主要是根據(jù)相應(yīng)的 API 憑借 html 字符串
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>部門編號(hào)th> 21 <th>部門名稱th> 22 <th>上級(jí)部門編號(hào)th> 23 <th>上級(jí)部門名稱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 " "; 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有關(guān)*/ 71 expandLevel : 2, 72 beforeExpand : function($treeTable, id) { 73 //alert(id); 74 //判斷id是否已經(jīng)有了孩子節(jié)點(diǎn),如果有了就不再加載,這樣就可以起到緩存的作用 75 if ($(. + id, $treeTable).length) { return; } 76 //這里的html可以是ajax請(qǐng)求 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+" "+ 56 ""+item.xzqh+" "+ 57 ""+item.pXzqhbm+" "+ 58 ""+item.pXzqh +" "+ 59 ""+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 " "; 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>"+item.xzqhbm+" "+ 101 ""+item.xzqh+" "+ 102 ""+item.pXzqhbm+" "+ 103 ""+item.pXzqh+" "+ 104 "
首先引入相應(yīng)的 JS 文件和樣式文件
然后初始化列表界面
此部分對(duì)應(yīng)的后臺(tái)只需要返回一個(gè) List 集合即可,用于初始化界面,其效果如下:由于需要在展開(kāi)節(jié)點(diǎn)的時(shí)候需要?jiǎng)討B(tài)加載,所以需要實(shí)現(xiàn) expend 方法
在展開(kāi)節(jié)點(diǎn)的時(shí)候,需要根據(jù)父節(jié)點(diǎn)去查找其下級(jí)幾點(diǎn)的信息,并返回給頁(yè)面,實(shí)現(xiàn)動(dòng)態(tài)加載樹形圖,其效果如下:
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>
編寫一個(gè)div,用于存放樹形圖
1 <div class="form-group clearfix"> 2 <label id="parentdmLabel" class="col-sm-2 control-label" style="text-align:right">菜單權(quán)限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