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; 
}