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