Question

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

Answer 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);

要在点击时删除节点，请将上述代码段放入select_node.jstree事件。

检查第二个演示 - Fiddle

Answer 2

这是我迄今取得的成就 -

jsfiddle.net/ubo3tjzk/1

jsTree将孩子从一棵树移到另一棵树

2 个答案: