jsTree将孩子从一棵树移到另一棵树的根答案

【问题标题】：jsTree move child to root from one tree to otherjsTree将孩子从一棵树移到另一棵树的根
【发布时间】：2016-01-25 13:16:27
【问题描述】：

我在 jsTree 中遇到问题。我想将子节点移动到根节点和 viseversa。我也可以从第一棵树的孩子移动到第二棵树的根。请帮我。

请在下面找到我的 jsfiddle 链接。 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
        }
    }
 });

【问题讨论】：

检查jsfiddle.net/ubo3tjzk/1。这是你想要的吗？
@AmitKumarGhosh - 谢谢兄弟。但我不想在第一棵树中拖放位置。我只能推到第二棵树。我也可以使用删除图像实现删除节点选项
你能详细说明一下吗？
你分享的例子很完美。我们可以在第一棵树中避免 dnd 吗？如果我选择并删除节点并且应该从树中删除，我们也可以在 jstree 中实现删除节点选项
对于 1，虽然不确定，对于 2，jstree.com/api/#/?f=delete_node(obj)。我相信这两棵树都应该启用dnd。

标签： jquery jstree jstree-dnd

【解决方案1】：

查看演示 - 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);

要在单击时删除节点，请将上述 sn-p 放入 select_node.jstree 事件中。

查看第二个演示 - Fiddle

【讨论】：

@NikolaErmakov - 我们可以用删除图标实现每个节点。请帮助我在第一棵树中添加了删除选项jsfiddle.net/xuap2uh1/2
你能解释一下这是什么 - achieve each node with delete icon.
我们可以有删除选项的节点，比如点击删除图像节点应该删除。
非常感谢兄弟。最后从第二棵树我想拖放到外部 div 以从第二棵树中删除。这可能吗
然后将 "dnd": { "always_copy": true } 添加到树设置 - jsfiddle.net/ermakovnikolay/ytpz1bpy

【解决方案2】：

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

jsfiddle.net/ubo3tjzk/1

【讨论】：