2

Hace mas de 1 mes hice la siguiente pregunta: ¿Como creo ul y li con una función recursiva? y me fue resuelto el problema que tenia.

Actualmente necesito hacer un menu con niveles indeterminados (el usuario es el que formara el menu, por tanto sus niveles).

Ya creo la lista ul y li correctamente, el problema que se me presenta es que utilizo esta plantilla, y alli veo como forman el menu y se puede observar que:

  • El ul princpal debe llevar la clase sidebar-menu tree:

    <ul class="sidebar-menu tree" data-widget="tree">

  • Y los ul internos para cada li deben llevar la clase treeview-menu:

    <ul class="sidebar-menu">

Y de la manera como lo creo actualmente coloca todos los ul con la clase: sidebar-menu tree.

var todoMenus = {
  "menu": [
    {
      "id": 1,
      "id_padre": 0,
      "icono": "fa fa-dashboard fa-fw",
      "link": "/",
      "titulo": "Tablero"
    },
    {
      "id": 2,
      "id_padre": 0,
      "icono": "fa fa-tasks fa-fw",
      "link": "#",
      "titulo": "Procesos"
    },
    {
      "id": 3,
      "id_padre": 2,
      "icono": "fa fa-list-ol fa-fw",
      "link": "/lotes",
      "titulo": "Lotes"
    },
    {
      "id": 4,
      "id_padre": 2,
      "icono": "fa fa-eraser fa-fw",
      "link": "/limpieza",
      "titulo": "Limpieza"
    },
    {
      "id": 5,
      "id_padre": 2,
      "icono": "fa fa-stop fa-fw",
      "link": "#",
      "titulo": "Paradas"
    },
    {
      "id": 6,
      "id_padre": 2,
      "icono": "fa fa-wrench fa-fw",
      "link": "#",
      "titulo": "Mantenimiento"
    },
    {
      "id": 7,
      "id_padre": 6,
      "icono": "fa",
      "link": "/planes",
      "titulo": "Planes"
    },
    {
      "id": 8,
      "id_padre": 6,
      "icono": "fa",
      "link": "/calendario",
      "titulo": "Calendario"
    },
    {
      "id": 9,
      "id_padre": 0,
      "icono": "fa fa-file-text-o fa-fw",
      "link": "#",
      "titulo": "Reportes"
    },
    {
      "id": 10,
      "id_padre": 9,
      "icono": "fa fa-bar-chart-o fa-fw",
      "link": "/estadisticos",
      "titulo": "Estadisticos"
    },
    {
      "id": 11,
      "id_padre": 9,
      "icono": "fa fa-building-o fa-fw",
      "link": "/estaticos",
      "titulo": "Estaticos"
    },
    {
      "id": 12,
      "id_padre": 9,
      "icono": "fa fa-file fa-fw",
      "link": "/parametrizados",
      "titulo": "Parametrizados"
    },
    {
      "id": 13,
      "id_padre": 0,
      "icono": "fa fa-wrench fa-fw",
      "link": "#",
      "titulo": "Opciones"
    },
    {
      "id": 22,
      "id_padre": 13,
      "icono": "fa fa-industry fa-fw",
      "link": "#",
      "titulo": "Marcas de<br/>Equipos"
    },
    {
      "id": 23,
      "id_padre": 22,
      "icono": "fa",
      "link": "/marcas",
      "titulo": "Marcas"
    },
    {
      "id": 24,
      "id_padre": 22,
      "icono": "fa",
      "link": "/modelos",
      "titulo": "Modelos"
    },
    {
      "id": 32,
      "id_padre": 13,
      "icono": "fa fa-clock-o fa-fw",
      "link": "/turnos",
      "titulo": "Turnos"
    },
    {
      "id": 14,
      "id_padre": 13,
      "icono": "fa fa-flask fa-fw",
      "link": "#",
      "titulo": "Productos<br/>de Elaboración"
    },
    {
      "id": 25,
      "id_padre": 14,
      "icono": "fa",
      "link": "/productos",
      "titulo": "Productos"
    },
    {
      "id": 26,
      "id_padre": 14,
      "icono": "fa",
      "link": "/unidadesdemedicion",
      "titulo": "Unidades de<br/>Medición"
    },
    {
      "id": 15,
      "id_padre": 13,
      "icono": "fa fa-arrows-alt fa-fw",
      "link": "#",
      "titulo": "Areas y Procesos<br/>de Producción"
    },
    {
      "id": 30,
      "id_padre": 15,
      "icono": "fa",
      "link": "/areas",
      "titulo": "Areas"
    },
    {
      "id": 31,
      "id_padre": 15,
      "icono": "fa",
      "link": "/procesos",
      "titulo": "Procesos "
    },
    {
      "id": 16,
      "id_padre": 13,
      "icono": "fa fa-steam fa-fw",
      "link": "/equipos",
      "titulo": "Equipos"
    },
    {
      "id": 17,
      "id_padre": 13,
      "icono": "fa fa-user fa-fw",
      "link": "/personas",
      "titulo": "Personas"
    },
    {
      "id": 18,
      "id_padre": 0,
      "icono": "fa fa-gears fa-fw",
      "link": "#",
      "titulo": "Configuración"
    },
    {
      "id": 19,
      "id_padre": 18,
      "icono": "fa fa-users fa-fw",
      "link": "/usuarios",
      "titulo": "Usuarios"
    },
    {
      "id": 20,
      "id_padre": 18,
      "icono": "fa fa-suitcase fa-fw",
      "link": "/perfiles",
      "titulo": "Perfiles"
    },
    {
      "id": 21,
      "id_padre": 18,
      "icono": "fa fa-database fa-fw",
      "link": "/respaldo",
      "titulo": "Respaldo"
    },
    {
      "id": 33,
      "id_padre": 13,
      "icono": "fa",
      "link": "/tiposmtto",
      "titulo": "Tipos de Mantenimiento"
    },
    {
      "id": 34,
      "id_padre": 5,
      "icono": "fa",
      "link": "#",
      "titulo": "De Mantenimiento"
    },
    {
      "id": 36,
      "id_padre": 34,
      "icono": "fa",
      "link": "/paradas_mtto_graphic",
      "titulo": "Estadísticas"
    },
    {
      "id": 35,
      "id_padre": 34,
      "icono": "fa",
      "link": "/paradas_mtto",
      "titulo": "Listado"
    }
  ]
};

