jsTree 移动 child 从一棵树到另一棵树的根

Question

我在 jsTree 中遇到问题。我想将 child 节点移动到根节点，反之亦然。我也可以从第一棵树 child 移动到第二棵树的根。请帮我。

请在下面找到我的 jsfiddle link。 http://jsfiddle.net/ermakovnikolay/ubo3tjzk/

First tree
<div id="tree"></div>

Second tree
<div id="tree2"></div>

var data = [
     { "id" : "root", "parent" : "#", "text" : "Root", "state":{"opened":true} },
     { "id" : "cat1", "parent" : "root", "text" : "First Branch", "state":{"opened":true}  },
     { "id" : "cat01", "parent" : "cat1", "text" : "Cat 0.1.0" },
     { "id" : "cat02", "parent" : "cat1", "text" : "Cat 0.1.1" },
     { "id" : "cat03", "parent" : "cat1", "text" : "Cat 0.1.2" }
]

var data2 = [
     { "id" : "cat2", "parent" : "#", "text" : "Second Branch", "state": {"opened":true}},
     { "id" : "cat11", "parent" : "cat2", "text" : "Cat 1.1.0" },
     { "id" : "cat12", "parent" : "cat2", "text" : "Cat 1.1.1"  },
     { "id" : "cat13", "parent" : "cat2", "text" : "Cat 1.1.2" }
]

$.jstree.defaults.core = {};

$('#tree')
    .on('changed.jstree', function (event, data) {
          if( data.action == 'select_node'){ 
              $('#tree').find('li').removeClass('disabled_node');
              currentlevel = parseInt( $('#'+data.node.id).attr('aria-level') );
              $('#tree').find('li').each( function() {
                  if($(this).attr('aria-level') > currentlevel) {
                    $(this).addClass('disabled_node');   
                  }
              });

          }
          if( data.action == 'deselect_node'){ 
              $('#tree').find('li').each( function() {
                  if($(this).attr('aria-level') > currentlevel) {
                    $(this).removeClass('disabled_node');   
                  }
              }); 
          }
    })
    .jstree({
    "core" : {
        "data" : data,
        "themes": {
            "url": true,
            "icons": true
        }
    }
 });  


$('#tree2')
    .on('changed.jstree', function (event, data) {
          if( data.action == 'select_node'){ 
              $('#tree').find('li').removeClass('disabled_node');
              currentlevel = parseInt( $('#'+data.node.id).attr('aria-level') );
              $('#tree').find('li').each( function() {
                  if($(this).attr('aria-level') > currentlevel) {
                    $(this).addClass('disabled_node');   
                  }
              });

          }
          if( data.action == 'deselect_node'){ 
              $('#tree').find('li').each( function() {
                  if($(this).attr('aria-level') > currentlevel) {
                    $(this).removeClass('disabled_node');   
                  }
              }); 
          }
    })
    .jstree({
    "core" : {
        "data" : data2,
        "themes": {
            "url": true,
            "icons": true
        }
    }
 });

Answer 1

这是我目前所取得的成就 -

jsfiddle.net/ubo3tjzk/1

Answer 2

查看演示 - Fiddle

您可以通过以下方式限制掉落到第一棵树：

'check_callback': function(operation, node, node_parent, node_position, more) {
    if (operation === "move_node") {
        return false;
    }
}

要从第一棵树中删除所选节点，请使用：

var node = $("#tree").jstree('get_selected');
$("#tree").jstree('delete_node', node);

要在单击时删除节点，请将上面的代码片段放入 select_node.jstree 事件中。

检查第二个演示 - Fiddle

jsTree 移动 child 从一棵树到另一棵树的根

jsTree move child to root from one tree to other

jquery

jstree

jstree-dnd