Добавление кнопки на верхнюю панель инструментов jqGrid
Похоже, панель инструментов по умолчанию для jqGrid всегда внизу. Такие кнопки, как Следующая / Предыдущая страница и раскрывающийся список для выбора количества строк на странице, всегда будут отображаться в нижней части сетки.
Я нашел способ добавить пользовательскую верхнюю панель инструментов и нажать на нее пользовательские кнопки.
Что действительно нужно, так это способ добавить функциональность по умолчанию (например, пейджинг) в верхнюю часть сетки, а не в нижнюю.
4 ответа
Я не понимаю, почему так важно иметь верхнюю панель инструментов. Вы не используете пейджинг или у вас есть много строк в сетке, чтобы вы не могли видеть нижнюю панель инструментов без прокрутки? Или есть другая причина?
Существует логический параметр toppager в jqGrid (см. Параметры настройки сетки) для создания дополнительного верхнего пейджера. Вы можете отобразить панель инструментов с помощью параметра панели инструментов, но я не уверен, что вы используете ту же терминологию, что и 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. Я желаю вам больших успехов в кодировании.
Чтобы панель инструментов в верхней части сетки имела те же кнопки и события, что и нижняя панель инструментов, необходимо активировать 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);
Эти строки сделают свое дело:)
Наслаждаться:
$('#datagridnav').insertBefore('#t_datagrid'); //relocate footer to top
Я обновил до jqgrid 3.7.2, в надежде, что его параметр toppager поможет. В то время как это действительно помещает средства управления поиском в вершину, кнопка поиска не пришла для поездки.
// assuming a jqgrid with id='the_grid'
$('#the_grid_pager_left').clone(true).insertBefore('#the_grid_toppager_center')
Выше, с некоторыми незначительными изменениями CSS, скопировал кнопки поиска / обновления также в топпер и сохранил их события / поведение.