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 clasesidebar-menu tree
:<ul class="sidebar-menu tree" data-widget="tree">
Y los
ul
internos para cadali
deben llevar la clasetreeview-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>