Skip to main content
2 de 3
Nueva información aportada sobre la etiqueta <ul>
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64

¿Como crear una lista con niveles indeterminados?

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>

bypabloc_
  • 1.9k
  • 15
  • 46
  • 102