javascript - 在加载 Jqgrid 之前和加载网格之后我应该在哪里使用方法来阻止屏幕？

Question

我已经用 java 脚本编写了一个阻止屏幕和取消阻止屏幕的功能。阻止屏幕意味着，它会阻止屏幕，因此用户无法单击任何内容(加载器图标出现在屏幕上)。

UIBlocker有两种方法。

1. UIBlocker.blockScreen()   // It blocks the screen.
2. UIBlocker.unblockScreen()  // It unblocks the screen.

现在，我需要在加载 JQGrid 时屏蔽屏幕。我想问一下我应该在哪里使用UIBlocker.blockScreen()和UIBlocker.unblockScreen()？

根据我的发现，UIBlocker.blockScreen 应该在 beforeRequest 事件中使用，因为它在请求数据之前触发。但是还有一些其他事件会在加载之前触发，例如 beforeProcessing,loadBeforeSend。所以我仍然对此感到困惑。

第二件事是我应该在哪里使用unblockScreen。在 loadComplete 或 gridComplete 中？

在这里，我找到了jqgrid的执行顺序，

beforeRequest
loadBeforeSend
serializeGridData
loadError (if a error from the request occur - the event from steps 5 till 7 do not execute. If there is no error the event 4. does not execute and we continue to with the step 5.)
beforeProcessing
gridComplete
loadComplete

现在建议我，我应该在哪里使用 BlockScreen 和 unblockScreen？

Answer 1

您可以考虑首先使用 loadui: "block"选项。这是在从服务器加载数据期间阻止网格 的标准方法。它不会挡住整个屏幕(网络浏览器)。

如果上述方式不是您所需要的，那么您可以实现替代阻塞。解决方案将取决于 jqGrid 的版本和您使用的 jqGrid 的分支(free jqGrid，商业版 Guriddo jqGrid JS 或版本 <=4.7 的旧 jqGrid)。你写道你使用retro version 4.4.4。如果您没有那么多可能性，推荐的方法是使用以下选项/回调:

loadui: "disable",  // remove the standard grid blocking
loadBeforeSend: function () {
    UIBlocker.blockScreen(); // block the grid/screen
    return true;    // allow request to the server
},
beforeProcessing: function () {
    UIBlocker.unblockScreen(); // unblock the grid/screen
    return true;    // process the server response
},
loadError: function (jqXHR, textStatus, errorThrown) {
    UIBlocker.unblockScreen(); // unblock the grid/screen

    // display the eror message in some way
    alert("HTTP status code: " + jqXHR.status + "\n" +
        "textStatus: " + textStatus + "\n" +
        "errorThrown: " + errorThrown);
}

提醒一下，4.4.4版本真的是3.5年前发布的复古版本。您应该考虑将其升级到 free jqGrid 的当前版本 (4.13.4) .它是 jqGrid 的分支，我在将主分支商业化并将其重命名为 Guriddo jqGrid JS 后开发了它(参见 the old post 和 the price list )。 Free jqGrid 可以在与您当前使用的旧版本 4.4.4 相同的许可协议(protocol)下免费使用。

如果您要使用新版本的 jqGrid，那么推荐的方法是覆盖 jqGrid 使用的 progressBar 方法

$.jgrid.extend({
    progressBar: function (options) {
        if (options.method === "show") {
            //alert("start blocking");
            UIBlocker.blockScreen();
        } else {
            //alert("stop blocking");
            UIBlocker.unblockScreen();
        }
    }
});