0

Hace cuatro horas estoy mirando la forma de crear esto. He encontrado varios ejemplos, pero muchos usan una versión de boostrap vieja y mi sistema está usando la versión 4.

Necesito crear como 5 niveles en una vista de árbol, estaría bueno que tuvieran iconos y enlaces ¿cuál es la forma más fácil de crear esto?. Muchos ejemplos están incompletos, no los puedo hacer andar.

Algunos enlaces que he visto:

https://mdbootstrap.com/plugins/jquery/treeview/

https://jonmiles.github.io/bootstrap-treeview/

https://www.creative-tim.com/product/black-dashboard?partner=114912

https://www.jqueryscript.net/other/Folding-Tree-Structures-jQuery-fileexplore.html

https://www.webslesson.info/2017/05/make-treeview-using-bootstrap-treeview-ajax-jquery-with-php.html

https://www.phpflow.com/php/treeview-using-bootstrap-treeview-php-mysql/

Aspiro a conseguir algo similar a lo que se aprecia en esta imagen, pero con color de fondo verde y quizás sin bordes.

imagen

Les agradecería consejos de como hacer esto, por favor.

8

1 respuesta 1

1

La solución sería, como te comente mediante Skype utilizar la librería de Gijgo - o alguna similar -, la que soporta bootstrap 4.

El código sería

$('#tree').tree({
  dataSource: [ 
    { 
      text: 'Planta 1', 
      children: [ 
        { text: 'Área 1', 
         children: [
           { text: 'Equipo 1',
             children: [
               { text: 'Punto 1' },
               { text: 'Punto 2' },
               { text: 'Punto 3' }
             ]
           }
         ] 
        } 
      ] 
    }
  ]
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/css/gijgo.min.css" rel="stylesheet"/>

<div class="container">
  <div id="tree"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/js/gijgo.min.js"></script>

Es una librería bastante completa, que tiene múltiples eventos y propiedades, dejo acá la documentación

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.