More than 1 month ago I asked the following question: How do I create ul and li with a recursive function? and I was solved the problem I had.
Currently I need to make a menu with indeterminate levels (the user is the one that will form the menu, therefore its levels).
I already created the list ul and li correctly, the problem that arises is that I use this template , and there I see how they form the menu and you can see that:
-
The
ulprincpal must carry the classsidebar-menu tree:<ul class="sidebar-menu tree" data-widget="tree"> -
And the
ulinternal% for eachlimust carry the classtreeview-menu:<ul class="sidebar-menu">
And the way I currently think it places all the ul with the class: 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>