jstree - 添加新节点或删除现有节点后重新创建树节点

Question

我使用 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
  });   
}

我添加了自定义回调，因为我需要操作字符串来翻译上下文菜单。也许这取决于那个？

Answer 1

这个问题已经在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] && obj.childNodes[i].className && 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']
  ...
})