generar de forma dinámica un árbol con bootstrap-treeview

publicado por: Anonymous

me he encontrado con este framework de boostrar para hacer estructuras en árbol pero tengo mis dudas.
La primera es saber si los parámetros del array, deben llamarse “Text” y “nodes” como en el ejemplo que añado, imagino que el json deberá tener una estructura concreta. Lo que me gustaría saber es como debe ser el json o array para que este treeview funcione correctamente.

_x000D_

_x000D_

	_x000D_
	tree();_x000D_
	_x000D_
	_x000D_
  _x000D_
 function tree(){ //Funcion que hace el arbol_x000D_
	var test_tree = [_x000D_
	{_x000D_
    text: "Parent 1",_x000D_
    nodes: [_x000D_
    {_x000D_
        text: "Child 1",_x000D_
		nodes: [_x000D_
        {_x000D_
            text: "Grandchild-1",_x000D_
			nodes: [_x000D_
				{_x000D_
				 text: "Grandchild 111",_x000D_
				},_x000D_
				{_x000D_
				text: "Grandchild 2",_x000D_
				}_x000D_
			]_x000D_
          },_x000D_
        ]_x000D_
    },_x000D_
    {_x000D_
        text: "Child 2",_x000D_
		 state: _x000D_
		{_x000D_
			expanded: true,_x000D_
		},_x000D_
    }_x000D_
    ]_x000D_
  },_x000D_
_x000D_
 _x000D_
];_x000D_
		_x000D_
		_x000D_
	//$('#test_tree').treeview({data: test_tree});_x000D_
	_x000D_
	$('#test_tree').treeview({_x000D_
		 expanded: true,_x000D_
		data: test_tree,  _x000D_
		levels: 5,_x000D_
		backColor: 'white',_x000D_
		color: '#686a10',_x000D_
		borderColor: 'transparent',_x000D_
		showBorder:false,_x000D_
		highlightSelected: false,_x000D_
		_x000D_
		_x000D_
	});_x000D_
	_x000D_
	_x000D_
_x000D_
_x000D_
	_x000D_
}

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>_x000D_
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" rel="stylesheet"/>_x000D_
_x000D_
<div id ="Historias" class=" col-md-12"> <!--- COntenedor principal-->_x000D_
	<div class="row  clearfix">_x000D_
		<strong><div id="test_tree">_x000D_
			_x000D_
		</div></strong>_x000D_
	</div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

solución

Efectivamente las propiedades text y nodes son propias de la librería por lo que su nombre no puede cambiarse; ahora en cuanto a la estructura del Json que debes pasar para que el treeview funcione es la siguiente:

[{
   text: 'Objeto Padre',
   nodes: [{
      text: 'Objeto hijo',
      nodes: [{
         text: 'Objeto nieto'
      }]
   }]
}]

Si llevamos esto a un ejemplo más sencillo y fácil de digerir sería así:

_x000D_

_x000D_

$(document).ready(function () {_x000D_
  var data = [_x000D_
  {_x000D_
    text: "Equipos españoles",_x000D_
    nodes: [_x000D_
      {_x000D_
        text: "Real Madrid",_x000D_
        nodes: [_x000D_
          {_x000D_
            text: "Gareth Bale"_x000D_
          },_x000D_
          {_x000D_
            text: "Marcelo"_x000D_
          }_x000D_
        ]_x000D_
      },_x000D_
      {_x000D_
        text: "Barcelona",_x000D_
        nodes: [_x000D_
          {_x000D_
            text: "Lio Messi"_x000D_
          },_x000D_
          {_x000D_
            text: "Arturo Vidal"_x000D_
          }_x000D_
        ]_x000D_
      }_x000D_
    ]_x000D_
  },_x000D_
  {_x000D_
    text: "Equipos ingleses",_x000D_
    nodes: [_x000D_
      {_x000D_
        text: "Chelsea",_x000D_
        nodes: [_x000D_
          {_x000D_
            text: "Pedro"_x000D_
          },_x000D_
          {_x000D_
            text: "Eden Hazard"_x000D_
          }_x000D_
        ]_x000D_
      },_x000D_
      {_x000D_
        text: "Manchester City",_x000D_
        nodes: [_x000D_
          {_x000D_
            text: "Gabriel Jesús"_x000D_
          },_x000D_
          {_x000D_
            text: "Ederson"_x000D_
          }_x000D_
        ]_x000D_
      }_x000D_
    ]_x000D_
  },_x000D_
];_x000D_
  _x000D_
  $('#tree').treeview({_x000D_
    data: data_x000D_
  });_x000D_
});

_x000D_

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
_x000D_
<div class="container">_x000D_
  <div id="tree"></div>_x000D_
</div>_x000D_
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>

_x000D_

_x000D_

_x000D_

Tienes toda la documentación acá

Nos comentas si te sirve 🙂

Respondido por: Anonymous

Leave a Reply

Your email address will not be published.