let menu_generado = GenerarTodo();
$("#main-nav").append(menu_generado);

function GenerarTodo(){
    var result = "";
    let menujson = { "menu": todoMenus.menu };
    function ordenar_menu(j) {
        menu = { menu: [] };
        for (n in j.menu) {
            insertar_menu(j.menu[n], 0, menu.menu);
        }
        return menu;
    }
    function insertar_menu(j, l, menu) {
        for(n in menu){
            if(menu[n].id == j.id_padre){
                if (menu[n].menu == undefined)
                    menu[n].menu = [];
                return menu[n].menu.push(j);
            }else{
                if (menu[n].menu){
                    if (insertar_menu(j, l+1, menu[n].menu)){
                        return true;
                    }
                }
            }
        }
        if(l){
            return false;
        }
        menu.push(j);
    }
    menu = ordenar_menu(menujson);

    result=menuList(menu.menu);

    function menuList(menu, l) {
        if ( l == undefined){
            l=0;
        }
        result = '<ul class="sidebar-menu tree" data-widget="tree">\n'
        for (n in menu) {
            result += '<li '+ ( (!menu[n].menu) ? '' : 'class="treeview"') +'><a href="' + menu[n].link + '"><i class="' + menu[n].icono + '"></i> <span>' + menu[n].titulo + '</span></a>';
            if (menu[n].menu) {
                result += '\n'+menuList(menu[n].menu, l+1, result)+' ';
            };
            result += '</li>\n';
        }
        result += '</ul>\n'
        return result;
    }
    return result;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<nav id='main-nav'></nav>

1 respuesta 1

1

Basta con buscar los elementos raíz (l = 0) y sólo a ellos agregarle esa clase:

result = '<ul class="sidebar-menu' + (l?'':' tree') + '" data-widget="tree">\n'

He usado un operador ternario para facilitar el código.

Tu código quedaría así:

var todoMenus = {
  "menu": [
    {
      "id": 1,
      "id_padre": 0,
      "icono": "fa fa-dashboard fa-fw",
      "link": "/",
      "titulo": "Tablero"
    },
    {
      "id": 2,
      "id_padre": 0,
      "icono": "fa fa-tasks fa-fw",
      "link": "#",
      "titulo": "Procesos"
    },
    {
      "id": 3,
      "id_padre": 2,
      "icono": "fa fa-list-ol fa-fw",
      "link": "/lotes",
      "titulo": "Lotes"
    },
    {
      "id": 4,
      "id_padre": 2,
      "icono": "fa fa-eraser fa-fw",
      "link": "/limpieza",
      "titulo": "Limpieza"
    },
    {
      "id": 5,
      "id_padre": 2,
      "icono": "fa fa-stop fa-fw",
      "link": "#",
      "titulo": "Paradas"
    },
    {
      "id": 6,
      "id_padre": 2,
      "icono": "fa fa-wrench fa-fw",
      "link": "#",
      "titulo": "Mantenimiento"
    },
    {
      "id": 7,
      "id_padre": 6,
      "icono": "fa",
      "link": "/planes",
      "titulo": "Planes"
    },
    {
      "id": 8,
      "id_padre": 6,
      "icono": "fa",
      "link": "/calendario",
      "titulo": "Calendario"
    },
    {
      "id": 9,
      "id_padre": 0,
      "icono": "fa fa-file-text-o fa-fw",
      "link": "#",
      "titulo": "Reportes"
    },
    {
      "id": 10,
      "id_padre": 9,
      "icono": "fa fa-bar-chart-o fa-fw",
      "link": "/estadisticos",
      "titulo": "Estadisticos"
    },
    {
      "id": 11,
      "id_padre": 9,
      "icono": "fa fa-building-o fa-fw",
      "link": "/estaticos",
      "titulo": "Estaticos"
    },
    {
      "id": 12,
      "id_padre": 9,
      "icono": "fa fa-file fa-fw",
      "link": "/parametrizados",
      "titulo": "Parametrizados"
    },
    {
      "id": 13,
      "id_padre": 0,
      "icono": "fa fa-wrench fa-fw",
      "link": "#",
      "titulo": "Opciones"
    },
    {
      "id": 22,
      "id_padre": 13,
      "icono": "fa fa-industry fa-fw",
      "link": "#",
      "titulo": "Marcas de<br/>Equipos"
    },
    {
      "id": 23,
      "id_padre": 22,
      "icono": "fa",
      "link": "/marcas",
      "titulo": "Marcas"
    },
    {
      "id": 24,
      "id_padre": 22,
      "icono": "fa",
      "link": "/modelos",
      "titulo": "Modelos"
    },
    {
      "id": 32,
      "id_padre": 13,
      "icono": "fa fa-clock-o fa-fw",
      "link": "/turnos",
      "titulo": "Turnos"
    },
    {
      "id": 14,
      "id_padre": 13,
      "icono": "fa fa-flask fa-fw",
      "link": "#",
      "titulo": "Productos<br/>de Elaboración"
    },
    {
      "id": 25,
      "id_padre": 14,
      "icono": "fa",
      "link": "/productos",
      "titulo": "Productos"
    },
    {
      "id": 26,
      "id_padre": 14,
      "icono": "fa",
      "link": "/unidadesdemedicion",
      "titulo": "Unidades de<br/>Medición"
    },
    {
      "id": 15,
      "id_padre": 13,
      "icono": "fa fa-arrows-alt fa-fw",
      "link": "#",
      "titulo": "Areas y Procesos<br/>de Producción"
    },
    {
      "id": 30,
      "id_padre": 15,
      "icono": "fa",
      "link": "/areas",
      "titulo": "Areas"
    },
    {
      "id": 31,
      "id_padre": 15,
      "icono": "fa",
      "link": "/procesos",
      "titulo": "Procesos "
    },
    {
      "id": 16,
      "id_padre": 13,
      "icono": "fa fa-steam fa-fw",
      "link": "/equipos",
      "titulo": "Equipos"
    },
    {
      "id": 17,
      "id_padre": 13,
      "icono": "fa fa-user fa-fw",
      "link": "/personas",
      "titulo": "Personas"
    },
    {
      "id": 18,
      "id_padre": 0,
      "icono": "fa fa-gears fa-fw",
      "link": "#",
      "titulo": "Configuración"
    },
    {
      "id": 19,
      "id_padre": 18,
      "icono": "fa fa-users fa-fw",
      "link": "/usuarios",
      "titulo": "Usuarios"
    },
    {
      "id": 20,
      "id_padre": 18,
      "icono": "fa fa-suitcase fa-fw",
      "link": "/perfiles",
      "titulo": "Perfiles"
    },
    {
      "id": 21,
      "id_padre": 18,
      "icono": "fa fa-database fa-fw",
      "link": "/respaldo",
      "titulo": "Respaldo"
    },
    {
      "id": 33,
      "id_padre": 13,
      "icono": "fa",
      "link": "/tiposmtto",
      "titulo": "Tipos de Mantenimiento"
    },
    {
      "id": 34,
      "id_padre": 5,
      "icono": "fa",
      "link": "#",
      "titulo": "De Mantenimiento"
    },
    {
      "id": 36,
      "id_padre": 34,
      "icono": "fa",
      "link": "/paradas_mtto_graphic",
      "titulo": "Estadísticas"
    },
    {
      "id": 35,
      "id_padre": 34,
      "icono": "fa",
      "link": "/paradas_mtto",
      "titulo": "Listado"
    }
  ]
};

let menu_generado = GenerarTodo();
$("#main-nav").append(menu_generado);

function GenerarTodo(){
    var result = "";
    let menujson = { "menu": todoMenus.menu };
    function ordenar_menu(j) {
        menu = { menu: [] };
        for (n in j.menu) {
            insertar_menu(j.menu[n], 0, menu.menu);
        }
        return menu;
    }
    function insertar_menu(j, l, menu) {
        for(n in menu){
            if(menu[n].id == j.id_padre){
                if (menu[n].menu == undefined)
                    menu[n].menu = [];
                return menu[n].menu.push(j);
            }else{
                if (menu[n].menu){
                    if (insertar_menu(j, l+1, menu[n].menu)){
                        return true;
                    }
                }
            }
        }
        if(l){
            return false;
        }
        menu.push(j);
    }
    menu = ordenar_menu(menujson);

    result=menuList(menu.menu);

    function menuList(menu, l) {
        if ( l == undefined){
            l=0;
        }
        result = '<ul class="sidebar-menu' + (l?'':' tree') + '" data-widget="tree">\n';
        for (n in menu) {
            result += '<li '+ ( (!menu[n].menu) ? '' : 'class="treeview"') +'><a href="' + menu[n].link + '"><i class="' + menu[n].icono + '"></i> <span>' + menu[n].titulo + '</span></a>';
            if (menu[n].menu) {
                result += '\n'+menuList(menu[n].menu, l+1, result)+' ';
            };
            result += '</li>\n';
        }
        result += '</ul>\n'
        return result;
    }
    return result;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<nav id='main-nav'></nav>

7
  • 1
    Gracias hermano, solo modifique un poco la linea y quedo así result = '<ul ' + (l?'class="treeview-menu"':'class="sidebar-menu" data-widget="tree"') + '>\n'; funciona de maravilla :D
    – bypabloc_
    Commented el 25 ago. 2017 a las 16:17
  • Me alegra saberlo :) seguí las indicaciones de tu pregunta. Si me lo permites editaré tu pregunta para agregar este detalle que acabas de dar. Commented el 25 ago. 2017 a las 16:47
  • No hay problema :D Gracias. Solo me queda una duda, agrego a los que tienen subniveles la flecha como la plantilla observo la creación del DOM y la comparo con la plantilla y es como sino tuviera la flecha, si despliego los menú tranquilamente, pero la flecha es como sino existiera.
    – bypabloc_
    Commented el 25 ago. 2017 a las 17:54
  • No entiendo eso de la flecha. ¿A qué flecha te refieres? No sé dónde ver el problema que te surge ahora. Commented el 25 ago. 2017 a las 18:26
  • En la plantilla para cada menú coloca una flecha que indica que tiene submenus, yo coloco la flecha pero la flecha no interactúa como lo hace la plantilla original. Acá en el código no lo tengo y para demostrarlo tendría que simular la plantilla y no se como hacerlo.
    – bypabloc_
    Commented el 25 ago. 2017 a las 18:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.