Muy buenas a todos necesito integrar JsTree para mi proyecto en Angular 8, he estado buscando como hacerlo pero no consigo buena documentación, si alguien podría compartir sus conocimientos estaría muy agradecido, gracias de antemano!
1 respuesta
A quien interese, para integrar JsTree a nuestro proyecto sigan los siguiente pasos:
Dentro de nuestro proyecto en la terminal ejecutar:
npm install --save jquery jstree
npm install --save-dev @types/jquery @types/jstree
Agregar en el angular.json:
styles:
"node_modules/jstree/dist/themes/default/style.min.css"
scripts:
"node_modules/jquery/dist/jquery.min.js",
"node_modules/jstree/dist/jstree.min.js"
Ejemplo de prueba, en tu component.html:
<div id="jstree">
<ul>
<li>Root node 1
<ul>
<li id="child_node_1">Child node 1</li>
<li>Child node 2</li>
</ul>
</li>
<li>Root node 2</li>
</ul>
</div>
<button>demo button</button>
En tu component.ts
import { Component, OnInit } from '@angular/core';
declare var $: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'tree';
ngOnInit(): void {
$(function () {
// 6 create an instance when the DOM is ready
$('#jstree').jstree();
// 7 bind to events triggered on the tree
$('#jstree').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
// 8 interact with the tree - either way is OK
$('button').on('click', function () {
$('#jstree').jstree(true).select_node('child_node_1');
$('#jstree').jstree('select_node', 'child_node_1');
$.jstree.reference('#jstree').select_node('child_node_1');
});
});
}
}