JS swal() 弹出层的用法

最新推荐文章于 2023-07-07 09:22:03 发布
最新推荐文章于 2023-07-07 09:22:03 发布
阅读量3.8k 收藏 2
点赞数 1
分类专栏： JS PHP Laravel
懒虫
本文链接：https://blog.csdn.net/xcbzsy/article/details/108118399
版权
PHP 同时被 3 个专栏收录
106 篇文章 1 订阅
订阅专栏
JS
63 篇文章 2 订阅
订阅专栏
Laravel
38 篇文章 1 订阅
订阅专栏 
$grid->actions(function ($actions){
            $actions->disableDelete();
            $actions->disableEdit();
            $actions->disableView();
            $back_url = $_SERVER["QUERY_STRING"];
            if (\request('_scope_') == 'trashed') {
                $actions->append('<a class="btn btn-sm btn-default grid-row-restore" data-id="'.$actions->getKey().'">恢复</a>');
            }else{
                $actions->append('<a href="/admin/units/'.$actions->getKey().'/units_change?'.$back_url.'" class="btn btn-sm btn-default" >修改</a>');
                $actions->append('<a class="btn btn-sm btn-default grid-row-delete" data-id="'.$actions->getKey().'">删除</a>');
            }
        });
        Admin::script("$('.grid-row-delete').unbind('click').click(function() {
            var id = $(this).data('id');
            swal({
                title: \"确认删除?\",
    	      // text: "请扫描用户手机上的付款码",
    	      //  inputPlaceholder: "请填写付款码数字",
                type: \"warning\",
              // type: "input", 
                showCancelButton: true,
                confirmButtonColor: \"#DD6B55\",
                showLoaderOnConfirm: true,
                confirmButtonText: \"确认\",
                cancelButtonText: \"取消\",
             //  imageUrl: "/assets/images/icon/scancode.gif",
            //  closeOnConfirm: false,
			//  closeOnCancel: false
                preConfirm: function() {
                    return new Promise(function(resolve) {
                        $.ajax({
                            method: 'post',
                            url: '/admin/units/' + id,
                            data: {
                                _method:'delete',
                                _token:LA.token,
                            },
                            success: function (data) {
                                $.pjax.reload('#pjax-container');
                                resolve(data);
                            }
                        });
                    });
                }
            }).then(function(result) {
                var data = result.value;
                if (typeof data === 'object') {
                    if (data.status) {
                        swal(data.message, '', 'success');
                    } else {
                        swal(data.message, '', 'error');
                    }
                }
            });
        });");
        Admin::script("$('.grid-row-restore').unbind('click').click(function() {
            var id = $(this).data('id');
            swal({
                title: \"确认恢复?\",
                type: \"warning\",
                showCancelButton: true,
                confirmButtonColor: \"#DD6B55\",
                confirmButtonText: \"确认\",
                showLoaderOnConfirm: true,
                cancelButtonText: \"取消\",
                preConfirm: function() {
                    return new Promise(function(resolve) {
                        $.ajax({
                            method: 'post',
                            url: '/admin/units/restore',
                            data: {
                                _key:id,
                                _method:'post',
                                _token:LA.token,
                            },
                            success: function (data) {
                                $.pjax.reload('#pjax-container');
                                resolve(data);
                            }
                        });
                    });
                }
            }).then(function(result) {
                var data = result.value;
                if (typeof data === 'object') {
                    if (data.status) {
                        swal(data.message, '', 'success');
                    } else {
                        swal(data.message, '', 'error');
                    }
                }
            });
        });");

