Наложение jqGrid "Загрузка ..."

Question

Кто-нибудь знает, как вызвать стандартное наложение jqGrid «Загрузка ...», которое отображается при загрузке сетки? Я знаю, что могу использовать плагин jquery без особых усилий, но я бы хотел, чтобы внешний вид моего приложения соответствовал тому, что уже используется в jqGrid.

Я нашел следующее:

jqGrid отображает сообщение «загрузки» по умолчанию при обновлении таблицы / при пользовательском обновлении

• n8

Answer 1

Если вы ищете что-то вроде DisplayLoadingMessage() функции. Он не существует в jqGrid. Для параметра jqGrid loadui можно установить только включить (по умолчанию), отключить или блок . Я лично предпочитаю блок . (см. 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>

где текст "Загрузка ..." или "Lädt ..." (на немецком языке) происходит от $.jgrid.defaults.loadtext. Идентификаторы div будут созданы из префикса «lui_» или «load_» и идентификатора сетки («list»). Перед отправкой ajax-запроса jqGrid делает один или два из этих div-ов видимыми. Он вызывает функцию jQuery.show() для второго div (id = "load_list"), если опция loadui равна enable . Однако если опция loadui равна block , то оба div-а (id = "lui_list" и id = "load_list") будут показаны в отношении функции .show(). После завершения запроса ajax .hide() будет вызываться функция jQuery для одного или двух делений. Это все.

Вы найдете определение всех классов CSS в ui.jqgrid.css или jquery-ui-1.8.custom.css.

Теперь у вас достаточно информации, чтобы воспроизвести сообщение jqGrid «Загрузка ...», но на вашем месте я бы еще раз подумал, действительно ли вы хотите это сделать или плагин jQuery blockUI лучше для ваших целей.

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

Я только что поместил ниже линии в onSelectRow событии сетки JQ, это сработало.

$ ( 'загрузка.') Шоу ();.

Answer 5

Стиль для переопределения: [.ui-jqgrid .loading].

Answer 6

Если вы хотите не блокировать и не использовать встроенный 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); 

, чтобы показать загрузку на всех ваших сетках (конечно, изменение идентификатора сеткипо сетке) или

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

, чтобы скрыть загрузочный элемент, ориентируясь на конкретную сетку в случае, если у вас есть несколько сеток на одной странице

Answer 7

Как упомянул @Oleg, пользовательский интерфейс jQuery Block обладает множеством полезных функций при разработке базовых приложений ajax. С его помощью вы можете заблокировать весь пользовательский интерфейс или определенный элемент с именем элемент 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 8

это связано с $ ('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 9

Вы можете вызвать $ ("# load _"). Show () и .hide () где это идентификатор вашей сетки.