[SOLUCIONADO] menu con hijos no sale

abulon81 · #1 (**permalink**) 21/05/2015, 10:23

Buenas, estoy intentando hacer un menu con tres niveles ya lo probe en java pero lo quise intentar hacer por javascript solo me toma los padres pero no sus hijos este es codigo que tengo, ya que a cada nivel le aplico css espero puedan orientarme para saber que estoy haciendo mal

Código PHP:

  function has_childrenSize (arraylistmenu,id,arraytemp){ 
            arraytemp.length=0; 
            var cont=0; 
            var obj = {}; 
         
            arraylistmenu.forEach(function(item){ 
            //console.log(item.pantalla + ' ' + item.titulomenu); 
            if(item.padre == id){ 
                 
                cont++; 
               //console.log(o.pantalla+' -'+o.titulomenu); 
            } 
        }); 
        //alert('haschildren'+arraytemp.length); 
        //return arraytemp.length; 
        return cont; 
    }

Y este es donde se contruye el menu con recursividad

Código PHP:

  function buildMenu(sb,arrayobjmenu,id,level,arraytmpmenu){ 
    //sb=""; 
          arrayobjmenu.forEach(function(bean){ 
          if (bean.padre===id) { 
             if(bean.nivel==1){ 
                     
                    sb+="<li >"; 
                    sb+="<a href=\"#\" class=\"dropdown-toggle\"  data-toggle=\"dropdown\" role=\"button\" aria-expanded=\"false\">"; 
                    sb+=bean.titulomenu; 
                    sb+="<span class=\"caret\"  ></span></a>"; 
                     
                    //var sizelst =0; 
                    var sizelst = has_childrenSize(arrayobjmenu, bean.pantalla, arraytmpmenu); 
                    //var bol=has_children(arrayobjmenu,bean.pantalla); 
                    sb+= (sizelst>0)?"<ul class=\"dropdown-menu multi-level\" role=\"menu\" aria-labelledby=\"dropdownMenu\">":""; 
                    console.log("si idpan"+bean.pantalla+" tine "+sizelst); 
                }else if(bean.nivel==2){ 
                    console.log('nivel 2'); 
                    //var sizelst =0; 
                     
                    var sizelst = has_childrenSize(arrayobjmenu, bean.pantalla, arraytmpmenu); 
                    //var bol=has_children(arrayobjmenu,bean.pantalla); 
                    //console.log("si idpan"+bean.pantalla+" tine "+sizelst); 
          
                    sb+= (sizelst>0)?"<li class=\"dropdown-submenu\">":"<li>"; 
                     
                    sb+= (sizelst==0)?"<a href=\"#\" "+((bean.ruta=="#")?">":"onclick=abrirPagina(\""+bean.ruta+"\") >"):"<a  tabindex=\"-1\" href=\"#\">"; 
                     
                    sb+=bean.titulomenu; 
                    sb+="</a>"; 
                    sb+= (sizelst>0)?"<ul class=\"dropdown-menu\">":""; 
                     
                }else if(bean.nivel==3){ 
                    console.log('nivel 3'); 
                    sb+="<li >"; 
                    sb+="<a tabindex=\"-1\" >"; 
                    sb+=bean.titulomenu; 
                    sb+="</a>"; 
                     
                } 
                 
                arraytmpmenu.length=0; 
                console.log(bean.pantalla); 
                buildMenu(sb, arrayobjmenu, bean.pantalla,bean.nivel,arraytmpmenu); 
                if(bean.nivel==2 ){ 
                     
                //var sizelst =0; 
                 
                var sizelst = has_childrenSize(arrayobjmenu, bean.pantalla, arraytmpmenu); 
                //var bol=has_children(arrayobjmenu,bean.pantalla); 
                sb+= (sizelst>0)?"</ul>":""; 
                 
                 
                console.log("si idpan r"+bean.pantalla+" tine "+sizelst); 
                sb+=("</li>"); 
                } 
                else if(bean.nivel==1){ 
                     
                    //var sizelst =0; 
                    var sizelst = has_childrenSize(arrayobjmenu, bean.pantalla, arraytmpmenu); 
                    //console.log("si idpan"+bean.pantalla+" tine "+sizelst); 
                    sb+= (sizelst==0)?"</li>":"</ul></li>"; 
                }else if(bean.nivel==3){ 
                    sb+="</li>"; 
                } 
           
           
          } 
      }); 
    return sb; 
    //console.log('menu: '+sb); 
    } 
 
function menu(){ 
   var sb=""; 
   var arraylst = [{"pantalla":"1","padre":"0","titulomenu":"Estrategia","orden":1,"ruta":"#","nivel":1},{"pantalla":"2","padre":"1","titulomenu":"Captura","orden":2,"ruta":"Estrategias.html","nivel":2},{"pantalla":"3","padre":"1","titulomenu":"Administracion","orden":3,"ruta":"#","nivel":2},{"pantalla":"4","padre":"3","titulomenu":"Condiciones","orden":4,"ruta":"#","nivel":3},{"pantalla":"5","padre":"3","titulomenu":"Acciones","orden":5,"ruta":"#","nivel":3},{"pantalla":"6","padre":"1","titulomenu":"Reportes","orden":6,"ruta":"#","nivel":2},{"pantalla":"8","padre":"0","titulomenu":"Call Center","orden":8,"ruta":"#","nivel":1},{"pantalla":"9","padre":"8","titulomenu":"Operacion","orden":9,"ruta":"CallCenter.html","nivel":2},{"pantalla":"10","padre":"8","titulomenu":"Reportes","orden":10,"ruta":"#","nivel":2},{"pantalla":"11","padre":"10","titulomenu":"Individuales","orden":11,"ruta":"#","nivel":3},{"pantalla":"1002","padre":"0","titulomenu":"Prueba","orden":12,"ruta":"#","nivel":1}] 
        var arraytemp=[]; 
        var arrlis=[]; 
        //var sb=""; 
        var obj = {}; 
    console.log(sb+=buildMenu(sb,arraylst,"0",1,arrlis)); 
   }

Aqui en el html lo llamo

Código PHP:

  [HTML] 
 
<a href="#" onclick="menu();">Click Here</a> 
[/HTML]

Espero me puedan orientar o sugerir que esta mal, ya que en java si me lo hace bien
gracias

abulon81 · #2 (**permalink**) 21/05/2015, 11:27

Wenas me respondo yo mismo por si acaso le sirve a alguien, ya lo resolvi, solo modifique esta linea:

Código PHP:

  buildMenu(sb, arrayobjmenu, bean.pantalla,bean.nivel,arraytmpmenu);

cambiandola a :

Código PHP:

  sb+= buildMenu(sb, arrayobjmenu, bean.pantalla,bean.nivel,arraytmpmenu);

Código PHP:

   
 
function buildMenu(sb,arrayobjmenu,id,level,arraytmpmenu){ 
    sb=""; 
          arrayobjmenu.forEach(function(bean){ 
          if (bean.padre===id) { 
             if(bean.nivel==1){ 
                     
                    sb+="<li >"; 
                    sb+="<a href=\"#\" class=\"dropdown-toggle\"  data-toggle=\"dropdown\" role=\"button\" aria-expanded=\"false\">"; 
                    sb+=bean.titulomenu; 
                    sb+="<span class=\"caret\"  ></span></a>"; 
                     
                    //var sizelst =0; 
                    var sizelst = has_childrenSize(arrayobjmenu, bean.pantalla, arraytmpmenu); 
                    //var bol=has_children(arrayobjmenu,bean.pantalla); 
                    sb+= (sizelst>0)?"<ul class=\"dropdown-menu multi-level\" role=\"menu\" aria-labelledby=\"dropdownMenu\">":""; 
                    console.log("si idpan"+bean.pantalla+" tine "+sizelst); 
                }else if(bean.nivel==2){ 
                    console.log('nivel 2'); 
                    //var sizelst =0; 
                     
                    var sizelst = has_childrenSize(arrayobjmenu, bean.pantalla, arraytmpmenu); 
                    //var bol=has_children(arrayobjmenu,bean.pantalla); 
                    console.log("si idpan"+bean.pantalla+" tine "+sizelst+' lev'+bean.nivel); 
          
                    sb+= (sizelst>0)?"<li class=\"dropdown-submenu\">":"<li>"; 
                     
                    sb+= (sizelst==0)?"<a href=\"#\" "+((bean.ruta=="#")?">":"onclick=abrirPagina(\""+bean.ruta+"\") >"):"<a  tabindex=\"-1\" href=\"#\">"; 
                     
                    sb+=bean.titulomenu; 
                    sb+="</a>"; 
                    sb+= (sizelst>0)?"<ul class=\"dropdown-menu\">":""; 
                     
                }else if(bean.nivel==3){ 
                    console.log('nivel 3'); 
                    sb+="<li >"; 
                    sb+="<a tabindex=\"-1\" >"; 
                    sb+=bean.titulomenu; 
                    sb+="</a>"; 
                     
                } 
                 
                arraytmpmenu.length=0; 
                console.log(bean.pantalla); 
                sb+= buildMenu(sb, arrayobjmenu, bean.pantalla,bean.nivel,arraytmpmenu); 
                if(bean.nivel==2 ){ 
                     
                //var sizelst =0; 
                 
                var sizelst = has_childrenSize(arrayobjmenu, bean.pantalla, arraytmpmenu); 
                //var bol=has_children(arrayobjmenu,bean.pantalla); 
                sb+= (sizelst>0)?"</ul>":""; 
                 
                 
                console.log("si idpan r"+bean.pantalla+" tine "+sizelst); 
                sb+=("</li>"); 
                } 
                else if(bean.nivel==1){ 
                     
                    //var sizelst =0; 
                    var sizelst = has_childrenSize(arrayobjmenu, bean.pantalla, arraytmpmenu); 
                    //console.log("si idpan"+bean.pantalla+" tine "+sizelst); 
                    sb+= (sizelst==0)?"</li>":"</ul></li>"; 
                }else if(bean.nivel==3){ 
                    sb+="</li>"; 
                } 
           
           
          } 
      }); 
    return sb; 
    //console.log('menu: '+sb); 
    } 
 
document.getElementById('m_menu').innerHTML = buildMenu(sb,arraylst,"0",1,arrlis);

Y en el html lo pinte

Código PHP:

  [HTML] 
<ul id="m_menu"></ul> 
[/HTML]