jqGrid触发器“；“正在加载…”；覆盖层

有人知道如何触发加载网格时显示的股票jqGrid“Loading…”覆盖吗？我知道我可以不费吹灰之力地使用jquery插件，但我希望我的应用程序的外观与jqGrid中已经使用的应用程序的外观保持一致

我发现的是：

• n8

---

如果您正在搜索类似于

DisplayLoadingMessage（）

函数的内容。它不存在于jqGrid中。您只能将jqGrid的loadui选项设置为enable（默认）、disable或block。我个人更喜欢街区。（见附件）。但我认为这不是你想要的

如果您喜欢来自jqGrid的“加载…”消息，那么您唯一能做的就是制作相同的消息。我将在这里解释jqGrid如何显示此消息：将创建两个隐藏的div。如果您有一个id=list的网格，则该div将如下所示：

加载。。。

其中文本“Loading…”或“Lädt…”（德语）来自

$.jgrid.defaults.loadtext

。div的id将由“lui_uu”或“load_u”前缀和网格id（“列表”）构成。在发送ajax请求之前，jqGrid会使一个或两个div可见。如果loadui选项处于启用状态，它将为第二个div（id=“load\u list”）调用

jQuery.show（）

函数。但是，如果loadui选项为block，则将显示与

.show（）

函数相关的两个div（id=“lui\u list”和id=“load\u list”）。ajax请求结束后，将为一个或两个div调用jQuery函数。就这些

您将在

ui.jqgrid.css

或

jquery-ui-1.8.custom.css

中找到所有css类的定义

---

现在您已经有了足够的信息来重现jqGrid“Loading…”消息，但如果我是您，我会再考虑一次您是否真的想这样做，或者该方法是否更符合您的目标。

要覆盖的样式是[.ui jqGrid.Loading]。

您可以调用$（“#load"”）.show（）和.hide（）哪里是网格的id。

我使用

        $('.loading').show();
        $('.loading').hide();

---

它工作得很好，没有创建任何新的div

我刚刚在它工作的JQ网格的onsetrow事件中把它放在第行下面

$（'.loading'）.show（）

它正在消耗$（'div.load'）.show（）； 这甚至对其他组件也很有用

$('#editDiv').dialog({
            modal : true,
            width : 'auto',
            height : 'auto',
            buttons : {
                Ok : function() {
                    //Call Action to read wo and 
                     **$('div.loading').show();**

                    var status = call(...)
                    if(status){
                        $.ajax({
                            type : "POST",
                            url : "./test",
                            data : {
                                ...
                            },
                            async : false,
                            success : function(data) {

                                retVal = true;
                            },
                            error : function(xhr, status) {


                                retVal = false;
                            }
                        });
                    }
                    if (retVal == true) {
                        retVal = true;
                        $(this).dialog('close');
                    }
                    **$('div.loading').hide();**
                },
                Cancel : function() {
                    retVal = false;
                    $(this).dialog('close');
                }

            }
        });

正如@Oleg所提到的，在开发基于ajax的应用程序的过程中，它们有很多很好的特性。使用它，您可以阻止整个UI或一个名为

对于jqGrid，您可以将网格放在div（sampleGrid）中，然后按如下方式阻止网格：

$.extend($.jgrid.defaults, {
    ajaxGridOptions : {
        beforeSend: function(xhr) {
            $("#sampleGrid").block();
        },
        complete: function(xhr) {
            $("#sampleGrid").unblock();
        },
        error: function(jqXHR, textStatus, errorThrown) {
            $("#sampleGrid").unblock();
        }
    }
});

简单地说，就是要展示：

$("#myGrid").closest(".ui-jqgrid").find('.loading').show();

然后再把它藏起来

$("#myGrid").closest(".ui-jqgrid").find('.loading').hide();

---

如果您不想阻塞并且不想使用内置的ajax调用来获取数据

datatype=“本地”

您可以像这样扩展jqgrid函数：

$.jgrid.extend({
    // Loading function
    loading: function (show) {
        if (show === undefined) {
            show = true;
        }
        // All elements of the jQuery object
        this.each(function () {
            if (!this.grid) return;
            // Find the main parent container at level 4
            // and display the loading element
            $(this).parents().eq(3).find(".loading").toggle(show);
        });
        return show;
    }
});

然后是一个简单的电话

$("#myGrid").loading(); 

或

显示所有网格上的加载（当然，更改每个网格的网格id）或

---

要隐藏加载元素，请以特定网格为目标，以防在同一页面上有多个网格

感谢您的详细响应！哇，你提供的选项链接真的让我可以进入jqGrid beast的腹部，遗憾的是，直到现在我还完全不知道。我发现jqGrid文档有点违反直觉，很难理解，但我正在对此进行热身。这里有一个学习曲线。我将与“load_list”div一起玩，看看能否让它玩得更好。我最终可能会按照规定使用jQuery BlockUI。但至少我觉得我现在有了选择（没有双关语的意思）。我没花多少时间就明白了，要实现我的目标，我只需要做以下几件事：$（“#加载列表”）.show（）$（“加载列表”）.css（“z-index”，1000）；和$（“#加载列表”）.hide（）$（“加载列表”）.css（“z-index”，101）；我必须更改并恢复z索引，以便在自定义对话框上显示div。我只想分享一下。这只适用于网格中间的“加载…”，而不是在加载时阻止网格访问的窗口覆盖。请注意，当张贴到一个有其他几个响应的老线程时，尤其是当其中一个被接受时。您需要解释为什么您的答案比所有现有答案都好。谢谢！！这个答案比其他答案好，因为（1）它非常短，（2）它处理同一页面上两个网格的情况。

$("#myGrid").loading(true); 

$("#myGrid").loading(false);