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

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

Закрытие, которое я нашел, это:

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

  • n8
Источник

10 ответов

Решение

Если вы ищете что-то вроде DisplayLoadingMessage() функция. Он не существует в jqGrid. Вы можете только установить опцию loadui в jqGrid, чтобы включить (по умолчанию), отключить или заблокировать. Я лично предпочитаю блокировать. (см. 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 включена. Однако, если опция loadui является блоком, то оба div (id="lui_list" и id = "load_list") будут показаны относительно .show() функция. После окончания AJAX-запроса .hide() Функция jQuery будет вызываться для одного или двух делений. Это все.

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

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

Источник

Я использую

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

Работает нормально без создания каких-либо новых div

Источник

Просто, чтобы показать это:

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

Затем, чтобы скрыть это снова

$("#myGrid").closest(".ui-jqgrid").find('.loading').hide();
Источник

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

$ ('Загрузка') шоу ().

Источник

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

Источник

В своих проблемах я использовал

      $('.jsgrid-load-panel').hide()

затем

      $('.jsgrid-load-panel').show()
Источник

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

Источник

Он работает с $('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');
                }

            }
        });
Источник

Как упоминал @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();
        }
    }
});
Источник

Если вы хотите не блокировать и не использовать встроенный вызов ajax для получения данных

Тип данных ="локальный"

Вы можете расширить функции 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);

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

Источник
Другие вопросы по тегам