jstree自定义节点标记 [英] jstree custom node markup

问题描述

有没有办法让自定义标记或添加其他html元素到某些节点。

Is there a way to have custom markup or add additional html elements to some of the nodes.

例如，我们想要添加一个箭头（链接）吧在路径下所有节点的节点文本之后，当用户单击箭头时，打开上下文菜单。
我知道可以使用右键单击打开上下文菜单，但要求是在节点后面有一个箭头并单击箭头应打开上下文菜单。

For example, we want to add an arrow (link) right after the node text for all the nodes under a path, and when user click on the arrow, open the context menu. I know the context menu can be opened using the right click, but the requirement is to have an arrow after the node and clicking on the arrow should open the context menu.

有没有办法自定义或向选择性树节点添加其他html元素，并以编程方式打开上下文菜单或链接点击事件。

Is there a way to customize or add additional html elements to selective tree nodes, and programmatically open the context menu or link click event.

推荐答案

实现这一目标的最佳方法是使用插件，您可以在这里查看类似的示例插件： https://github.com/vakata/jstree/blob/master/src/misc.js （例如，问号插件）。

The best way to achieve this is using a plugin, you can take a look at similar sample plugins here: https://github.com/vakata/jstree/blob/master/src/misc.js (the questionmark plugin for example).

这是一个粗略的演示，根据需要进行修改： http://jsfiddle.net / DGAF4 / 490 /

Here is a rough demo, modify as needed: 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);

这篇关于jstree自定义节点标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！