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

基本上，我希望被刪除的群組中的孩子向上移動。

如果向上指的是進入已刪除節點的位置，請檢查以下示例：

 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"> 

最后但同樣重要的是，如何在刪除之前檢查節點類型？

我添加了一個小樣本，向您展示如何完成它。 檢查節點的自定義屬性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;
}