jquery.selectabletree es un plugin de JQuery, fácilmente configurable, que despliega una serie de opciones opciones agrupadas que permiten seleccionar o no seleccionar los items desplegados. Trabaja con iconos de fontawesome.
Puedes ver una desmostración del plugin aquí
Son los datos que mostrará el árbol. Es un objeto JSON con la siguiente estructura:
- Children: Array de objetos Item
- Item: Propiedades de Item
- Dirty: Indica si el elemento ha sido modificado por el cliente desde que se cargó por primera vez
- Disabled: Establece si un elemento está deshabilitado o no
- OriginalSelected: Establece si el elemento aparecerá o no seleccionado al cargar el ábol
- Selected: Indica si el elemento está actualmente seleccionado
- Text: Texto que aparece en el elemento
- Value: Valor del elemento
Pone un color de fondo en la cabecera de cada opción
Establece si las opciones padre aparecerán collapsadas o desplegadas al cargar el componente
Icono de fontawesome que aparece cuando una opción padre está collapsada
Icono de fontawesome que aparece cuando una opción padre está desplegada
Icono de fontawesome que aparece cuando una opción está seleccionada
Icono de fontawesome que aparece cuando una opción no está seleccionada
Icono de fontawesome que aparece cuando una opción padre tiene hijos seleccionado y no seleccionados
Es disparado cuando un elemento es seleccionado o cuando un elemento se deselecciona. El evento recibe un parámetro de tipo Item que representa la opción que ha disparado el evento.
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/jquery.selectableTree.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/jquery.selectableTree.css">
//Fuente de datos del arbol
var json = '[{"Item":{"Disabled":false,"OriginalSelected":false,"Selected":false,"Text":"B�vidos","Value":"01","Dirty":false},"Children":[{"Disabled":false,"OriginalSelected":true,"Selected":true,"Text":"B�vidos","Value":"01","Dirty":false}]},{"Item":{"Disabled":false,"OriginalSelected":false,"Selected":false,"Text":"�quidos","Value":"04","Dirty":false},"Children":[{"Disabled":false,"OriginalSelected":false,"Selected":false,"Text":"Asno","Value":"51","Dirty":false},{"Disabled":false,"OriginalSelected":false,"Selected":false,"Text":"Burd�gano","Value":"50","Dirty":false},{"Disabled":false,"OriginalSelected":false,"Selected":false,"Text":"Caballo","Value":"48","Dirty":false},{"Disabled":false,"OriginalSelected":false,"Selected":false,"Text":"Cebra","Value":"52","Dirty":false},{"Disabled":false,"OriginalSelected":false,"Selected":false,"Text":"Mulo","Value":"49","Dirty":false},{"Disabled":false,"OriginalSelected":false,"Selected":false,"Text":"Onagro","Value":"53","Dirty":false}]},{"Item":{"Disabled":false,"OriginalSelected":false,"Selected":false,"Text":"Peque�os Rumiantes","Value":"03","Dirty":false},"Children":[{"Disabled":false,"OriginalSelected":false,"Selected":false,"Text":"Caprino","Value":"04","Dirty":false},{"Disabled":false,"OriginalSelected":false,"Selected":false,"Text":"Ovino","Value":"03","Dirty":false}]}]'
//Convertimos el array a un objeto JSON
var datos = JSON.parse(json);
//Instanciamos el plugin y nos subscribimos al evento onChange
$('#arbol').selectableTree({
colorInHeader: true,
collapsed: true,
dataSource: datos,
onCheck: function (e, item) {
}
});