Навигатор в jqGrid

Цикл статей «Документация jqGrid на русском».

Следующая статья — «Пользовательские кнопки в jqGrid».
Предыдущая статья — «Постраничная навигация в jqGrid».

 

Навигатор позволяет легко получить доступ к таким действиям (кнопкам), как поиск или редактирование. Пользователь может активировать действие нажатием соответствующей кнопки в панели навигации.

Разработчики могут создавать свои кнопки, или они могут использовать любые из шести предопределённых кнопок, которые идут вместе с jqGrid. JqGrid предоставляет графические иконки для предопределённых кнопок.

Полный список предопределённых кнопок:

1) Добавление новой строки, 2) Редактирование выбранной строки, 3) просмотр выбранной строки, 4) Удаление выбранной строки, 5) Поиск записей 6) Перезагрузка таблицы.

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

Вы также можете добавлять пользовательские действия (кнопки) в панель навигации.

Вы можете поменять текст, которые отображается при наведении курсора мышки на кнопку (смотрите ниже, текст может быть найден в языковом файле)

Кнопки навигатора могут быть расположены слева, посередине и справа.

Как использовать

Навигатор — это метод jqGrid. Он активируется и настраивается расширением вашей основной функции таблицы, как показывает пример ниже. Полный список всех настраиваемых свойств перечислен в таблице ниже.

Встроенный навигатор должен быть применён к панели постраничной навигации, то есть должна быть объявлена панель постраничной навигации. Встроенные в навигатор кнопки относятся к редактированию в форме. Для большей информации смотрите статью «Редактирование в форме jqGrid».

Определение панели навигации

Для того чтобы использовать навигатор, модуль редактирования в форме (Form Edit), общий модуль (Common) и не обязательно поиск (Search) и модальный модуль (Modal dialog) должны быть выбраны при скачивании таблицы

Определение в HTML:

Javascript-код:

Или используя новый API:

Или цепочкой:

Где:

grid_id

    — это id уже инициализированной таблицы jqGrid.

  • gridpager — это id панели навигации.
  • parameters — массив настроек, описанных ниже.
  • prmEdit, prmAdd, prmDel, prmSearch, prmView  — это объекты, содержащие настройки для кнопок редактирования в форме.

В дополнение к каждому модулю из prmEdit, prmAdd, prmDel, prmSearch, prmView может быть добавлено свойство id, для того чтобы указать id кнопки в навигаторе. Если этот id не указан, то используется комбинация с префиксом и id таблицы. Читайте дальше для получения подробностей.

Если id кнопок не указано, то используются следующие правила:
Для кнопки добавления используется «add_» + id таблицы.
Для кнопки редактирования используется «edit_» + id таблицы.
Для кнопки удаления используется «del_» + id таблицы.
Для кнопки просмотра используется «view_» + id таблицы.
Для кнопки поиска используется «search_» + id таблицы.
Для кнопки обновления используется «refresh_» + id таблицы.

Этот код объявляет кнопку редактирования с id = "myedit" :

Если класс ui-state-disabled добавлен к какой-нибудь из этих кнопок, то мы делаем недоступной не только кнопку, но и событие клика.

Параметры

Когда мы используем навигатор, следующие свойства включаются в языковый файл.

Если вы хотите изменить текст, появляющийся при наведении курсора мышки на кнопку, просто замените текст в строке заголовка в коде ниже. Например для кнопки view это строка viewtitle: "View selected row" .

Свойства $.jgrid.edit, $.jgrid.add, $.jgrid.del и $.jgrid.search включены, если связанные модули включены.

Полный список параметров

Свойство: add
Тип: boolean
Включает или выключает кнопку добавления в навигаторе. При нажатии на кнопку вызывается метод editGridRow с параметром new.
По умолчанию: true

Свойство: addicon
Тип: string
Устанавливает иконку для кнопки добавления. Только иконки из темы jQuery UI могут быть использованы.
По умолчанию: ui-icon-plus

Свойство: addtext
Тип: string
Текст для кнопки добавления.
По умолчанию: пусто

Свойство: addtitle
Тип: string
Всплывающая подсказка, появляющаяся при наведении курсора мышки на кнопку добавления.
По умолчанию: Add new row

Свойство: alertcap
Тип: string
Заголовок сообщения, появляющегося при попытке редактирования, удаления или просмотра записи без выбора строки.
По умолчанию: Warning

Свойство: alerttext
Тип: string
Текст сообщения, появляющегося при попытке редактирования, удаления или просмотра записи без выбора строки.
По умолчанию: Please, select row

Свойство: cloneToTop
Тип: boolean
Создаёт дубликаты всех кнопок из нижней панели навигации в верхней панели навигации, если она объявлена. Обратите внимание, что navGrid может быть применён только к верхней панели навигации. Идентификатор id верхней панели навигации представляет собой комбинацию id таблицы и "_toppager".
По умолчанию: false

Свойство: closeOnEscape
Тип: boolean
Может ли окно с сообщением быть закрыто нажатием клавиши ESC.
По умолчанию: true

