Kendo UI TreeView使用自定義確認取消放置事件

Question

要求：在通過拖放移動樹視圖節點之前，使用自定義引導模式獲取用戶的確認。

我到處尋找，所有建議都是使用JavaScript確認對話框取消放置事件。但是，我們不想使用它，因爲它不像我們的自定義對話框那麼漂亮。

有沒有建議的方式來處理這個問題？假定模態是異步的，事件也是異步觸發的，並在等待確認之前完成事件。

理想尋找的東西是這樣的：

function onDrop(e) { 
customModal.ConfirmationModal.open("Move Node", "Are you sure you want to move this?") 
         .then(function() { 
           // persist in db 
          }, 
          function() { // cancel drop 

           e.preventDefault(); 
           customModal.ConfirmationModal.close(); 
          }) 
         .finally(function() { 

         }); 
} 

Answer 1

我最終只是防止違約和手動移動節點自己。如果有人有一個更酷的答案，請隨時讓我知道。解決方案如下：

function onDrop(e) 
     { 
      if (e.valid) 
      { 
       e.preventDefault(); 
       var treeview = $("#yourtreeview").data("kendoTreeView"); 

       customModal.ConfirmationModal.open("Move Node", "Are you sure you want to move this?") 
         .then(function() { 

          var node = e.sourceNode; 

          if (e.dropPosition == "over") 
           treeview.append(e.sourceNode, $(e.destinationNode)); 
          else 
          { 
           if (e.dropPosition == "before") 
            treeview.insertBefore(e.sourceNode, $(e.destinationNode)); 
           else if (e.dropPosition == "after") 
            treeview.insertAfter(e.sourceNode, $(e.destinationNode)); 
          } 
         }, 
          function() { // cancelled delete 
           // error 

          }) 
         .finally(function() { 
          customModal.ConfirmationModal.close(); 
         }); 

      } // e.valid 
} 

Answer 2

我不確定你的模態的實現，但不應該檢查它的返回值嗎？你確定你的模態返回一個承諾？它應該返回承諾then()按照您的意願工作。

因爲它在這裏編碼，模式總是成功。無論是單擊「確定」還是「取消」，都無關緊要，您的then()子句中的第一個函數始終運行。點擊取消不會導致執行「失敗」功能。嘗試向第一個函數添加參數，例如在then()子句中說function(result) {}，並查看result包含的值。如果它包含用戶選擇的值，那麼你可以從中分離出來。

customModal.open("Move Node", "Are you sure?").done(function (result) { 
    if (result === "Ok") { 
    // do work 
    } else { 
    // cancel 
    } 
});