Цикл статей «Документация jqGrid на русском».
Следующая статья — «Пользовательские кнопки в jqGrid».
Предыдущая статья — «Постраничная навигация в jqGrid».
Навигатор позволяет легко получить доступ к таким действиям (кнопкам), как поиск или редактирование. Пользователь может активировать действие нажатием соответствующей кнопки в панели навигации.
Разработчики могут создавать свои кнопки, или они могут использовать любые из шести предопределённых кнопок, которые идут вместе с jqGrid. JqGrid предоставляет графические иконки для предопределённых кнопок.
Полный список предопределённых кнопок:
1) Добавление новой строки, 2) Редактирование выбранной строки, 3) просмотр выбранной строки, 4) Удаление выбранной строки, 5) Поиск записей 6) Перезагрузка таблицы.
Панель навигации может находиться не только внизу таблицы, она может находиться внутри окна таблицы. Также панель навигации не обязательна и может быть удалена.
Вы также можете добавлять пользовательские действия (кнопки) в панель навигации.
Вы можете поменять текст, которые отображается при наведении курсора мышки на кнопку (смотрите ниже, текст может быть найден в языковом файле)
Кнопки навигатора могут быть расположены слева, посередине и справа.
Как использовать
Навигатор — это метод jqGrid. Он активируется и настраивается расширением вашей основной функции таблицы, как показывает пример ниже. Полный список всех настраиваемых свойств перечислен в таблице ниже.
Встроенный навигатор должен быть применён к панели постраничной навигации, то есть должна быть объявлена панель постраничной навигации. Встроенные в навигатор кнопки относятся к редактированию в форме. Для большей информации смотрите статью «Редактирование в форме jqGrid».
Определение панели навигации
Для того чтобы использовать навигатор, модуль редактирования в форме (Form Edit), общий модуль (Common) и не обязательно поиск (Search) и модальный модуль (Modal dialog) должны быть выбраны при скачивании таблицы
Определение в HTML:
|
1 2 3 4 5 6 7 |
... <body> ... <table id="list"></table> <div id="gridpager"></div> ... </body> |
Javascript-код:
|
1 2 3 4 5 6 7 8 9 10 |
<script> ... jQuery("#grid_id").jqGrid({ ... pager : '#gridpager', ... }); jQuery("#grid_id").navGrid('#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView); ... </script> |
Или используя новый API:
|
1 2 3 4 5 6 7 8 9 10 |
<script> ... jQuery("#grid_id").jqGrid({ ... pager : '#gridpager', ... }); jQuery("#grid_id").jqGrid('navGrid','#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView); ... </script> |
Или цепочкой:
|
1 2 3 4 5 6 7 8 9 |
<script> ... jQuery("#grid_id").jqGrid({ ... pager : '#gridpager', ... }).navGrid('#gridpager',{parameters}, prmEdit, prmAdd, prmDel, prmSearch, prmView); ... </script> |
Где:
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" :
|
1 2 3 4 5 6 7 8 9 |
<script> ... jQuery("#grid_id").jqGrid({ ... pager : '#gridpager', ... }).navGrid('#gridpager',{}, {id:'myedit'}); ... </script> |
Если класс ui-state-disabled добавлен к какой-нибудь из этих кнопок, то мы делаем недоступной не только кнопку, но и событие клика.
Параметры
Когда мы используем навигатор, следующие свойства включаются в языковый файл.
Если вы хотите изменить текст, появляющийся при наведении курсора мышки на кнопку, просто замените текст в строке заголовка в коде ниже. Например для кнопки view это строка viewtitle: "View selected row" .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
$.jgrid = { ... search : { caption: "Search...", Find: "Find", Reset: "Reset", odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain'], groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ], matchText: " match", rulesText: " rules" }, edit : { addCaption: "Add Record", editCaption: "Edit Record", bSubmit: "Submit", bCancel: "Cancel", bClose: "Close", saveData: "Data has been changed! Save changes?", bYes : "Yes", bNo : "No", bExit : "Cancel", }, view : { caption: "View Record", bClose: "Close" }, del : { caption: "Delete", msg: "Delete selected record(s)?", bSubmit: "Delete", bCancel: "Cancel" }, nav : { edittext: "", edittitle: "Edit selected row", addtext:"", addtitle: "Add new row", deltext: "", deltitle: "Delete selected row", searchtext: "", searchtitle: "Find records", refreshtext: "", refreshtitle: "Reload Grid", alertcap: "Warning", alerttext: "Please, select row", viewtext: "", 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».
Пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> ... jQuery("#grid_id").jqGrid({ ... pager : '#gridpager', ... }).navGrid('#gridpager',{view:true, del:false}, {}, // use default settings for edit {}, // use default settings for add {}, // delete instead that del:false we need this {multipleSearch : true}, // enable the advanced searching {closeOnEscape:true} /* allow the view dialog to be closed when user press ESC key*/ ); ... </script> |
Пример выше включает просмотр в форме и разрешает закрытие модальных окон с помощью клавиши ESC и включает расширенный поиск. Также он включает кнопку удаления.
Цикл статей «Документация jqGrid на русском».
Следующая статья — «Пользовательские кнопки в jqGrid».
Предыдущая статья — «Постраничная навигация в jqGrid».