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