Question

再次提出另一个问题：）

这次我需要在加载Child行时显示一些进度。由于Api调用相对需要很少的时间来返回数据，我确实希望显示一些进度，除非点击父行的用户完全不知道是否有调用来查看其子行。

我做了什么：

我写了一个样式表类，其中有一个

架small.gif

图像如下：

tr.loading td.details-control {
    background: url('/Images/loader-small.gif') no-repeat center center;
}

并像这样应用：

$('#accountManagerEarningsDataTable tbody').on('click', 'td.details-control', function () {

        var tr = $(this).closest('tr');
        var row = table.row(tr);

        try {
            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                //Calling the loading Class ------>
                tr.addClass('loading');

                // Open this row
                var arrForTable1 = [];
                var arrForTable2 = [];

                totalBrokerage = 0;
                totalRetailBrokerage = 0;
                totalSelfServiceBrokerage = 0;

                console.log('You selected: ' + row.data().AccountManagerID);

                var settings = {
                    "columnDefs": [
                    { targets: 1, align: "right", decimals: 0 },
                    { targets: 2, align: "right", decimals: 0 },
                    { targets: 3, align: "right", decimals: 0 },
                    { targets: 4, align: "right", decimals: 2 },
                    { targets: 5, align: "right", decimals: 2 }
                    ]
                };

                //problems with asynchoronus call back
                var response = organization_GetAccountManagerDetailEarningsAccountData(row.data(), purl2, pcontext);

                if (response.success === "true") {
                    for (var i = 0; i < response.value.length; i++) {

                        for (var j = 0; j < response.value[i].Securities.length; j++) {

                            var itemRow2 = {};
                            itemRow2["Security ID"] = response.value[i].Securities[j].SecurityId;
                            itemRow2["Trades"] = response.value[i].Securities[j].Trades;
                            itemRow2["Buy Qty"] = response.value[i].Securities[j].BuyQuantity;
                            itemRow2["Sell Qty"] = response.value[i].Securities[j].SellQuantity;
                            itemRow2["Total Brkg"] = response.value[i].Securities[j].Effective_Brokerage;
                            itemRow2["Online Brkg"] = response.value[i].Securities[j].Online_Brokerage;
                            arrForTable2.push(itemRow2);

                            totalBrokerage = totalBrokerage + parseFloat(response.value[i].Securities[j].Effective_Brokerage);
                            totalSelfServiceBrokerage = totalSelfServiceBrokerage + parseFloat(response.value[i].Securities[j].Online_Brokerage);
                        }

                        totalBrokerage = Math.round(totalBrokerage * 100) / 100;
                        totalSelfServiceBrokerage = Math.round(totalSelfServiceBrokerage * 100) / 100;
                        totalRetailBrokerage = Math.round(totalRetailBrokerage * 100) / 100;



                        var itemRow1 = {};
                        itemRow1["Account ID"] = response.value[i].AccountId;
                        itemRow1["Account Name"] = response.value[i].AccountName;
                        itemRow1["..."] = '<div class="alert alert-info" role="alert">' + buildHtmlTable(arrForTable2, 'table2x' + j, settings) + '<p>Total Brokerage ' + numberWithCommas(totalBrokerage) + '</p></div>';
                        arrForTable1.push(itemRow1);
                        arrForTable2 = [];

                        totalBrokerage = 0;
                        totalRetailBrokerage = 0;
                        totalSelfServiceBrokerage = 0;

                    }

                    tr.removeClass('loading');
                    htmlTable1 = buildHtmlTable(arrForTable1, 'table1x' + i);
                    row.child(htmlTable1).show();
                    tr.addClass('shown');
                }
                else {
                    row.child('<table><tr><td>' + response.value[0].AccountId + '</td></tr></table>').show();
                    tr.addClass('shown');
                };
            }
        } catch (e) {
            console.log(e.message);
        }

    });

问题：

Firefox会在用户点击后很好地显示进度图像，但Edge和Chrome不会显示。当我从相应浏览器的开发人员工具进行调试时，两个浏览器都越过了这段代码。

它的浏览器兼容问题？有解决方案吗？请帮帮我。

Answer 1

如果是chrome，则在进行服务器调用时显示加载栏时会出现此问题。在进行服务电话时，请进行以下更改。首先将类加载添加到表

tr.addClass('loading');

之后通过提供超时功能进行服务调用

setTimeout(function(){
     var response = organization_GetAccountManagerDetailEarningsAccountData(row.data(), purl2, pcontext);
     ......
    //Your service calls and response call backs
},1);

在提供超时（比如1ms）时，Chrome会有时间将加载栏绑定到DOM，在其他情况下，DOM对象无法显示微调器。

在子行加载时显示进度

1 个答案: