Skip to main content
2 de 3
se añadieron 568 caracteres en el cuerpo
fwBasic
  • 2.8k
  • 1
  • 13
  • 24

Aquí te dejo un ejemplo que permite crear una lista desplegable usando los tag HTML <ul>...<li> partiendo del JSON que muestras, ademas incluye una rutina para mostrar u ocultar los sub-niveles de la lista, para esto uso jQuery y un poco de CSS y JavaScript.

var arrayjson = [
  {
    "id": 5,
    "nombre": "Electrica",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 16,
        "nombre": "Termico",
        "id_padre": 5,
        "status": true
      },
      {
        "id": 15,
        "nombre": "Relé",
        "id_padre": 5,
        "status": true
      },
      {
        "id": 14,
        "nombre": "Contactores",
        "id_padre": 5,
        "status": true
      }
    ]
  },
  {
    "id": 6,
    "nombre": "Mecanica",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 8,
        "nombre": "Motores",
        "id_padre": 6,
        "status": true
      }
    ]
  },
  {
    "id": 7,
    "nombre": "Sellos",
    "id_padre": 0,
    "status": true
  },
  {
    "id": 9,
    "nombre": "Filtro",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 10,
        "nombre": "Filtro 0,22 U",
        "id_padre": 9,
        "status": true
      },
      {
        "id": 11,
        "nombre": "Filtro Aceite",
        "id_padre": 9,
        "status": true
      },
      {
        "id": 12,
        "nombre": "Filtro De Agua",
        "id_padre": 9,
        "status": true
      }
    ]
  },
  {
    "id": 13,
    "nombre": "Sensores",
    "id_padre": 0,
    "status": true
  },
  {
    "id": 17,
    "nombre": "Croche",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 18,
        "nombre": "Ajustar",
        "id_padre": 17,
        "status": true
      },
      {
        "id": 19,
        "nombre": "Desajustar",
        "id_padre": 17,
        "status": true
      }
    ]
  },
  {
    "id": 20,
    "nombre": "Picos",
    "id_padre": 0,
    "status": true,
    "array": [
      {
        "id": 21,
        "nombre": "Sujeción",
        "id_padre": 20,
        "status": true
      },
      {
        "id": 23,
        "nombre": "Formacion",
        "id_padre": 20,
        "status": true
      },
      {
        "id": 22,
        "nombre": "Altura",
        "id_padre": 20,
        "status": true
      }
    ]
  }
];

// Genera el Menu Tipo Lista:
html=menuList(arrayjson);

// Agrega el Menu Tipo Lista al DOM (usando jQuery):
$("#listado").html(html)

// agrega la clase "dropList" al Menu Tipo Lista:
.find("ul:first").addClass("dropList");

// crea la Lista Desplegable basado en la clase "dropList":
dropList();

// rutina para crear el Menú Tipo Lista (usando recursividad) 
function menuList(menu, l) {
 if ( l == undefined)
  l=0;
  
 var sp = " ".repeat(l*2);
 html = sp + "<ul>\n"
 
 for (n in menu) {
  html += sp+" <li>"+menu[n].nombre;
  if (menu[n].array) {
   html += "\n"+menuList(menu[n].array, l+1, html)+sp+" ";
  };
  html += "</li>\n";
 }
 html += sp + "</ul>\n"
 return html;
}

// rutina para crear la Lista Desplegable (usando jQuery) 
function dropList() {
 $('.dropList').find('li:has(ul)') 
  .addClass('collapseList')
  .click( function(e) {
   if (this == e.target) {
    $(this).toggleClass('expandList');
    $(this).children('ul').toggle();
    e.stopPropagation();
   }
  })
  .children('ul').hide();
};
.dropList li {
 list-style: none;
 cursor: default;
 padding-left:20px;
 text-indent:-5px;
}
.dropList .collapseList {
 list-style: none;
 cursor: pointer;
 padding-left:20px;
 text-indent:-5px;
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBkPSJNMTg0LjcsNDEzLjFsMi4xLTEuOGwxNTYuNS0xMzZjNS4zLTQuNiw4LjYtMTEuNSw4LjYtMTkuMmMwLTcuNy0zLjQtMTQuNi04LjYtMTkuMkwxODcuMSwxMDFsLTIuNi0yLjMgIEMxODIsOTcsMTc5LDk2LDE3NS44LDk2Yy04LjcsMC0xNS44LDcuNC0xNS44LDE2LjZoMHYyODYuOGgwYzAsOS4yLDcuMSwxNi42LDE1LjgsMTYuNkMxNzkuMSw0MTYsMTgyLjIsNDE0LjksMTg0LjcsNDEzLjF6Ii8+PC9zdmc+) no-repeat -3px 0px;
 background-size: 16px 16px;
}
.dropList .expandList {
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBkPSJNOTguOSwxODQuN2wxLjgsMi4xbDEzNiwxNTYuNWM0LjYsNS4zLDExLjUsOC42LDE5LjIsOC42YzcuNywwLDE0LjYtMy40LDE5LjItOC42TDQxMSwxODcuMWwyLjMtMi42ICBjMS43LTIuNSwyLjctNS41LDIuNy04LjdjMC04LjctNy40LTE1LjgtMTYuNi0xNS44djBIMTEyLjZ2MGMtOS4yLDAtMTYuNiw3LjEtMTYuNiwxNS44Qzk2LDE3OS4xLDk3LjEsMTgyLjIsOTguOSwxODQuN3oiLz48L3N2Zz4=) no-repeat -3px 0px;
 background-size: 16px 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
----------------- lista generada por la funcion -----------------
<div id="listado"></div>
----------------- lista que espero obtener de la funcion -----------------
<div>
  <li>Electrica
    <ul>
      <li>Termico</li>
      <li>Relé</li>
      <li>Contactores</li>
    </ul>
  </li>
  <li>Mecanica
    <ul>
      <li>Motores</li>
    </ul>
  </li>
  <li>Sellos
  </li>
  <li>Filtro
    <ul>
      <li>Filtro 0,22 U</li>
      <li>Filtro Aceite</li>
      <li>Filtro De Agua</li>
    </ul>
  </li>
  <li>Sensores
  </li>
  <li>Croche
    <ul>
      <li>Ajustar</li>
      <li>Desajustar</li>
    </ul>
  </li>
  <li>Picos
    <ul>
      <li>Sujeción</li>
      <li>Formacion</li>
      <li>Altura</li>
    </ul>
  </li>
</div>

fwBasic
  • 2.8k
  • 1
  • 13
  • 24