$(function () {
    $(".table-hover").addClass('table-striped');

    var url_type = getQueryVariable('type');
    // 业务主管 和 供管部主管 审批
    $('.grid-row-check').unbind('click').click(function() {
        var id = $(this).data('id');
        var status = $(this).data('status');
        swal({
            title: "确认审批通过?",
            type: "success",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "确认",
            showLoaderOnConfirm: true,
            cancelButtonText: "取消",
            preConfirm: function() {
                return new Promise(function(resolve) {
                    $.ajax({
                        method: 'post',
                        url: '/admin/tmpfeeds/check_store',
                        data: {
                            id:id,
                            status:status,
                            _token:LA.token,
                        },
                        success: function (data) {
                            $.pjax.reload('#pjax-container');
                            swal(data.message, '', 'success');
                            resolve(data);
                        }
                    });
                });
            }
        }).then(function(result) {
            var data = result.value;
            if (typeof data === 'object') {
                if (data.status) {
                    swal(data.message, '', 'success');
                } else {
                    swal(data.message, '', 'error');
                }
            }
        });
    });
    // 统一 审批驳回
    $('.grid-row-reject').unbind('click').click(function() {
        var id = $(this).data('id');
        var status = $(this).data('status');
        swal({
            title: "确认驳回?",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "确认",
            showLoaderOnConfirm: true,
            cancelButtonText: "取消",
            preConfirm: function() {
                return new Promise(function(resolve) {
                    $.ajax({
                        method: 'post',
                        url: '/admin/tmpfeeds/check_store',
                        data: {
                            id:id,
                            status:status,
                            _token:LA.token,
                        },
                        success: function (data) {
                            $.pjax.reload('#pjax-container');
                            swal(data.message, '', 'success');
                            resolve(data);
                        }
                    });
                });
            }
        }).then(function(result) {
            var data = result.value;
            if (typeof data === 'object') {
                if (data.status) {
                    swal(data.message, '', 'success');
                } else {
                    swal(data.message, '', 'error');
                }
            }
        });
    });
    // 供管部经理点击审批
    $('.grid-row-lead-check').unbind('click').click(function() {
        $('body,html').animate({
                scrollTop: 0
            },
            500);
        var id = $(this).data('id');
        var status = $(this).data('status');
        $(".indate").datetimepicker({"format":"YYYY-MM-DD","locale":"zh-CN","allowInputToggle":true});
        $('.tmp_id').val(id)
        $('.tmp_status').val(status)
    });
    // TODO 供管部主管 审批模板
    var template = "" +
        " <div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\n" +
        "        <div class=\"modal-dialog modal-md\" id=\"modalDialog\" role=\"document\" style=\"width:600px\">\n" +
        "            <div class=\"modal-content\" >\n" +
        "                <div class=\"modal-header\">\n" +
        "                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\n" +
        "                    <h4 class=\"modal-title\">供管部经理审批</h4>\n" +
        "                </div>\n" +
        "                <form class=\"form-horizontal ajax_modify\" >\n" +
        "                    <div class=\"box-body\">\n" +
        "                        <div class=\"form-group\">\n" +
        "                            <div class=\"col-md-12\">\n" +
        "                                <label for=\"indate\" class=\"asterisk control-label col-md-3\" title=\"有效期\">有效期:</label>\n" +
        "                                <div class=\"col-md-7\">\n" +
        "                                    <input type=\"text\" id=\"indate\" class=\"form-control col-sm-12 indate\" name=\"indate\" placeholder=\"\" index=\"1\" required=\"1\">\n" +
        "                                </div>\n" +
        "                            </div>\n" +
        "                        </div>\n" +
        "                    </div>\n" +
        "                    <div class=\"modal-footer\">\n" +
        "                        <input type=\"hidden\" class=\"tmp_id\" name=\"id\">\n" +
        "                        <input type=\"hidden\" class=\"tmp_status\" name=\"status\">\n" +
        "                        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">关闭</button>\n" +
        "                        <button type=\"button\" class=\"btn btn-primary\" οnclick=\"ajax_modify_submit()\">提交</button>\n" +
        "                    </div>\n" +
        "                </form>\n" +
        "            </div>\n" +
        "        </div>\n" +
        "    </div>" +
        "</div>" +
        "";

    if(url_type == 2){
        $('.table-responsive').append(template)
        $(".indate").datetimepicker({"format":"YYYY-MM-DD","locale":"zh-CN","allowInputToggle":true});
    }
    // 获取url
    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }


});

