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