1

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 1

2

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');
    });
  });
  }

}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.