Блог

я построил дерево с узлами, используя jstree. пользователь может выбрать цвет фона узла с помощью выбора цвета в контекстном меню. К сожалению, я заметил, что когда создается новый узел или удаляется другой, дерево, похоже, воссоздается. действительно, материалы css теряются, и вещи, добавленные в node.data тоже.

как я могу предотвратить это?

это мой код:

 function treeCreation(){
  var core = {
    'check_callback': true,
  };
  var plugins = [
    "contextmenu", "dnd", "search",
    "state", "types", "wholerow"
  ];
  var types = {
    "default": {
      'max_depth': 1
    }
  };
  var contextmenu = {         
    "items": function($node) {
      var tree = $("#tree").jstree(true);
      return {
          "Create": {
              "separator_before": false,
              "separator_after": false,
              "label": "Create",
              "action": function (obj) { 
                  $node = tree.create_node($node);
                  tree.edit($node);
              }
          },
          "Rename": {
              "separator_before": false,
              "separator_after": false,
              "label": "Rename",
              "action": function (obj) { 
                  tree.edit($node);
              }
          },                         
          "Remove": {
              "separator_before": false,
              "separator_after": false,
              "label": "Remove",
              "action": function (obj) { 
                  tree.delete_node($node);
              }
          },
          "Color": {
              "separator_before": false,
              "separator_after": false,
              "label": "Color",
              "action": function (obj) {
                $('#colorpicker').trigger('click');
              }
          }
      };
    }
  };
  var animation = 400;
  $('#tree').jstree({
    "plugins" : plugins, 
    'core': core,
    'animation': animation,
    'types': types,
    'contextmenu': contextmenu
  });   
}
  

я добавил пользовательские обратные вызовы, потому что мне нужно было манипулировать строками для перевода контекстного меню. Может быть, это зависит от этого?

Ответ на этот вопрос был дан в Github.
В основном способ заключается в создании плагина для jstree, который переопределяет функцию перерисовки.

В моем случае использования мне нужно было сделать каждый узел удаляемым (jquery-ui), поэтому я сделал это:

 (function ($, undefined) {
  "use strict";
  $.jstree.defaults.droppable = {};
  $.jstree.plugins.droppable = function (options, parent) {
    this.redraw_node = function(obj, deep, callback, force_draw) {
      var i, j, tmp = null;
      obj = parent.redraw_node.call(this, obj, deep, callback, force_draw);
      if(obj) {
        for(i = 0, j = obj.childNodes.length; i < j; i  ) {
          if(obj.childNodes[i] amp;amp; obj.childNodes[i].className amp;amp; obj.childNodes[i].className.indexOf("jstree-wholerow") !== -1) {
            tmp = obj.childNodes[i];
            break;
          }
        }
        if(tmp) {
          $(tmp).droppable({
            accept: '.my-css-selector',
            drop: myDropCallback
          });
        }
      }
      return obj;
    };
  };
})(jQuery);
  

Затем при создании jstree вам необходимо объявить свой пользовательский плагин:

 $('#my-tree').jstree({
  ...
  plugins: ['droppable']
  ...
})