Как центрировать «Загрузка данных». сообщение на видимом экране в jqgrid treegrid? - PullRequest
Новая
       29

Как центрировать «Загрузка данных». сообщение на видимом экране в jqgrid treegrid?

3 голосов
/ 08 января 2012

У меня есть сетка деревьев jqGrid с 40 столбцами, поэтому имеется большая горизонтальная полоса прокрутки (в зависимости от размера браузера). Проблема в том, что ширина настолько велика, что когда страница загружается или я делаю фильтр и т. Д., Вы не видите всплывающее окно «Загрузка сообщения». потому что его справа от экрана.

Есть ли способ получить "Загрузка данных." Центр сообщений на текущем видимом экране (вместо страницы в целом?

Ответы [ 2 ]

4 голосов
/ 08 января 2012

Я считаю, что ваш вопрос хорош. Та же проблема может возникнуть у других пользователей jqGrid.

Лично я предпочитаю использовать настройку loadui: 'block', которая показывает наложение по всей сетке во время загрузки сетки. В случае, если проблема будет не такой важной.

Вы можете получить лучшие результаты, если измените положение элемента "Загрузка ..." внутри loadBeforeSend: 

loadBeforeSend: function () {
    var $loadingDiv = $("#load_"+$.jgrid.jqID(this.id)),
        $bdiv = $(this).closest('.ui-jqgrid-bdiv');
    $loadingDiv.show().css({
        top: (Math.min($bdiv.height(), $(window).height()) - $loadingDiv.height())/2 + 'px',
        left: (Math.min($bdiv.width(), $(window).width()) - $loadingDiv.width())/2 + 'px'
    });
}

В моем мнении было бы хорошо изменить базовый код jqGrid (чтобы точно изменить код функции beginReq ), чтобы описанное выше изменение позиции "Загрузка .." . "div всегда.

ОБНОВЛЕНО : Вероятно, лучшая реализация изменения позиции div "Загрузка ..." будет 

var gridIdAsSelector = $.jgrid.jqID(this.id),
    $loadingDiv = $("#load_" + gridIdAsSelector),
    $gbox = $("#gbox_" + gridIdAsSelector);
$loadingDiv.show().css({
    top: (Math.min($gbox.height(), $(window).height()) - $loadingDiv.outerHeight())/2 + 'px',
    left: (Math.min($gbox.width(), $(window).width()) - $loadingDiv.outerWidth())/2 + 'px'
});

Код должен быть помещен в loadBeforeSend, как и раньше.

ОБНОВЛЕНО 2 : Демонстрация демонстрирует идею. Я включил код за пределами loadComplate только для демонстрации, чтобы показать, как это будет работать. В демоверсии Div «Загрузка» остается видимым, и я дополнительно показываю наложение, отображаемое в случае использования опции loadui: 'block':

enter image description here

0 голосов
/ 08 января 2012

Поместите контейнер с сообщением о загрузке в фиксированное положение с верхним и левым назначением примерно на 40% -60%.Это исправит это

Это должно быть что-то вроде этого: 

.loading-message-container {
     position : fixed;
     top:50%;
     left: 45%;
}
...