function ajax_modify_submit(){
    var indate = $('.indate').val();
    var id = $('.tmp_id').val();
    var status = $('.tmp_status').val();
    if(!indate){
        swal('请选择有效期', '', 'error');
        return false;
    }
    swal({
        title: "确认审批通过?",
        type: "success",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "确认",
        showLoaderOnConfirm: true,
        cancelButtonText: "取消",
        preConfirm: function() {
            return new Promise(function(resolve) {
                $.ajax({
                    method: 'post',
                    url: '/admin/tmpfeeds/check_store',
                    data: {
                        id:id,
                        status:status,
                        indate:indate,
                        _token:LA.token,
                    },
                    success: function (data) {
                        $.pjax.reload('#pjax-container');
                        swal(data.message, '', 'success');
                        resolve(data);
                    }
                });
            });
        }
    }).then(function(result) {
        var data = result.value;
        if (typeof data === 'object') {
            if (data.status) {
                swal(data.message, '', 'success');
            } else {
                swal(data.message, '', 'error');
            }
        }
    });
}

 //删除工单
function doDel(id){
	 swal({
		title: "确定要删除工单吗？",
		/* text: "删除之后无法恢复该数据!", */
		type: 'warning',
		showCancelButton: true,
		confirmButtonColor: "#DD6B55",
		confirmBu


ttonText: "确定",
		cancelButtonText: "取消",
		closeOnConfirm: false
		},
		function (isConfirm) {
			if(isConfirm){
				$.ajax({
					url:'<%=path%>/worktask/del',
					method:'post',
					data:{"ID":id},
					success:function(str){
						var data = eval("("+str+")");
						 if(data.success){
							 // 刷新数据
							 window.location.reload();
							 swal('提示','删除工单成功!');
						 }else{
							 swal('提示','删除工单失败!');
						 }
					 }
				 });
			}
		}); 
 }

//删除工单
	function doDel(id){
		 swal({
			title: "确定要删除该工单吗？",
			/* text: "删除之后无法恢复该数据!", */
			icon: 'warning',
			buttons: {
				  cancel: {
					    text: "取消",
					    value: "",
					    visible: true,
					    closeModal: true,
					  },
					  confirm: {
					    text: "确定",
					    value: true,
					    visible: true,
					    closeModal: true
					  }
					},
			confirmButtonColor: "#DD6B55",
			}).then(function(isConfirm){
				if(isConfirm){
					console.log("点击确定")
					 $.ajax({
						url:'<%=path%>/worktask/del',
						method:'post',
						data:{"ID":id},
						success:function(str){
							var data = eval("("+str+")");
							 if(data.success){
								 // 刷新数据
								 window.location.reload();
								 swal('提示','删除工单成功!');
							 }else{
								 swal('提示','删除工单失败!');
							 }
						 }
					 }); 
				}else{
					console.log("点击取消");
				}
			})
	 }
