javascript - 用户反馈的 SweetAlert2 更新计数器

Question

有没有办法更新 SweetAlert2 警报上的文本，以显示在一个非常长的 javascript 循环中已处理的行数？不幸的是，人们一直在离开页面，然后只有一半的行得到保存。

我想我也许可以使用 jQuery 类型语法，但不确定正确的选择可能是什么。

$('#rowsprocessed').text(count);

swal({
    title: 'Save Order.',  
    input: 'checkbox',                    
    inputValue: 0,
    inputPlaceholder: 'Remove Zero(s) Quantity Item(s) Before Saving the Order?',
    html: 'For large templates this may take a few moments. This message will automatically close when the process is complete.',
    type: 'info',
    showCancelButton: true,
    confirmButtonText: 'Submit',
    showLoaderOnConfirm: true,
    preConfirm: function(checkbox) {
        return new Promise(function(resolve, reject) {
            removeZeros = checkbox;

            setTimeout(function() { 
                swal.showLoading();
                $.post("/components/com_sails/views/neworderform/saveOrderHeader.php",
                        {
                            orderid: orderid,
                            accountid: accountid,
                            buyerid: buyerid,
                            vendorid: vendorid,
                            ponumber: ponumber,
                            specialinstr: specialinstr,
                            orderDate: orderDate,
                            shipDate: shipDate,
                            cancelDate: cancelDate
                        },
                        function (result) {
                            if (result.return == 1) {                           
                                // assign order id to holder field
                                $('#orderInput').jqxInput('val', result.ordernbr);

                                // loop through our rows and save depending on the removeZero marker
                                var rows = $('#jqxgrid').jqxGrid('getdisplayrows');
                                var rowsToRemove = [];
                                var linessaved = 0;


                                for (var i = 0; i < rows.length; i++) {
                                    var row = rows[i];

                                    // get row info for delete 
                                    if ((removeZeros == 1) && row['quantity'] == 0) {
                                        rowsToRemove.push(row.uid);
                                    }

                                    // run database update 
                                    $.ajax({
                                        type: 'POST',
                                        url: '/components/com_sails/views/neworderform/saveOrderLine.php',
                                    data: {
                                        orderid: result.ordernbr,
                                        removezeros: removeZeros,
                                        rowdata: row
                                    },
                                    success: function (rowSaveData) {
                                        // alert('rowSaveData ' + rowSaveData.return + " " + rowSaveData.isbn + "  " + rowSaveData.action + " " + rowSaveData.msg + " row.uid: " + row.uid);    
                                        // if there is a problem what do we do????

                                        if (rowSaveData.return == 1) {                                                          
                                            $('#rowsprocessed').text(i);

                                        }
                                        if (rowSaveData.return == -1) {
                                            // add to error message? 
                                        }

                                    },
                                    datatype: 'json',
                                    async: false});

                                }

                                if (removeZeros == 1) {
                                    // delete our zero rows 
                                    var commit = $("#jqxgrid").jqxGrid('deleterow', rowsToRemove);
                                    $('#jqxgrid').jqxGrid('render');
                                    lastselectedrow = -1;

                                }

                                // set save marker?? 
                                isDirty = false;

                            }
                            else {
                                // there was an error saving the header
                                // need to get this logged
                                alert('Error Saving Order. Details: ' + result.msg);
                            }

                        }, "json");

                resolve();

            }, 2000);
        });
    },
    allowOutsideClick: false
}).then(function() {
    swal({
        type: 'success',
        title: 'Order saved',   
        html: '<b><div id="rowsprocessed">0</div></b> rows saved.',
        timer: 4000
    });
})

Answer 1

当然可以，您只需在 {html: "..."} 中传入一个附加元素，您就可以将其用作更新用户的方式。

类似的东西:

{
    ...
    html: 'For large templates this may take a few moments. This message will automatically close when the process is complete.<br/><span class="swal2-    status"></span>',
    ...
}

然后使用这个语法更新:

var $status = $('.swal2-status');
$status.html("I'm an update");

请看这里的例子: https://jsfiddle.net/1mvnxp3L/