jstree-actions

jstree-actions

jstree plugin that allows adding actions on each node.

An action is, usually, but not limited to, a button that can be placed anywhere in the row of a node in jstree.

The most common example is a typical set of common actions (add and remove) on each node.

There are 2 public methods that you can use to add and remove actions on each node or to all nodes at once.

add_action (node_id, action)

/**
* @param node_id Can be a single node id or an array of node ids.
* @param action An object representing the action that should be added to <node>.
*
* The <node id> is the "id" key of each element of the "core.data" array.
* A special value "all" is allowed, in which case the action will be added to all nodes.
*
* The actions object can contain the following keys:
* id       <- string An ID which identifies the action. The same ID can be shared across different nodes
* text     <- string The action's text
* class    <- string (a string containing all the classes you want to add to the action (space separated)
* title	<- string The actions title for display of tooltip (optional)
* selector <- a selector that would specify where to insert the action.
* after    <- bool (insert the action after (true) or before (false) the element matching the <selector> key
* event    <- string The event on which the trigger will be called
* callback <- function that will be called when the action is clicked
*
* NOTES: Please keep in mind that:
* - the id's are strictly compared (===)
* - the selector is a plain JavaScript selector and not a jQuery one
*/

remove_action (node_id, action_id)

/**
 * @param node_id Can be a single node id or an array of node ids
 * @param action_id The ID of the action to be removed
 *
 * The <node id> is the "id" key of each element of the "core.data" array.
 * A special value "all" is allowed, in which case the action_id will be removed from all nodes.
 *
 * The action_id is the unique identifier for each action.
 * A special value "all" is allowed, in which case all the actions of node_id will be removed.
 */

Examples

Add a "remove" action to all nodes

container.jstree(true).add_action("all", {
	"id": "action_remove",
	"class": "action_remove pull-right",
	"title": "Remove Node",
	"text": "",
	"after": true,
	"selector": "a",
	"event": "click",
	"callback": function(node_id, node, action_id, action_el){
		console.log("callback", node_id, action_id);
	}
});

Add an "add" action to a particular node

container.jstree(true).add_action("1", {
	"id": "action_add",
	"class": "action_add pull-right",
	"title": "Add Child"
	"text": "",
	"after": true,
	"selector": "a",
	"event": "click",
	"callback": function(node_id, node, action_id, action_el){
		console.log("callback", node_id, action_id);
	}
});

Remove all actions from the node with id 1

container.jstree(true).remove_action("1", "all");

Remove the action_remove action from all nodes

container.jstree(true).remove_action("all", "action_remove");

Compatibility

This plugin is compatible with jstree 3.1.0. I haven't tested it with any other version, but it will most probably work as it's not doing anything too complex.

On the other side, it is compatible with any browser at least as decent as IE8. It may work with IE7, but I haven't tested it so I can't tell for sure.

I will accept patches to fix compatibility for older browsers, but I will not work on that.

NPM

You can get a copy of this library at npm.

Minify

Min version is created with refresh-sf