本篇文章是接着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 文件和样式文件
然后初始化列表界面
此部分对应的后台只需要返回一个 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("<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>
效果如下：
原文地址：https://www.cnblogs.com/dz-boss/p/10548323.html
时间： 2024-11-10 10:54:27