martes, 21 de febrero de 2017

Generación de Menú Recursivo desde Base de Datos y Generación desde JQuery con ajax.

Generar menú y sub Menús desde la base de datos:

vista previa al finalizar.




Hoy en día hay en algunos proyectos necesitamos generar el menú desde la base de datos y hay diferente formas de poder realizarlos en este ejemplo utilizaremos el concepto de recursividad.
El menú consta de una clase Menu Entity y con otra la que se encarga de generar los menús padre y los sub menu TreeMenuEntity.
Para poder armar el menú en lado de la vista utilizaremos la api Jquery , Jquery smartmenus, bootstrap.




Utilizaremos el Right nav de nuestro nav var de bootstrap. si desean el código completo pueden dejar sus correos en los comentarios.

 MenuEntity.java
package com.cloudsrcsoft.menu;

import java.util.List;

public class MenuEntity {
 private List<MenuEntity> menus;
 private String controller;
 private String module;
  
 public MenuEntity(String controller, String module, List<MenuEntity> menus) {
  super();
  this.menus = menus;
  this.controller = controller;
  this.module = module;
 }
 
 public List<MenuEntity> getMenus() {
  return menus;
 }
 public void setMenus(List<MenuEntity> menus) {
  this.menus = menus;
 }
 public String getController() {
  return controller;
 }
 public void setController(String controller) {
  this.controller = controller;
 }
 public String getModule() {
  return module;
 }
 public void setModule(String module) {
  this.module = module;
 }

 @Override
 public String toString() {
  return "MenuEntity [menus=" + menus + ", controller=" + controller + ", module=" + module + "]";
 }
}



 TreeMenuEntity.java
package com.cloudsrcsoft.menu;

import java.util.ArrayList;
import java.util.List;

public class TreeMenuEntity {
 public int idObject;
    public int idParent;
    public String controller;
    public String action;
    public String nameModule;
    
 public int getIdObject() {
  return idObject;
 }

 public void setIdObject(int idObject) {
  this.idObject = idObject;
 }

 public int getIdParent() {
  return idParent;
 }

 public void setIdParent(int idParent) {
  this.idParent = idParent;
 }

 public String getController() {
  return controller;
 }

 public void setController(String controller) {
  this.controller = controller;
 }

 public String getAction() {
  return action;
 }

 public void setAction(String action) {
  this.action = action;
 }

 public String getNameModule() {
  return nameModule;
 }

 public void setNameModule(String nameModule) {
  this.nameModule = nameModule;
 }

 public static List<MenuEntity> GenerarMenu(List<TreeMenuEntity> TreeMenuEntitys)
    {

        List<MenuEntity> menuList = new ArrayList<MenuEntity>();
        for(TreeMenuEntity treeMenuEntitys: TreeMenuEntitys)
        {
          
            if (treeMenuEntitys.idParent == 0) 
            {
             String urlaction = treeMenuEntitys.getController() + "/" + treeMenuEntitys.getAction();
                menuList.add(new MenuEntity(urlaction, treeMenuEntitys.getNameModule(), GenerarSubMenu(TreeMenuEntitys, treeMenuEntitys)));
            }
        }
        return menuList;
    }
    
    public static List<MenuEntity> GenerarSubMenu(List<TreeMenuEntity> TreeMenuEntitys, TreeMenuEntity treeMenuEntitys)
    {
     List<MenuEntity> menuList = new ArrayList<MenuEntity>();
        for (TreeMenuEntity objeto : TreeMenuEntitys)
        {
          if (objeto.idParent == treeMenuEntitys.idObject)
            {
             String urlaction = objeto.getController() + "/" + objeto.getAction();
                menuList.add(new MenuEntity(urlaction, treeMenuEntitys.getNameModule(), GenerarSubMenu(TreeMenuEntitys, objeto)));
            }
        }
        return menuList;
    }
}


 Test.java
package com.cloudsrcsoft.menu;

import java.util.ArrayList;
import java.util.List;


public class Test {
 
