0

我正在使用 Metronic bootstrap admin 它们，它带有 sweetalert - 这是一个警报库

我要做的是在尝试从表中删除记录时发出确认警报，每一行都有一个删除按钮

现在 Metronic 已经对其进行了一些扩展，因此您现在可以使用 html 5“数据”属性以声明方式声明标题、按钮类型等。

在我的 MVC 应用程序中，以下 Razor 代码迭代并添加按钮，请注意我正在向其中添加 data-id 属性 - 想法是我可以在单击按钮时提取它以获取 id 以删除它

例如

<button data-id="@u.Id" type="button" class="btn btn-xs btn-circle red btn-delete mt-sweetalert" data-title="Are you sure?" data-type="warning" data-allow-outside-click="true" data-show-confirm-button="true" data-show-cancel-button="true" data-cancel-button-class="btn-danger" data-cancel-button-text="Cancel" data-confirm-button-text="Proceed" data-confirm-button-class="btn-info">
                                    <i class="fa fa-times"></i>
                                </button>

以下是 Metronic JS 扩展文件 - 我已经添加了几行代码，因此它会在单击确认选项时调用自定义函数。

我的想法是我可以保留 Metronic Theme 的添加内容并在我需要的页面上调用自定义函数

请注意，我还将 $(this) 上下文传递给我的自定义函数

var SweetAlert = function () {

return {
    //main function to initiate the module
    init: function () {
        $('.mt-sweetalert').each(function(){
            var sa_title = $(this).data('title');
            var sa_message = $(this).data('message');
            var sa_type = $(this).data('type'); 
            var sa_allowOutsideClick = $(this).data('allow-outside-click');
            var sa_showConfirmButton = $(this).data('show-confirm-button');
            var sa_showCancelButton = $(this).data('show-cancel-button');
            var sa_closeOnConfirm = $(this).data('close-on-confirm');
            var sa_closeOnCancel = $(this).data('close-on-cancel');
            var sa_confirmButtonText = $(this).data('confirm-button-text');
            var sa_cancelButtonText = $(this).data('cancel-button-text');
            var sa_popupTitleSuccess = $(this).data('popup-title-success');
            var sa_popupMessageSuccess = $(this).data('popup-message-success');
            var sa_popupTitleCancel = $(this).data('popup-title-cancel');
            var sa_popupMessageCancel = $(this).data('popup-message-cancel');
            var sa_confirmButtonClass = $(this).data('confirm-button-class');
            var sa_cancelButtonClass = $(this).data('cancel-button-class');

            $(this).click(function(){
                //console.log(sa_btnClass);
                swal({
                  title: sa_title,
                  text: sa_message,
                  type: sa_type,
                  allowOutsideClick: sa_allowOutsideClick,
                  showConfirmButton: sa_showConfirmButton,
                  showCancelButton: sa_showCancelButton,
                  confirmButtonClass: sa_confirmButtonClass,
                  cancelButtonClass: sa_cancelButtonClass,
                  closeOnConfirm: sa_closeOnConfirm,
                  closeOnCancel: sa_closeOnCancel,
                  confirmButtonText: sa_confirmButtonText,
                  cancelButtonText: sa_cancelButtonText,
                },
                function(isConfirm){
                   //action function on click
                    if (isConfirm){
                        swal(sa_popupTitleSuccess, sa_popupMessageSuccess, "success");


                        //custom function call added by me
                        //------------------------------------------
                        if(typeof onConfirmClick === "function")
                            onConfirmClick.call(this);
                        //------------------------------------------


                    } else {
                        swal(sa_popupTitleCancel, sa_popupMessageCancel, "error");
                    }
                });
            });
        });    

    }
}

}();

jQuery(document).ready(function() {
    SweetAlert.init();
});

我页面中的功能：

<script type="text/javascript">
    function onConfirmClick() {
        alert($(this).data('id'));
        //make Ajax call here
    }
</script>

现在的问题是，我正在获取 ($this) 但无法从按钮获取 id 或任何属性

如果我在控制台中打印 $(this) 在此处输入图像描述

只是“这个” 在此处输入图像描述

这里的问题是：

  1. 如何在我的函数中获取 data-id 属性？如果我尝试 $(this).data('id') - 我得到未定义
  2. 这是正确的方法设计吗？我希望能够在确认时调用自定义函数但不破坏 sweetalert 上的 Metronic 扩展？
4

1 回答 1

2

要将id按钮传递data-id给onConfirmClick()函数...我会尝试通过变量使其传输。

因此，单击 a.mt-sweetalert时，会触发 SweetAlert。

没有什么能阻止您拥有另一个click处理程序来将 存储id在函数可访问的变量中。

var sweetAlertId;
$(".mt-sweetalert").on("click", function(){
  sweetAlertId = $(this).data("id");
});

然后在函数中：

function onConfirmClick() {
    alert(sweetAlertId);
    //make Ajax request using sweetAlertId here!
}

简而言之，id 不会被强制通过 SweetAlert 传输！
;)

于 2017-09-05T08:32:54.677 回答