Свойство: del
Тип: boolean
Включает или выключает кнопку удаления в навигаторе. При нажатии кнопки вызывается метод delGridRow.
По умолчанию: true

Свойство: delicon
Тип: string
Устанавливает иконку, которая будет отображаться при включённой кнопке удаления. На текущий момент только иконки из темы jQuery UI могут использоваться.
По умолчанию: ui-icon-trash

Свойство: deltext
Тип: string
Текст для кнопки удаления.
По умолчанию: пусто

Свойство: deltitle
Тип: string
Всплывающая подсказка, появляющаяся при наведении курсора мышки на кнопку удаления (если включена).
По умолчанию: Delete selected row

Свойство: edit
Тип: boolean
Включает или выключает кнопку редактирования в навигаторе. При клике на кнопку вызывается метод editGridRow с текущей выделенной строкой в качестве параметра.
По умолчанию: true

Свойство: editicon
Тип: string
Устанавливает иконку для кнопки редактирования. На текущий момент только иконки из темы jQuery UI могут быть использованы.
По умолчанию: ui-icon-pencil

Свойство: edittext
Тип: string
Текст для кнопки редактирования.
По умолчанию: пусто

Свойство: edittitle
Тип: string
Всплывающая подсказка, появляющаяся при наведении курсора мышки на кнопку редактирования (если включена).
По умолчанию: Edit selected row

Свойство: position
Тип: string
Определяет позицию кнопок навигатора в панели постраничной навигации. Может быть одним из значений: "left" , "center" или "right".
По умолчанию: "left"

Свойство: refresh
Тип: boolean
Включает или выключает кнопку обновления в панели постраничной навигации. При клике на кнопку вызывается trigger("reloadGrid") и параметры поиска очищаются.
По умолчанию: true

Свойство: refreshicon
Тип: string
Указывает иконку для кнопки обновления. На текущий момент только иконки из темы jQuery UI могут быть использованы.
По умолчанию: ui-icon-refresh

Свойство: refreshtext
Тип: string
Текст для кнопки обновления.
По умолчанию: пусто

Свойство: refreshtitle
Тип: string
Всплывающая подсказка, появляющаяся при наведении курсора мышки на кнопку обновления (если включена).
По умолчанию: Reload Grid

Свойство: refreshstate
Тип: string
Определяет, как таблица будет обновлена
— firstpage — таблица перезагрузит данные из первой страницы.
— current — обновление должно сохранить номер страницы и выделенную строку.
По умолчанию: "firstpage"

Свойство: afterRefresh
Тип: function
Это событие вызывается после обновления.
По умолчанию: null

Свойство: beforeRefresh
Тип: function
Это событие вызывается перед обновлением.
По умолчанию: null

Свойство: search
Тип: boolean
Включает или выключает кнопку поиска в навигаторе. При клике на кнопку вызывается метод searchGrid.
По умолчанию: true

Свойство: searchicon
Тип: string
Устанавливает иконку для кнопки поиска. На текущий момент только иконки из темы jQuery UI могут быть использованы.
По умолчанию: "ui-icon-search"

Свойство: searchtext
Тип: string
Текст для кнопки поиска.
По умолчанию: пусто

Свойство: searchtitle
Тип: string
Всплывающая подсказка, появляющаяся при наведении курсора мышки на кнопку поиска (если включена).
По умолчанию: Find records

Свойство: view
Тип: boolean
Включает или выключает кнопку просмотра записи в панели навигатора. При клике на кнопку вызывается метод viewGridRow.
По умолчанию: false

Свойство: viewicon
Тип: string
Устанавливает иконку для кнопки просмотра. На текущий момент только кнопки из темы jQuery UI могут быть использованы.
По умолчанию: "ui-icon-document"

Свойство: viewtext
Тип: string
Текст для кнопки просмотра.
По умолчанию: пусто

Свойство: viewtitle
Тип: string
Всплывающая подсказка, появляющаяся при наведении курсора мышки на кнопку просмотра (если включена).
По умолчанию: View selected row

Свойство: addfunc
Тип: function
Переопределяет встроенную функцию добавления. Без параметров.
По умолчанию: null

Свойство: editfunc
Тип: function
Переопределяет встроенную функцию редактирования. В качестве параметра в эту функцию передаётся id редактируемой строки.
По умолчанию: null

Свойство: delfunc
Тип: function
Переопределяет встроенную функцию удаления. В качестве параметра в эту функцию передаётся id удаляемой строки.
По умолчанию: null

Для некоторых свойств, связанных с редактированием, смотрите статью «Редактирование в форме в jqGrid».
Пример:

Пример выше включает просмотр в форме и разрешает закрытие модальных окон с помощью клавиши ESC и включает расширенный поиск. Также он включает кнопку удаления.

Цикл статей «Документация jqGrid на русском».

Следующая статья — «Пользовательские кнопки в jqGrid».
Предыдущая статья — «Постраничная навигация в jqGrid».


Поделиться:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован.

*