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

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

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


jquery jqgrid treegrid
person leora    schedule 08.01.2012    source источник

Ответы (2)


arrow_upward
4
arrow_downward

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

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

Вы можете получить лучшие результаты, если измените положение div "Loading..." внутри 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 "Loading ...".

ОБНОВЛЕНО: Вероятно, лучшей реализацией изменения положения элемента 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':

введите здесь описание изображения

person Oleg    schedule 08.01.2012
comment
благодаря . .это отлично работает. Я также добавил блок loadUI:, и эти две вещи вместе делают процесс загрузки данных более понятным для пользователя!! - person leora; 08.01.2012

arrow_upward
0
arrow_downward

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

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

.loading-message-container {
     position : fixed;
     top:50%;
     left: 45%;
}
person Ahmad Alfy    schedule 08.01.2012