Question

是否有人知道如何触发股票jqGrid“正在加载...”叠加层在网格加载时显示？我知道我可以毫不费力地使用jquery插件，但我希望能够保持我的应用程序的外观与jqGrid中已经使用的内容一致。

我发现的结果是：

jqGrid display default "loading" message when updating a table / on custom update

n8

Answer 1

如果您正在搜索DisplayLoadingMessage()功能等内容。它在jqGrid中不存在。您只能将jqGrid的 loadui 选项设置为 enable （默认），禁用或阻止。我个人更喜欢 block 。（见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options）。但我认为这不是你想要的。

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

<div style="display: none" id="lui_list"
     class="ui-widget-overlay jqgrid-overlay"></div>
<div style="display: none" id="load_list"
     class="loading ui-state-default ui-state-active">Loading...</div>

文本“Loading ...”或“Lädt...”（德语）来自$.jgrid.defaults.loadtext。 div的id将由“lui_”或“load_”前缀和网格id（“list”）构成。在发送ajax请求之前，jqGrid会使这些div中的一个或两个可见。如果 loadui 选项是 enable ，它会为第二个div（id =“load_list”）调用jQuery.show()函数。但是，如果 loadui 选项是块，那么两个div（id =“lui_list”和id =“load_list”）将显示.show()函数。在ajax请求.hide()结束之后，将为一个或两个div调用jQuery函数。这就是全部。

您可以在ui.jqgrid.css或jquery-ui-1.8.custom.css中找到所有css类的定义。

现在你有足够的信息来重现jqGrid“正在加载...”的消息，但如果我是你，我会再次想到你是否真的想要这样做，或者jQuery blockUI plugin是否更适合你的目标

Answer 2

我用

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

在没有创建任何新div的情况下工作正常

Answer 3

简单，显示它：

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

然后再次隐藏

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

Answer 4

我刚刚放在它工作的JQ网格的 onSelectRow 事件的下面一行。

$（ '负载。'）示出了（）;

Answer 5

要覆盖的样式是[.ui-jqgrid .loading]。

Answer 6

您可以调用$（“＃load _”）。show（）和.hide（），其中是您网格的ID。

Answer 7

它正在使用$（'div.loading'）。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');
                }

            }
        });

Answer 8

正如@Oleg所提到的，jQuery Block UI在开发ajax基础应用程序时有很多好的功能。有了它，您可以阻止整个UI或名为element Block

的特定元素

对于jqGrid，您可以将网格放在div（sampleGrid）中，然后将网格阻止为：

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

Answer 9

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

datatype =“ local”

您可以像这样扩展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();

或

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

以显示所有网格上的负载（当然会更改每个网格的网格ID）或

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

以隐藏加载元素，如果您在同一页面上有多个网格，则定位到特定网格

jqGrid触发“正在加载...”叠加

9 个答案: