jstree自定义节点标记

Question

有没有一种方法可以自定义标记或添加额外的HTML元素的一些节点。

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

有没有一种方法来定制或添加额外的HTML元素到选择树节点，并以编程方式打开上下文菜单或链接点击事件。

Answer 1

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

这里是一个粗略的演示，根据需要修改：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'] 
})