如何回滾無法在jstree中移動的節點

Question

我想弄清楚如何僅回滾未成功移動的文件夾節點。下面的代碼是我想要做的一個例子。當您選擇了幾個文件夾並將它們移動到另一個文件夾時，問題就出現了。如果其中一個目錄無法移動，我希望能夠將其回滾到它的原始父級。 不幸的是，$.jstree.rollback(data.rlbk);回滾了選擇到其先前位置的所有文件夾。

$("#tree").jstree({...}).bind("move_node.jstree", function (e, data) { 
    // process all selected nodes directory 
    data.rslt.o.each(function (i) { 
     // Send request. 
     var move = $.parseJSON($.ajax({ 
      url: "./jstree.php", 
      type: 'post', 
      async: false, 
      data: { 
       operation: "move_dir", 
       .... 
      } 
     }).responseText); 
     // When everything's ok, the reponseText will be {success: true} 
     // In all other cases it won't exist at all. 
     if(move.success == undefined){ 
      // Here I want to rollback the CURRENT failed node. 
      // $.jstree.rollback(data.rlbk); will rollback all 
      // of the directories that have been moved. 
     } 
    } 
}); 

有沒有辦法做到這一點？

Answer 1

我已經看過使用jstree之前，但沒有用它在我的代碼。因此，代碼可能不正確，但概念應該是。

根據您的代碼，您似乎在服務器端執行移動操作，並且希望更新樹以反映結果。

基於jsTree文檔，它看起來好像您無法提交節點更新並回滾到上次提交。

除了只回滾不需要的更改外，還可以回滾樹（所有更改）並在之後執行移動。

爲了更好地理解下面的代碼，您可能需要閱讀它（或創建一個副本），而不需要在「ifTriggeredByCode」被設置或在「if」語句的條件中引用的行。

$("#tree").jstree({...}).bind("move_node.jstree", function (e, data) { 

    var jsTree = $(this); 
    var successes = []; 

    // Becomes true when function was triggered by code that updates jsTree to 
    // reflect nodes that were successfully moved on the server 
    var wasTriggeredByCode = false; 

    // process all selected nodes directory 
    data.rslt.o.each(function (i) { 

     // I'm not certain that this is how the node is referenced 
     var node = $(this); 

     wasTriggeredByCode = (wasTriggeredByCode || node.data('redoing')); 

     // Don't perform server changes when event was triggered from code 
     if (wasTriggeredByCode) { 
      return; 
     } 

     // Send request. 
     var move = $.parseJSON($.ajax({ 
      url: "./jstree.php", 
      type: 'post', 
      async: false, 
      data: { 
       operation: "move_dir", 
       .... 
      } 
     }).responseText); 

     if(move.success){ 
      successes.push(node); 
     } 
    }); 

    // Don't continue when event was triggered from code 
    if (wasTriggeredByCode) { 
     return; 
    } 

    // Roll back the tree here 
    jsTree.rollback(data.rlbk); 

    // Move the nodes 
    for (var i=0; i < successes.length; i++) { 
     var node = successes[i]; 

     // According to the documentation this will trigger the move event, 
     // which will result in infinite recursion. To avoid this you'll need 
     // to set a flag or indicate that you're redoing the move. 
     node.data('redoing', true); 

     jsTree.move_node(node, ...); 

     // Remove the flag so that additional moves aren't ignored 
     node.removeData('redoing'); 
    } 
});