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'] 
})