我应该在加载Jqgrid之前和加载grid之后使用方法来阻塞屏幕

Where should i use method before load Jqgrid and after load grid to block screen?

本文关键字：加载 使用方法 屏幕 之后 Jqgrid 我应该 grid      更新时间：2023-09-26

我用java脚本编写了一个功能，可以阻塞屏幕并解除屏幕阻塞。阻塞屏幕意味着，它阻塞了屏幕，所以用户不能点击任何东西(加载器图标出现在屏幕上)。

UIBlocker有两种方法

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

现在，当JQGrid正在加载时，我需要阻塞屏幕。我想问我应该在哪里使用UIBlocker.blockScreen()和UIBlocker.unblockScreen() ?

根据我的发现， ublocker。blockScreen应该在 beforeerequest 事件中使用，因为它在请求数据之前触发。但也有一些其他事件在加载前触发，如beforeProcessing, loadbeforeend 。所以我还是很困惑。

第二件事是我应该在哪里使用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?

你可以考虑首先使用loadui: "block"选项。这是在从服务器加载数据时阻塞网格的标准方式。它不会阻塞整个屏幕(web浏览器)。

如果上面的方法不是你需要的，那么你可以实现替代的阻塞。解决方案将取决于jqGrid的版本和您使用的jqGrid的分支(免费jqGrid，商业Guriddo jqGrid JS或版本<=4.7的旧jqGrid)。你写你使用复古版本 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年前发布的真正的复古版本。您应该考虑将其升级到免费jqGrid的当前版本(4.13.4)。它是jqGrid的分支，是我在将主分支商业化并将其重命名为Guriddo jqGrid JS后开发的(参见旧帖子和价格表)。免费的jqGrid可以在与您目前使用的旧版本4.4.4相同的许可协议下免费使用。

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

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

有很多与jqgrid相关的事件，例如:

  1. beforeRequest
  2. gridComplete
  3. loadComplete

查看此处的参考Jqgrid事件列表

相关文章：