JSTree Notes

Using the JSTree API

See example code: https://github.com/jhu-digital-manuscripts/rosa2/wiki/JSTree-Example

Events

JSTree events can be used by tapping into the standard JQuery event bus. YThe JQuery object needs to be selected from the DOM, then the event handler can then be applied to it using the on() function.

Assuming the JSTree is created on element <div id="top"></div>:

$("#top").on("EVENT_NAME", function(event, data) { /* do stuff */ });
$("#top").on("EVENT_NAME", (event, data) => { /* do stuff */ });

• activate_node.jstree : will have the activated node JSTree object

data: {
  "instance": {},
  "node": {}
}

• select_node.jstree : contains an array of all currently selected nodes and the selected JSTree object

data: {
  "instance": {},
  "node": {},
  "selected": []
}

JSTree Nodes

Structure of a node object in JSTree:

node: {
  a_attr: {},        // Attributes on node anchor tag
  children: [],      // Any child nodes
  children_d: [],    // ?? Looks like copy of 'children', but sorted
  ...                // Contains some other config properties here, like icon, data, etc
  id: "SOME_ID",     // Internal object ID for JSTree. This ID can be used to retrieve nodes
  li_attr: {},       // Attributes on node <li> tag
  original: {},      // Original data used to populate this node. Can contain extra data not used in UI
  parent: "STR_ID",  // ID of parent. "#" if this is a top level node
  parents: [],       // Array of all parents (in order?)
  state: {},         // Internal state of tree node in UI
  text: "TEXT_STR"   // Text shown in UI
}

Sorting

If you want jsTree to automatically sort the nodes, you have to include the "sort" plugin. By default, this plugin will sort nodes by ID, so basically it does nothing. You can specify your own sorting function to change its behavior.

In the sort function, the this keyword will be the jsTree instance, so you can call API methods from within the function.

    $.jstree({
        "core": {
          "data": []
        },
        "plugins": ["sort"],
        "sort": function(o1, o2) {
          var n1 = this.get_node(o1).text;
          var n2 = this.get_node(o2).text;
          if (!isNaN(n1) && !isNaN(n2)) {
            return n1 - n2;
          }
          return n1.localeCompare(n2);
        }
      });

Changing data in the tree

Most straightforward way to modify the data in the tree is to set up the data model again with the nodes and just destroy the tree and recreate it. Create a new instance with: $("tree-element").jstree(dataModel);

However, you can modify the existing data model in the jsTree instance and tell the tree to redraw with the new model, or "refresh" the tree.

let instance = jQuery("#my-tree").jstree(true);
instance.settings.core.data = newDataModel;
instance.refresh();

If you use the refresh method, you will have to wait for the refresh to complete before playing with the tree. If you want to do things like select nodes or get the node JSON data for the tree, you will have to set an event handler to listen for the refresh.jstree event.

$("#my-tree").on("refresh.jstree", function(event, instance) {
  // The tree instance is returned in the event. Useful if more than one jsTree is used in the app.
  // Do stuff here
});