https://github.com/oscarjorge/jquery.selectabletree

https://github.com/oscarjorge/jquery.selectabletree

jquery jquery-plugin selectable tree

Last synced: about 14 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/oscarjorge/jquery.selectabletree
• Owner: oscarjorge
• Created: 2017-01-12T12:10:32.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-06-05T06:30:16.000Z (over 6 years ago)
• Last Synced: 2024-11-15T20:37:02.464Z (2 months ago)
• Topics: jquery, jquery-plugin, selectable, tree
• Language: JavaScript
• Size: 43 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# JQuery Selectable Tree

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.

![Texto alternativo](https://github.com/oscarjorge/jquery.selectableTree/blob/master/src/JQuery.selectableTree.JPG)

Puedes ver una desmostración del plugin [aquí](http://htmlpreview.github.io/?https://github.com/oscarjorge/jquery.selectableTree/blob/master/index.html)

## Parámetros

### Parámetros obligatorios:

#### dataSource: 

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

  

### Parámetros opcionales:

#### colorInHeader (default:true): 

Pone un color de fondo en la cabecera de cada opción

#### collapsed (default:true): 

Establece si las opciones padre aparecerán collapsadas o desplegadas al cargar el componente

#### iconCollapsed (default:fa-angle-up): 

Icono de fontawesome que aparece cuando una opción padre está collapsada

#### iconUncollapsed (default:fa-angle-down): 

Icono de fontawesome que aparece cuando una opción padre está desplegada

#### iconChecked (default:fa-circle): 

Icono de fontawesome que aparece cuando una opción está seleccionada

#### iconUnchecked (default:fa-circle-o): 

Icono de fontawesome que aparece cuando una opción no está seleccionada

#### iconMixchecked (default:fa-circle-thin): 

Icono de fontawesome que aparece cuando una opción padre tiene hijos seleccionado y no seleccionados

## Eventos

#### onCheck

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.

# Getting Started

## Incluir los archivos necesarios

```html

```

## Instanciar el plugin

```html

//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) {

    }

});

```