В jqGrid вы можете установить область scrollOffset, чтобы всегда отображать

Question

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

Answer 1

Если я вас правильно понял, вы можете включить следующий CSS, который заставит создавать полосы прокрутки

<style type="text/css">
    .ui-jqgrid .ui-jqgrid-bdiv { overflow: scroll; }
</style>

ОБНОВЛЕНО : Я посмотрел в вашем демо от здесь . Мне не нравится ваша настройка поисковой панели jqGrid и заголовков столбцов, потому что вы добавляете в заголовок сетки дополнительный столбец , которого нет в теле сетки и о котором jqGrid не знает. Я считаю путь слишком опасным.

Я бы порекомендовал вам использовать параметр toppager: true. В вашем текущем коде вы используете "ключевое слово-сетку" в качестве идентификатора сетки и "ключевое слово-панель инструментов" в качестве пейджера. Если вы используете опцию toppager: true, вам вообще не понадобится <div id="keyword-grid-toolbar">. Вместо этого jqGrid создаст div для самого верхнего пейджера. Идентификатор сетки будет построен из идентификатора сетки и текста "_toppager". В вашем случае это будет div с id = "keyword-grid_toppager".

Таким образом, вы должны удалить pager: "#keyword-grid-toolbar" параметр jqGrid и заменить '#keyword-grid-toolbar' на '#keyword-grid_toppager' для navGrid и navButtonAdd, которые вы используете.

Вы можете прочитать здесь и здесь больше информации о toppager.

В результате вы, конечно, будете выглядеть не так, как jqGrid, но высота сетки не изменится, а кнопки поиска и выбора столбцов будут сверху и всегда будут видны. Таким образом, все ваши основные проблемы будут решены, и у вас будет стандарт jqGrid.

ОБНОВЛЕНО 2 : еще один подход, который вы можете использовать, - добавить столбец в конце jqGrid и скрыть его с помощью

{name: 'last', width: 22, sortable: false, resizable: false, search: false,
    cellattr: function () {return ' style="display: none"'} }

вместо типичного hidden: true. Это сохранит некоторое место в заголовке столбца и на панели инструментов поиска. Таким образом, вы сможете добавить некоторые свои пользовательские элементы без нарушения общей структуры сетки:

см. Демоверсию здесь .