菜单树

web/src/main/webapp/WEB-INF/jsp/index.jsp

@@ -34,16 +34,16 @@
                 $($(this).attr('href')).addClass('active show');
                 $($(this).attr('href')).siblings().removeClass('active show');
 
-                $("#menu"+$(this).data('id')).addClass('active show');
+                $("#menu" + $(this).data('id')).addClass('active show');
-                $("#menu"+$(this).data('id')).siblings().removeClass('active show');
+                $("#menu" + $(this).data('id')).siblings().removeClass('active show');
             });
 
             $("#tabs").on('click', 'i', function () {
-                button=$(this).parent();
+                button = $(this).parent();
                 $(button.attr('href')).remove();
-                if(button.next().length==0){
+                if (button.next().length == 0) {
                     button.prev().click();
-                }else{
+                } else {
                     button.next().click();
                 }
 
@@ -73,11 +73,19 @@
         </form>
     </nav>
 
-    <c:import url="/menu?firstResult=0&maxResults=0"></c:import>
+    <div class="position-relative">
 
-    <div class="row-fluid tab-content" id="nav-tabContent">
+        <div class="position-absolute col-12">
+            <div class="tab-content" id="nav-tabContent">
                 <!-- 16:9 aspect ratio -->
 
+            </div>
+        </div>
+
+        <c:import url="/menu?firstResult=0&maxResults=0"></c:import>
+
+
+
     </div>
 
 

web/src/main/webapp/WEB-INF/jsp/menu.jsp

@@ -35,33 +35,34 @@
         }
 
 
-        function addMenu(menus, level, id) {
+        function addMenu(menus) {
 
             for (var menu in menus) {
-                href = menus[menu].href;
+                id = menus[menu].id;
-                menuId = '#menu' + menus[menu].id;
+                menuId = '#menu' + id;
-                $("#list-tab").append('<a class="list-group-item list-group-item-action" data-href="' + menus[menu].href + '" data-id="' + menus[menu].id + '" id="' + menuId.substr(1) + '" data-toggle="list">\n' +
+                $("#list-tab").append('<a class="list-group-item list-group-item-action" id="' + menuId.substr(1) + '" data-toggle="list" data-href="'+menus[menu].href+'">\n' +
-                    '                    ' + menus[menu].menuName + '\n' +
+                    '                    <span class="d-inline-block col-6 text-right">' + menus[menu].menuName + '</span>\n' +
                     '                </a>');
-                if (level > 0) {
+                if (menus[menu].menuLevel > 0) {
-                    $(menuId).addClass('offset-' + level).addClass('menu' + id);
+                    $(menuId).addClass('offset-' + menus[menu].menuLevel).addClass('menu' + menus[menu].parentId);
                     $(menuId).hide();
                 }
                 if (menus[menu].childMenu.length > 0) {
                     $(menuId).append('<i class="fas fa-angle-right"></i><span class="badge badge-primary badge-pill offset-8">' + menus[menu].childMenu.length + '</span>').click(showMenu);
-                    addMenu(menus[menu].childMenu, level + 1, menus[menu].id);
+                    addMenu(menus[menu].childMenu,menus[menu].href);
                 } else {
+                    // $(menuId+'>span:last').append('<i class="fas fa-adjust"></i>');
                     $(menuId).click(function () {
-                        btnId = '#btn' + $(this).data('id');
+                        btnId = '#btn' + $(this).attr('id');
                         if ($(btnId).length == 0) {
-                            $("#tabs").append('<button type="button" id="' + btnId.substr(1) + '" class="btn btn-secondary btn-lg" data-id="'+$(this).data('id')+'" href="#iframe' + $(this).data('id') + '">' + $(this).text() + '\n' +
+                            $("#tabs").append('<button type="button" id="' + btnId.substr(1) + '" class="btn btn-secondary btn-lg" data-id="' + $(this).attr('id') + '" href="#iframe' + $(this).attr('id') + '">' + $(this).text() + '\n' +
                                 '            <i class="fas fa-times" style="display: none"></i>\n' +
                                 '        </button>')
                         }
 
                         $(btnId).click();
 
-                        iframe = '#iframe' + $(this).data('id');
+                        iframe = '#iframe' + $(this).attr('id');
                         if ($(iframe).length == 0) {
                             $(top.document).find('#nav-tabContent').append('<div id="' + iframe.substr(1) + '" class="tab-pane fade embed-responsive embed-responsive-16by9" >\n' +
                                 '                <iframe class="embed-responsive-item" src="' + $(this).data('href') + '"></iframe>\n' +
@@ -76,9 +77,7 @@
         }
 
         $(function () {
-            addMenu(${menus}.data, 0
+            addMenu(${menus}['data']);
-        )
-            ;
         });
     </script>
 </head>

web/src/main/webapp/WEB-INF/jsp/test.jsp

@@ -15,7 +15,7 @@
 <body>
 <div class="container-fluid">
     <div class="row">
-        <div class="col-sm">
+        <div class="col-sm text-right">
             test
         </div>
         <div class="col-sm">