前端页面Sweet Alert自定义多按钮跳转

前端Sweet Alert自定义多按钮跳转 —— 沙洲

Sweet Alert是一款简洁美观的弹出框工具，作为原生alert的替代更加容易、更加美观。但是其功能比较受限制，通常按钮只有确认取消两种，自定义的操作也比较受限制。

最近给公司改项目，需要实现在弹出框中提供两个跳转选项，让用户既可以选择继续编辑其他信息或者返回列表界面。作为一个纯后端人员，既不懂Javascript，也不懂AJAX，完成这个费了一番功夫，特意进行记录。页末附有源代码，有需自取！

Sweet Alert介绍

安装Sweet Alert

$ npm install sweetalert

简单介绍一下基本用法，具体可以参看这篇文章SweetAlert详解。

swal("恭喜","添加成功","success");

swal({
     title:"恭喜",
     text:"添加成功",
     type:"success"
});

除了这些之外，还有一些常用的配置项帮助我们更好的使用Sweet Alert，如下所示：

常用配置项

自定义跳转实现

首先发送保存客户的AJAX请求，在成功后调用swal()，注意最好自定义swal的参数，否则弹出框只有一个确认按钮。在第一个参数位置输入下面的对象，Sweet Alert会自动解析这个对象并进行设置：

{
    title: "保存成功！",
    text: "请选择 返回客户列表 或者 继续编辑该客户其他信息", //设置弹出框的提示文本
    type: "success", //设置弹出框的图标，同样有“warning”、“error”、“info”
    confirmButtonText: "继续编辑", //自定义确认按钮的文本
    cancelButtonText: "返回列表", //自定义取消按钮的文本
    showCancelButton: "true", //显示取消按钮
    showConfirmButton: "true", //取消确认按钮
    reverseButtons: "false"
}

第二步，在swal的第二个参数位置定义一个匿名函数实现自定义跳转的功能。注意！！！函数的参数一定要是isConfirm，用户如果点击了弹出框的确认按钮，isConfirm就会被设置为true，否则设置为false。我们通过对这个参数进行判断，就可以实现跳转向不同的URL。

function(isConfirm) {
    console.log(isConfirm);
    if(isConfirm) {
        //继续编辑详细信息
        var str = JSON.parse(sendResult);
        window.location.href = "${pageContext.request.contextPath }/customer/detail/……";
    } else {
        //返回列表
        window.location.href = "${pageContext.request.contextPath}/customer/……";
    }
}

下面是全部的源代码：

     function saveCustomer() {
                $.ajax({
                    url: path + "/customer/save/********",
                    type: "post",
                    datatype: "multipart/form-data",
                    data: $("#customerInfo").serialize(),
                    success: function (sendResult) {
                        console.log(sendResult);
                        swal({
                            title: "保存成功！",
                            text: "请选择 返回客户列表 或者 继续编辑该客户其他信息",
                            type: "success",
                            confirmButtonText: "继续编辑",
                            cancelButtonText: "返回列表",
                            showCancelButton: "true",
                            showConfirmButton: "true",
                            reverseButtons: "false"
                        }, function(isConfirm) {
                            console.log(isConfirm);
                            if(isConfirm) {
                                //继续编辑详细信息
                                var str = JSON.parse(sendResult);
                                window.location.href = "${pageContext.request.contextPath }/customer/detail/……";
                            } else {
                                //返回列表
                                window.location.href = "${pageContext.request.contextPath}/customer/…………";
                            }
                        })
                    },
                    error: function (errorMsg) {
                        console.log("错误！");
                    }
                });
            };

通过这种方式，我们就使得Sweet Alert的多个按钮都具有了跳转功能，可以指向不同的页面了。

最后编辑于：2020.03.30 22:34:02