-
Notifications
You must be signed in to change notification settings - Fork 2
JSTree Notes
See example code: https://github.com/jhu-digital-manuscripts/rosa2/wiki/JSTree-Example
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": []
}
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
}
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);
}
});
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
});