jstree 自定义节点标记

Question

有没有办法拥有自定义标记或向某些节点添加额外的 html 元素。

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

有没有办法自定义或添加额外的 html 元素到选择性树节点，并以编程方式打开上下文菜单或 link 单击事件。

Answer 1

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

这里是一个粗略的demo，根据需要修改：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);

Answer 2

对于 jstree 3.3.0 版，您可以使用 node_customize plugin

$("#category-tree").jstree({
  core: {
    data: nodes
  },
  node_customize: {
    default: function(el, node) {
      $(el).find('a').append(arrowHtml)
    }
  },
  plugins: ['node_customize']
})

Answer 3

您可以从服务器获取数据并在 jstree initialization

之前渲染任何结构

<div id="tree">
  <ul>
  <li data-jstree='{"opened":true,"selected":true}'>
    opened <b>root node ></b>
      <ul>
        <li>default node</li>
        <li><b>badge</b> example: <span class="badge badge-warning" onclick="alert('clicked!')">clickme!</span></li>
      </ul>
    </li>
   <li data-jstree='{"disabled":true}'>root 2</li>
  </ul>
</div>

某处：$('#tree').jstree();jsfiddle

jstree 自定义节点标记

jstree custom node markup

javascript

jstree