JQGrid, Нужно изменить сообщение о прогрессе "Загрузка ..."

Question

Я хочу изменить сообщение JQGrid "Загрузка ..." на что-то с анимированным GIF-изображением. Посмотрел везде, но не смог найти выход. Любой, пожалуйста.

Answer 1

Попробуйте использовать

.ui-jqgrid .loading { background: url(ajax-loader.gif); }

, это должно работать.Некоторые анимированные картинки можно загрузить, например, из здесь .Кстати, div с сообщением «Загрузка ...» имеет вид

<div id="load_list" class="loading ui-state-default ui-state-active">Loading...</div>

, где идентификатор «load_list» будет создан из префикса «load_» и идентификатора элемента таблицы.

ОБНОВЛЕНО : Чтобы удалить текст «Загрузка ...», вы можете использовать loadtext: '' jqGrid или переписать $.jgrid.defaults.loadtext глобальную настройку из grid.locale-en.js:

$.jgrid.defaults.loadtext='';

Если вам нужно настроить ширину, высоту или любой другой параметр CSS загрузочного div, вы можете сделать это таким же образом.Например,

.ui-jqgrid .loading
{
    left: 45%;
    top: 45%;
    background: url(ajax-loader.gif);
    background-position-x: 50%;
    background-position-y: 50%;
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
}

Answer 2

Возможно, это более современный ответ на вопрос с использованием FontAwesome, а не GIF. Я нигде не мог найти ответ на этот вопрос, и мне пришлось собрать его воедино из разных мест, включая приведенный выше ответ @ oleg.

Надеюсь, это будет полезно другим, кто ищет.

<style>
    .ui-jqgrid .loading {
        background-color: transparent;
        border: 0px;
        -webkit-animation: fa-spin 2s infinite linear;
        animation: fa-spin 2s infinite linear;
    }

    .ui-jqgrid .loading:before {
        content: "\f110";
        font-family: FontAwesome;
        font-size:40px;
    }
</style>

И затем поместите следующее (точно так же) после $ (document) .ready (function () {

$.jgrid.defaults.loadtext='';