 public static void main(String[] args) {
  List<TreeMenuEntity> lst = new ArrayList<TreeMenuEntity>();
  TreeMenuEntity sec1 = new TreeMenuEntity();
  TreeMenuEntity sec2 = new TreeMenuEntity();
  TreeMenuEntity sec3 = new TreeMenuEntity();
  TreeMenuEntity sec4 = new TreeMenuEntity();
  TreeMenuEntity sec5 = new TreeMenuEntity();
  TreeMenuEntity sec6 = new TreeMenuEntity();
  
  sec1.setIdObject(1);
  sec1.setIdParent(0);
  sec1.setController("Controller");
  sec1.setAction("ShowNotice");
  sec1.setNameModule("Soy Modulo 1");
  
  sec2.setIdObject(2);
  sec2.setIdParent(1);
  sec2.setController("Controller");
  sec2.setAction("ShowList");
  sec2.setNameModule("Soy Modulo de 1.1");
  
  sec3.setIdObject(3);
  sec3.setIdParent(2);
  sec3.setController("Controller");
  sec3.setAction("ShowNotice");
  sec3.setNameModule("Soy Modulo de 1.1.1");
  
  sec4.setIdObject(4);
  sec4.setIdParent(0);
  sec4.setController("Controller");
  sec4.setAction("ShowNotice");
  sec4.setNameModule("Soy Modulo 2");
  
  sec5.setIdObject(5);
  sec5.setIdParent(4);
  sec5.setController("Soy Controlador de 2.1");
  sec5.setAction("ShowNotice");
  sec5.setNameModule("Soy Modulo de 2.1");
  
  sec6.setIdObject(6);
  sec6.setIdParent(5);
  sec6.setController("Controller");
  sec6.setAction("ShowNotice");
  sec6.setNameModule("Update");
  
  lst.add(sec1);
  lst.add(sec2);
  lst.add(sec3);
  lst.add(sec4);
  lst.add(sec5);
  lst.add(sec6);
  System.out.println(TreeMenuEntity.GenerarMenu(lst));
  
 }

}


Emp.java
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<html>
<head>
 <title>Menu Recursivo</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://vadikom.github.io/smartmenus/src/addons/bootstrap/jquery.smartmenus.bootstrap.css" />
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <script src="https://vadikom.github.io/smartmenus/src/jquery.smartmenus.js"></script>
 <script src="https://vadikom.github.io/smartmenus/src/addons/bootstrap/jquery.smartmenus.bootstrap.js"></script>

</head>
 <script>
  $(document).ready(function(){
   var menu = []; // en esta parte se tiene que realizar la llamada mediante ajax a un controlador para armar el menú 
   $("#menu").append(buildMenu(menu));
   $("#menu").smartmenus('refresh');
  });
  
     function buildMenu(menu) {
      var li = "";
      for (var i = 0 ; i < menu.length ; i++) {
       li += '<li ><a href="#" > titulo';
       if (menu[i].subMenu != null && menu[i].subMenu != '') {
        li += '<span class="caret"></span></a>';
        li += '<ul class="dropdown-menu">';
        li += buildMenu(menu[i].subMenu) + "</ul></li>";
       }else{
        li += "</a></li>";
       }
      }
      return li;
     }
 </script>
 
<body>
<!-- Navbar static top -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="navbar-collapse collapse">
  
      <!-- Left nav -->
      <ul class="nav navbar-nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">A long sub menu <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="disabled"><a class="disabled" href="#">Disabled item</a></li>
                    <li><a href="#">One more link</a></li>
                    <li><a href="#">Menu item 1</a></li>
                    <li><a href="#">Menu item 2</a></li>
                    <li><a href="#">Menu item 3</a></li>
                  </ul>
                </li>
                <li><a href="#">Another link</a></li>
                <li><a href="#">One more link</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
  
      <!-- Right nav -->
      <ul class="nav navbar-nav navbar-right" id = "menu">
      
        
      </ul>
  
    </div><!--/.nav-collapse -->
  </div><!--/.container -->
</div>

</body>
</html>


5 comentarios:

  1. Buen aporte estimado, si pudieras para ver elcodigo enviarmelo al correo jcaguilar40@gmail.com

    ResponderEliminar
  2. buen dia compañero... está excelente el ejemplo... porfavor compárteme el codigo completo... mhoyos27y@gmail.com
    Gracias

    ResponderEliminar
  3. Buen día, excelente ejemplo me encantaría el código completo
    luis.rodriguez.des@gmail.com

    Muchas gracias
    Saludos

    ResponderEliminar
  4. excelente aporte amigo, agradecido de antemano por tu apoyo, si pudieras compartir tu codigo a mi correo. esotop8@gmail.com gracias !!!

    ResponderEliminar
  5. que genial el aporte, muy bueno, por favor si pudieras compartirme el código completo, te agradecería mucho, adjunto mi correo david3292@hotmail.es

    Gracias

    ResponderEliminar