Jstree custom node markup
Is there a way to create custom markup or add additional html elements for some nodes.
For example, we want to add an arrow (link) right after the text node for all nodes below the path, and when the user clicks the arrow, open the context menu. I know the context menu can be opened by right clicking, but one needs to have an arrow after the node, and clicking the arrow should open the context menu.
Is there a way to customize or add additional html elements to the selectable tree nodes and programmatically open the context menu or click event.
source to share
The best way to achieve this is to use a plugin, you can see similar plugins here: https://github.com/vakata/jstree/blob/master/src/misc.js (question mark plugin for example).
Here is a rough demo, change if necessary: http://jsfiddle.net/DGAF4/490/
(function ($, undefined) {
"use strict";
var img = document.createElement('IMG');
img.src = "http://jstree.com/tree-icon.png";
img.className = "jstree-contextmenubtn";
$.jstree.plugins.contextmenubtn = function (options, parent) {
this.bind = function () {
parent.bind.call(this);
this.element
.on("click.jstree", ".jstree-contextmenubtn", $.proxy(function (e) {
e.stopImmediatePropagation();
$(e.target).closest('.jstree-node').children('.jstree-anchor').trigger('contextmenu');
}, this));
};
this.teardown = function () {
this.element.find(".jstree-contextmenubtn").remove();
parent.teardown.call(this);
};
this.redraw_node = function(obj, deep, callback, force_draw) {
obj = parent.redraw_node.call(this, obj, deep, callback, force_draw);
if(obj) {
var tmp = img.cloneNode(true);
obj.insertBefore(tmp, obj.childNodes[2]);
}
return obj;
};
};
})(jQuery);
source to share
With jstree version 3.3.0 you can use the node_customize plugin
$("#category-tree").jstree({
core: {
data: nodes
},
node_customize: {
default: function(el, node) {
$(el).find('a').append(arrowHtml)
}
},
plugins: ['node_customize']
})
source to share