jstree custom node markup

Question

Есть ли способ создать пользовательскую разметку или добавить дополнительные элементы html для некоторых узлов.

Например, мы хотим добавить стрелку (ссылку) сразу после текста узла для всех узлов под контуром, а когда пользователь нажимает на стрелку, откройте контекстное меню. Я знаю, что контекстное меню можно открыть, щелкнув правой кнопкой мыши, но требование состоит в том, чтобы иметь стрелку после узла и щелчок по стрелке должен открыть контекстное меню.

Есть ли способ настроить или добавить дополнительные элементы html на селективные узлы дерева и программно открыть контекстное меню или событие щелчка ссылки.

Answer 1

Лучший способ добиться этого - использовать плагин, вы можете посмотреть похожие плагины здесь: https://github.com/vakata/jstree/blob/master/src/misc.js (например, плагин с вопросительным значком).

Вот грубый демо, изменять по мере необходимости: 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'] 
})