Kendo ui - 删除时需要显示带有是或否按钮的剑道确认模式答案

【问题标题】：Kendo ui - Need to show a kendo confirmation modal with yes or no button when deletingKendo ui - 删除时需要显示带有是或否按钮的剑道确认模式
【发布时间】：2017-08-11 00:01:37
【问题描述】：

当您单击三个点时，您将看到删除弹出窗口。
当你点击删除时它会被删除。
但在它被删除之前，我需要显示一个带有是或否按钮的确认模式。
当我选择是时它应该删除当我选择否时它不应该删除
您能告诉我如何实现吗？
在下面提供我的代码

https://jsfiddle.net/su301f1u/

var pai_to_delete = null;

    $(document).ready(function(){
        $('.pai-del-menu').hide();
        //$('del-menu')
    });
    $(".pai-del-row").click(function(e){
        var pai_x = e.pageX;
        var pai_y = e.pageY;

        $('.pai-del-menu').css({left: pai_x, top: pai_y});

        $('.pai-del-menu').show();
        $('.pai-del-menu').attr('tabindex',-1).focus();
        pai_to_delete = $(this).parent();
    });

    $('.pai-del-menu').blur(function(){
        $(this).hide();
        pai_to_delete = null;
    });

    $('.pai-del-menu').click(function(){
        $(this).hide();
        pai_to_delete.remove();
    });

【问题讨论】：

标签： javascript jquery kendo-ui confirm kendo-confirm

【解决方案1】：

这里是 DEMO 和 Kendo Confirm 的工作。代码如下：

JS：

var pai_to_delete = null;

    $(document).ready(function(){

        $('.pai-del-menu').hide();
        //$('del-menu')

    $(".pai-del-row").click(function(e){
        var pai_x = e.pageX;
        var pai_y = e.pageY;

        $('.pai-del-menu').css({left: pai_x, top: pai_y});

        $('.pai-del-menu').show();
        $('.pai-del-menu').attr('tabindex',-1).focus();
        pai_to_delete = $(this).parent();
    });

    $('.pai-del-menu').blur(function(){
        $(this).hide();
        //pai_to_delete = null;
    });

    $('.pai-del-menu').click(function(){
            kendo.confirm("Are you sure that you want to delete this row?").then(function () {
                        //if user chose Yes
                //kendo.alert("You chose the Ok action.");
                //$(this).hide();
                console.log("pai_to_delete = ", pai_to_delete);
                        $(pai_to_delete).remove();
            }, function () {
                    //if user chose No
                pai_to_delete = null;
                //kendo.alert("You chose to Cancel action.");
            });

    });

    });

HTML：

<div class = 'row'>
    <div class="pai-del-row">...</div>
    &nbsp;
    <div>Row1</div>
</div><br>
<div class = 'row'>
    <div class="pai-del-row">...</div>
    &nbsp;
    <div>Row2</div>
</div><br>
<div class = 'row'>
    <div class="pai-del-row">...</div>
    &nbsp;
    <div>Row3</div>
</div><br>
<div class = 'row'>
    <div class="pai-del-row">...</div>
    &nbsp;
    <div>Row4</div>
</div><br>

<div class="pai-del-menu">Delete</div>

【讨论】：

如果您有任何问题，请告诉我 :)

【解决方案2】：

就像添加confirm对话框一样简单，如果用户按“是”，则删除，否则不删除

$('.pai-del-menu').click(function(){
    $(this).hide();
    if ( confirm('Are you sure you want to delete this ?') ) {
        pai_to_delete.remove();
    }
});

FIDDLE

【讨论】：

感谢您的回复...是否可以添加是或否？？
当然，但是你需要一个自定义的确认弹出窗口，并添加一个插件等。你不能改变原生的
@adeno 我用 kendo ui 进行了更新，但它不起作用...你能告诉我如何实现它吗？ jsfiddle.net/su301f1u/3
我真的不知道剑道是怎么用的，好多年没用过了

【解决方案3】：

您应该使用 sweet alert 2 插件来显示带有确认按钮的自定义模式

https://limonte.github.io/sweetalert2/

swal({
 title: 'Are you sure?',
 text: "You won't be able to revert this!",
 type: 'warning',
 showCancelButton: true,
 confirmButtonColor: '#3085d6',
 cancelButtonColor: '#d33',
 confirmButtonText: 'Yes, delete it!'
}).then(function () {
   swal(
  'Deleted!',
  'Your file has been deleted.',
  'success'
  )
})

【讨论】：