Vista de árbol dinámica con casillas de verificación-Treejs
| Autor: | daweilv |
|---|---|
| Views Total: | 1,317 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 5, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Un complemento de vista de árbol ligero que muestra datos jerárquicos en una estructura de árbol plegable y seleccionable con casillas de verificación.
Funcionamiento
Instalación.
# Yarn $ yarn add @widgetjs/tree # NPM $ npm install @widgetjs/tree --save
Importa los Treejs.
import Tree from '@widgetjs/tree';
O cargue el JavaScript compilado ' Tree. min. js ' en el documento.
<script src="/dist/tree.min.js"></script>
Prepare los datos jerárquicos.
let data = [{
"id": "1",
"text":
"node-1",
"children": [{
"id": "1-1",
"text": "node-1-1",
"children": [{
"id": "1-1-1",
"text": "node-1-1-1" }, {
"id": "1-1-2",
"text": "node-1-1-2" },
}]
}]
}] Cree una nueva instancia de árbol y especifique el elemento de destino en el que se representará la vista de árbol.
let tree = new Tree('.container', {
// root data
data: [{ id: '0', text: 'root', children: data }],
loaded: function () {
// pre-selected nodes
this.values = ['1-1-1', '1-1-2'];
// output selected nodes and values
console.log(this.selectedNodes)
console.log(this.values)
// disabled nodes
this.disables = ['1-1-1', '1-1-1', '1-1-2']
}
}) También puede cargar datos jerárquicos desde orígenes de datos externos a través de AJAX.
let tree = new Tree('.container', {
url: '/path/to/data.json',
values: [],
disables: [],
method: 'GET'
}) Funciones de devolución de llamada disponibles.
let tree = new Tree('.container', {
beforeLoad: null,
loaded: null
})