新老农
关注
专栏目录
swal弹窗_swal的几种用法
weixin_39629352的博客
12-22 3149
1，弹出提示框，点击确认，进行下一步操作swal({title: "操作提示",text: `是否删除名为“${query}”的反例？`,type: "warning",showCancelButton: true,confirmButtonColor: "#4D9BFF",cancelButtonText: "取消",confirmButtonText: "是的，确定删除！",closeOnCo...
swal弹窗html,js插件---弹出层sweetalert2（总结）
weixin_39867066的博客
07-01 4978
js插件---弹出层sweetalert2(总结)一、总结一句话总结：sweetalert2的效果非常好，效果比较Q萌，移动端适配也比较好，感觉比layer.js效果好点1、SweetAlert2和SweetAlert的区别？SweetAlert2是SweetAlert-js的升级版本，它解决了SweetAlert-js中不能嵌入HTML标签的问题，并对弹出对话框进行了优化，同时提供对各种表单元素...
js多种弹出层的方式
01-05
多种层弹出的方法，JS脚本，方式很多值得查看拥有的
Swal有哪些用法？
最新发布
m0_57236802的博客
07-07 804
这只是一些基本的用法。Swal 提供了更多的选项和功能，包括定制外观、验证用户输入、处理异步任务等。更多的细节，你可以在 SweetAlert2 的官方文档中查看。SweetAlert2 (Swal) 是一个用于创建美观对话框的 JavaScript 库。
js插件--1.swal
热门推荐
村西头的俏寡妇
10-17 1万+
1      引入   &lt;link rel="stylesheet" href="&lt;%=path %&gt;/js/sweetalert/sweetalert.css"/&gt; &lt;script src="&lt;%=path %&gt;/js/sweetalert/sweetalert-dev.js"&gt;&lt;/script&gt;
js_swal的使用
qq_34078230的博客
09-04 5662
swal({   title: "确认删除?",   text: "Your will not be able to recover this imaginary file!",   type: "warning",   showCancelButton: true,   confirmButtonColor: "#DD6B55",   confirmButtonText: "确认",   can
js swal()弹出框
weixin_30267785的博客
06-29 3339
做前端开发的时候时常会遇到修改成功、新增成功这类弹出框，用alert的话未免有点太low了，而swal()是一个简单又实用的弹出框方法 alert 弹出框样式如下： swal() 弹出框样式如下： 代码如下： swal("success", "edit successfully", "success"); 当然，还需要引入sweetale...
swal弹窗_swal() 弹出层的用法
weixin_39622399的博客
12-22 1392
swal()方法是一个提示框；swal({title: "",text: "请扫描用户手机上的付款码",type: "input",showCancelButton: true,closeOnConfirm: false,cancelButtonText: "取消",confirmButtonText: "确认",imageUrl: "/assets/images/icon/scancode.gi...
javascript swal不能用？
weixin_45564209的博客
01-07 538
要引入这两个文件 <link rel="stylesheet" href="/static/admin/plugins/sweetalert/sweetalert.css"/> <script src="/static/admin/plugins/sweetalert/sweetalert.min.js"></script>
JavaScript介绍及用法示例
晓康的博客
12-04 562
1、JavaScript介绍 JavaScript是Web编程语言，是Web开发人员必须学习的3门语言中一门：HTML定义页面的内容，CSS定义了网页的布局，JavaScript控制网页行为。 JavaScript是一种轻量级的编程语言，可插入HTML页面的编程语言，插入HTML页面后，可由所有的现代浏览器执行。 2、JavaScript 用法 HTML中的脚本必须位于<script>和</script>标签之间 ...
sweetalert.min.js
09-21
sweetalert.min.js swal({title:"转发成功",text:"短信发送成功",type:"success"}) sweetAlert("只能选择一条记录", "", "error"); swal({ title: "您确定要锁定吗？", text: "您确定要锁定这条数据？", type: "warning", showCancelButton: true, closeOnConfirm: false, confirmButtonText: "确定", cancelButtonText:"取消", confirmButtonColor: "#ec6c62" }, function() { });
3个用于弹出登录框的JQuery弹出浮动层
06-14
jQuery，一个广泛使用的JavaScript库，提供了一系列强大的工具来实现动态和交互式的界面效果，包括弹出浮动层。本文将详细介绍三个用于创建JQuery弹出登录框的方法，帮助你提升网站的用户交互性。 1. **jQuery UI ...
11个jquery弹出层插件总会有你喜欢的和适合你的
06-14
jQuery弹出层插件则是用于创建各种弹窗、模态对话框、提示框或者信息窗口的工具，极大地丰富了网页的用户体验。在标题和描述中提到的“11个jQuery弹出层插件”，我们将探讨这些插件的特点、应用场景以及如何使用它们...
swal()弹窗多个按钮
qq_40386177的博客
08-13 1780
swal({ title: "用户是否已经付款?", icon: "warning", dangerMode: true, buttons: { cancel: "取消", defeat: "未付款", confirm: { text:"已付款", value: "confirm" } } }).then((value) => { switch (value) { case "defeat":
swal 用法
weixin_34199405的博客
08-31 4310
//点击确定后执行方法 swal({ title: msg.retInfo, text: "", type: "success", ...
swal
yonghutwo的专栏
07-09 938
标题： title:"表结构同步成功", 类型：error，warnning，success type:"success", 显示取消按钮： showCancelButton:false, 显示确定按钮： showConfirmButton:false, 定时关闭弹窗的计时器，单位为ms（毫秒）。 timer:2000 ...
《前端》swal()方法
BelleDiao的博客
06-03 2477
showSwal（） swal()方法是一个提示框； swal({ title: "", text: "请扫描用户手机上的付款码", type: "input", showCancelButton: true, closeOnConfirm: false, cancelButtonText: "取消", confirmButtonText: "确认", imageUrl: "/assets/images/icon/scancode.
SweetAlert笔记-在弹窗中添加输入框图片等
IT1995的博客
07-19 1146
②将输入框、列表、图片等放到这个div中（也就是innerHTML）；③swal的方法可以拿到用户是点了退出，还是确定。①用JS创建一个div；
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值