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()子句中的第一个函数。单击取消不会导致“失败”功能执行。尝试在第一个函数中添加一个参数，比如function(result) {}子句中的then()，并查看result包含的值。如果它包含用户选择的值，那么你可以分支。

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

Kendo UI TreeView使用自定义确认取消放置事件

2 个答案: