Добавление кнопки на верхнюю панель инструментов jqGrid

Question

Похоже, что панель инструментов по умолчанию для jqGrid всегда внизу. Такие кнопки, как Следующая / Предыдущая страница и раскрывающийся список для выбора количества строк на странице, всегда будут отображаться в нижней части таблицы.

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

Что действительно нужно, так это способ добавить функциональность по умолчанию (например, подкачку страниц) в верхнюю часть сетки, а не в нижнюю.

Answer 1

Чтобы панель инструментов в верхней части сетки имела те же кнопки и события, что и нижняя панель инструментов, необходимо активировать toppager:true в определении сетки и добавить следующие строки после определения

/** Duplicating the Nav Toolbar in top **/
var toolbarClone = $('#pager_left').clone(true);
// Assuming that your grid's ID is myGrid
$('#myGrid_toppager_left').prepend(toolbarClone);

Эти строки сделают свое дело:)

Answer 2

Наслаждайтесь:

$('#datagridnav').insertBefore('#t_datagrid'); //relocate footer to top

Answer 3

Я не понимаю, почему так важно иметь верхнюю панель инструментов. Вы не используете пейджинг или у вас есть много строк в сетке, чтобы вы не могли видеть нижнюю панель инструментов без прокрутки? Или есть другая причина?

В jqGrid есть логический параметр toppager (см. Параметры настройки сетки ) для создания дополнительного верхнего пейджера. Вы можете отобразить панель инструментов с помощью параметра панели инструментов, но я не уверен, что вы используете ту же терминологию, что и jqGrid. Посмотрите демоверсию jqGrid Demos (разверните «Новое в версии 3.1»). Возможно, вы имеете в виду панель навигации?

Обычно jqGrid отображает фрагмент HTML и делит все с некоторыми предопределенными элементами div. Панель навигации будет размещена внутри div с id = "pg_pager" и class = "ui-pager-control". Вы можете манипулировать jqGrid относительно jQuery, например, чтобы переместить этот div в другое место. Если вы реализуете такое движение, вы должны повторять это каждый раз внутри дескриптора события gridComplete (или после того, как сработало одно другое событие завершения).

РЕДАКТИРОВАНИЕ: Легко переместить существующий фрагмент HTML в другое место с отношением jQuery('#element_to_be_moved').insertAfter('#existing_element') или jQuery('#element_to_be_moved').insertBefore('#existing_element'). В ячейки нижнего колонтитула jqGrid «наследуют» CSS от ячеек в основной сетке Я описал имена некоторых важных div , которые являются частью jqGrid. Я желаю вам больших успехов в кодировании.

Answer 4

Я обновился до jqgrid 3.7.2, в надежде, что его параметр toppager поможет. В то время как это действительно помещает средства управления поиском наверх, кнопка поиска не пришла для поездки.

// assuming a jqgrid with id='the_grid'
$('#the_grid_pager_left').clone(true).insertBefore('#the_grid_toppager_center') 

Выше, с некоторыми незначительными изменениями CSS, скопировал кнопки поиска / обновления также в топпер и сохранил их события / поведение.