aurelia-jstree
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    aurelia-jstree

    An Aurelia wrapper component for jsTree.

    Install

    Make sure to npm install jQuery and jsTree alongside this wrapper.

    npm install jquery jstree aurelia-jstree --save

    Aurelia CLI Support

    If your Aurelia CLI build is based on RequireJS or SystemJS you can setup the plugin using the following dependency declaration:

    ...
    "dependencies"[
      {
        "name":"jquery",
        "path":"../node_modules/jquery/dist",
        "main":"jquery.min",
        "export": "$"
      },
      {
        "name":"jstree",
        "path":"../node_modules/jstree/dist",
        "main":"jstree.min"
      },
      {
        "name": "aurelia-jstree",
        "path": "../node_modules/aurelia-jstree/dist/amd",
        "main": "index"
      }
    ]

    Configuration

    In your main.ts you'll have to load jstree and register the plugin:

    import {Aurelia} from 'aurelia-framework'
    import environment from './environment';
    import "jstree"; // <------------ MAKE SURE TO IMPORT JSTREE
    import 'jstree/themes/default/style.min.css';  // <----- IMPORT STYLES OR INCLUDE BY ANY OTHER MEANS (SCSS, direct include ...)
     
    export function configure(aurelia: Aurelia) {
      aurelia.use
        .standardConfiguration()
        .feature('resources');
     
      ...
     
      aurelia.use.plugin("aurelia-jstree");  // <----- REGISTER THE PLUGIN
     
      aurelia.start().then(() => aurelia.setRoot());
    }

    Usage

    Once the plugin is installed and configured you can use the au-js-tree custom component. An example for a simple filebrowser is provided below:

    <au-js-tree settings.bind="jstreeConfig"
                data.bind="data"
                selection-changed.bind="onSelectionChanged"
                node-moved.bind="onNodeMoved"></au-js-tree>

    The settings.core should not contain the data property. It should be provided separately via the data binding to ensure proper re-renders on prop changes.

    export class App {
      public jstreeConfig = {
        plugins: ["dnd"],
        core: {
          check_callback: function (operation, node, node_parent, node_position, more) {
            // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
            console.log(operation);
            if (operation === "move_node") {
              console.group("D&D");
              console.log("node", node);
              console.log("parent", node_parent);
              console.log("position", node_position);
              console.log("more", more);
              console.log(node_parent.original.isFolder);
              console.groupEnd();
              
              return node_parent.original.isFolder === true; //only allow dropping inside folders
            }
            return true;  //allow all other operations
          }
        },
        dnd: {
          check_while_dragging: true
        }
      }
     
      public data = [
        {
          text: "Root folder",
          state: { opened: true },
          isFolder: true,
          children: [
            {
              text: "File 1",
              state: { selected: true },
              icon: "jstree-file"
            },
            {
              text: "File 2",
              icon: "jstree-file"
            },
            {
              text: "Subfolder",
              state: { opened: false },
              icon: "jstree-folder",
              children: [],
              isFolder: true
            }
          ]
        }
      ];
     
      onSelectionChanged = (e: JQueryEventObject, data: any) => {
        console.group("Selection was changed");
        console.log(this);
        console.log(e);
        console.log(data);
        console.groupEnd();
      }
     
      onNodeMoved = (e: JQueryEventObject, data: JsTreeNodeMovedData) => {
        console.group("Node was moved");
        console.log(e);
        console.log(data);
        console.groupEnd();
      }
    }

    When binding a function to either selection-changed or node-moved instead of a lambda expression, please note that this inside your function is going to refer to the element vs your expected class instance. To avoid that bind with a proper context

    <au-js-tree settings.bind="jstreeConfig"
                data.bind="data"
                selection-changed.bind="onSelectionChanged.bind($this)"
                node-moved.bind="onNodeMoved.bind($this)"></au-js-tree>

    Acknowledgement

    Thanks goes to Dwayne Charrington for his Aurelia-TypeScript starter package https://github.com/Vheissu/aurelia-typescript-plugin

    Install

    npm i aurelia-jstree

    DownloadsWeekly Downloads

    4

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    36.6 kB

    Total Files

    46

    Last publish

    Collaborators

    • zewa666