javascript - JSTree:移动所有子节点

Question

我正在使用 JSTree，这是我对 contextmenu 插件的设置:

"contextmenu":{         
    "items": function($node) {
        return {
            "Remove": {
                "separator_before": false,
                "separator_after": false,
                "label": "Delete group",
                "action": function (obj) {
                    $tree.jstree("get_children_dom", $node).each(function(child){
                        $tree.jstree("move_node", $tree.jstree("get_node", child, true), "#", "last", function(node, parent, pos){
                            alert(1);
                        });
                    });
                    $tree.jstree("delete_node", $node);
                }
            }
        };
    }
}

基本上，我希望将要删除的组的子项向上移动。我目前得到的函数应该把节点放在最后，但是我怎样才能把它们放在删除节点的地方呢？此外，当前代码不起作用 - 我做错了什么？

最后但同样重要的是，我如何在删除之前检查节点类型？

提前致谢

Answer 1

basically, I want the children of the group that's being deleted to be moved upwards.

如果向上是指进入被删除节点的位置，请检查以下示例:

var data = [{
  'text': 'item 1',
  'children': [{
    text: 'item 1-1',
    children: [{
      text: 'item 1-1-1',
      children: [{
        text: 'item 1-1-1-1'
      }, {
        text: 'item 1-1-1-2'
      }]
    }, {
      text: 'item 1-1-2'
    }, {
      text: 'item 1-1-3'
    }]
  }, {
    text: 'item 1-2',
    children: [{
      text: 'item 1-2-1'
    }, {
      text: 'item 1-2-2'
    }]
  }, {
    text: 'item 1-3',
    children: [{
      text: 'item 1-3-1'
    }, {
      text: 'item 1-3-2'
    }]
  }, {
    text: 'item 1-4',
    children: [{
      text: 'item 1-4-1'
    }, {
      text: 'item 1-4-2'
    }]
  }]
}, {
  'text': 'item 2',
  children: [{
    text: 'item 2-1',
    children: [{
      text: 'item 2-1-1'
    }, {
      text: 'item 2-1-2'
    }]
  }, {
    text: 'item 2-2',
    children: [{
      text: 'item 2-2-1'
    }, {
      text: 'item 2-2-1'
    }]
  }, {
    text: 'item 2-3'
  }]
}, {
  'text': 'item 3',
  children: [{
    text: 'item 3-1',
    children: [{
      text: 'item 3-1-1'
    }, {
      text: 'item 3-1-2'
    }]
  }, {
    text: 'item 3-2'
  }]
}, {
  'text': 'item 4 (you cannot delete this one)',
  'disableDelete': true,
  children: [{
    text: 'item 4-1'
  }, {
    text: 'item 4-2'
  }, {
    text: 'item 4-3'
  }]
}];

var $tree = $('#jstree_demo').jstree({
  'plugins': ['contextmenu'],
  'core': {
    'animation': 0,
    'check_callback': true,
    'themes': {
      'stripes': true
    },
    'data': data
  },
  'contextmenu': {
    'items': function($node) {
      return {
        'Remove': {
          'separator_before': false,
          'separator_after': false,
          'label': 'Delete group',
          'action': function(obj) {

            if ($node.original.disableDelete) {
              document.write('deletion is forbidden for this node');
              return;
            }

            var nodes = $node.children.slice(0); // jstree behaves erratic if we try to move using $node.children directly, so we will clone the array to prevent this issue

            var $row = $(obj.reference[0].closest('li'));

            $tree.jstree('move_node', nodes, $node.parent, $row.index());

            $tree.jstree('delete_node', $node);

          }
        }
      };
    }
  }
});

<div id="jstree_demo"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css">

Last but not least, how can I check the node type before removing?

我添加了一个小示例来向您展示如何完成它。检查自定义属性 disableDeletion 对节点的声明:

var data = [{'text': 'item 4 (you cannot delete this one)', 'disableDelete': true}]

以及上下文菜单操作中的验证:

if ($node.original.disableDelete) {
    document.write('deletion is forbidden for this node');
    return;
}