Цикл статей «Документация jqGrid на русском».
Следующая статья — «Добавление строки с помощью editGridRow в jqGrid».
Предыдущая статья — «Редактирование в форме в jqGrid».
Этот метод создаёт форму редактирования в виде модального диалогового окна для строки таблицы.
Метод использует Общие свойства редактирования в jqGrid в colModel и editurl из jqGrid.
Пример вызова:
|
1 |
jQuery("#grid_id").editGridRow( rowid, properties ); |
Или с помощью нового API:
|
1 |
jQuery("#grid_id").jqGrid('editGridRow', rowid, properties ); |
Где
- grid_id — id таблицы
- rowid — id строки для редактирования
- properties — объект с парами «имя:значения», содержащий любые из перечисленных ниже свойств и событий.
Метод использует следующие свойства из файла локализации:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$.jgrid = { ... 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", ... }, ... } |
Эти свойства могут быть переопределены при передаче параметров в метод. При передаче в параметр нужно использовать, например, bSubmit : "Submit", а не $.jgrid.edit.bSubmit : "Submit"
Свойства
Свойство: top
Начальная позиция по вертикали модального диалогового окна. Значение по умолчанию 0 означает позицию по вертикали от левого верхнего угла таблицы. Если свойство jqModal установлено в true (смотрите ниже), и плагин jqModal доступен, то любое значение, отличное от 0 означает верхнюю позицию от верхнего левого угла окна.
По умолчанию: 0
Свойство: left
Начальная позицию по горизонтали. Значение по умолчанию 0 означает позицию по горизонтали от левого верхнего угла таблицы. Если свойство jqModal установлено в true (смотрите ниже), и плагин jqModal доступен, то любое значение, отличное от 0 означает позицию по горизонтали от левого верхнего угла окна.
По умолчанию: 0
Свойство: width
Ширина диалогового окна.
По умолчанию: 300
Свойство: height
Высота диалогового окна.
По умолчанию: «auto»
Свойство: dataheight
Высота прокручиваемого содержимого. То есть высота между заголовком и подвалом диалогового окна.
По умолчанию: auto
Свойство: modal
Должно ли быть диалоговое окно модальным. Работает только в том случае, когда плагин jqModal доступен.
По умолчанию: false
Свойство: drag
Может ли пользователь перетаскивать диалоговое окно. Работает только в том случае, когда плагин jqDnR доступен, или когда доступен widget dragable из jQuery UI.
По умолчанию: true
Свойство: resize
Можно ли изменять размер диалогового окна. Работает только в том случае, когда плагин jqDnR доступен, или доступен resizable widget из jQuery UI.
По умолчанию: true
Свойство: url
URL для отправки данных. Если указан, то заменяет значение из editurl.
По умолчанию: null
Свойство: mtype
Определяет тип запроса, который будет отправляться на сервер. Возможные значения:
"POST" или
"GET".
По умолчанию:
"POST"
Свойство: editData
Для добавления содержимого к отправляемым на сервер данным.
По умолчанию: пусто
Свойство: recreateForm
Если установлено в true, то форма пересоздаётся каждый раз при активации диалога с новыми свойствами из colModel (если они были изменены).
По умолчанию: false
Свойство: jqModal
Если установлено в true, то для создания диалогов используется плагин jqModal (если доступен). Если установлено в true, и плагин недоступен, то jqGrid использует свою собственную функцию для создания диалоговых окон.
По умолчанию: true
Свойство: addedrow
Куда вставляется новая строка при добавлении. Возможные значения:
'first' (в начало таблицы),
'last' (в конец таблицы). Чтобы новая строка появлялась в соответствии с сортировкой, установите
reloadAfterSubmit: true.
По умолчанию:
"first"
Свойство: topinfo
Если это свойство задано, то этот текст появляется сразу после заголовка диалогового окна в качестве дополнительной строки.
По умолчанию: пустая строка
Свойство: bottominfo
Если это свойство задано, то этот текст добавляется сразу после кнопок диалогового окна.
По умолчанию: пустая строка
Свойство: saveicon
Массив. Определяет иконку кнопки отправки на сервер. Значение по умолчанию: «
[true,"left","ui-icon-disk"]». Первый элемент массива включает/выключает отображение иконки. Второй элемент указывает позицию иконки (
"left" или
"right" ). Третий элемент указывает иконку из темы.
По умолчанию:
Свойство: closeicon
Массив. Определяет иконку для кнопки отмены. Значение по умолчанию: «
[true,"left","ui-icon-close"]». Для получения более подробной информации смотрите saveicon.
По умолчанию:
Свойство: savekey
Массив. Определяет возможность сохранения формы с помощью нажатия клавиши на клавиатуре. Первый элемент включает/выключает сохранение с помощью клавиатуры. Второй элемент указывает код клавиши. Если включено, то значение по умолчанию для сохранения — клавиша Enter.
Эта клавиша будет использоваться и при добавлении строки и при редактировании строки. Поскольку привязка клавиши для формы, то нет возможности использовать одну клавишу при добавлении и другую при редактировании.
По умолчанию:
[false,13]
Свойство: navkeys
Массив. Это свойство работает только для режима редактирования и добавляет навигацию с помощью клавиатуры, которая позволяет перемещаться по записям в форме редактирования с помощью определённых клавиш. По умолчанию навигация отключена. Первый элемент массива включает/выключает навигацию. Второй элемент указывает клавишу для перемещения вверх по записям и по умолчанию это клавиша со стрелкой вверх. Третий элемент указывает на клавишу перемещения вниз по записям и по умолчанию это клавиша со стрелкой вниз.
По умолчанию:
[false,38,40]
Свойство: checkOnSubmit
Это свойство работает только в режиме редактирования. Если это свойство установлено в true, то оно работает только при нажатии клавиши отправки на сервер, в случае если данные были изменены в форме. Если данные были изменены, то отображается диалоговое окно с вопросом, действительно ли пользователь хочет сохранить изменения. Нажатия кнопку отмена возвращает пользователя к форме, но НЕ возвращает значения на форме к исходным.
По умолчанию: false
Свойство: checkOnUpdate
Это свойство применимо только к режиму добавления и редактирования. Если это свойство установлено в true, то поведение будет таким, как описано ниже.
Если что-нибудь изменено в форме, и пользователь кликает на кнопку отмена, кнопку перемещения по записям, кнопку закрытия (в правом верхнем углу формы), в слой затемнения или нажимает клавишу Esc, то появляется диалоговое окно, которое спрашивает, сохранить изменения, вернуться на форму или вернуться в таблицу и отменить все изменения (это закроет форму редактирования).
По умолчанию: false
Свойство: closeAfterAdd
Для режима добавления записи. Закрывать диалоговую форму после добавления записи.
По умолчанию: false
Свойство: clearAfterAdd
Для режима добавления записи. Очищать данные после добавления.
По умолчанию: true
Свойство: closeAfterEdit
Для режима редактирования. Закрывать диалоговую форму после редактирования.
По умолчанию: false
Свойство: reloadAfterSubmit
Перезагрузить данные на форме после отправки новых или изменённых данных.
По умолчанию: true
Свойство: closeOnEscape
Если установлено в true, то диалоговое окно может быть закрыто с помощью клавиши Esc.
По умолчанию: false
Свойство: ajaxEditOptions
Это свойство позволяет установить глобальные настройки AJAX-запросов для формы редактирования. Они будут использоваться при сохранении данных на сервер. С помощью этого свойства можно переопределить текущие настройки AJAX, включая событие завершения.
По умолчанию: пустой объект
Свойство: viewPagerButtons
Это свойство включает/выключает кнопки перемещения к предыдущей и следующей записям в форме.
По умолчанию: true
Свойство: zIndex
Начальный z-index для диалогового окна. Если вы хотите видеть диалоговую форму под другими элементами или диалогами, то вы должны использовать какое-нибудь значение большее значения по умолчанию равного 950. Во многих случаях это должно быть значение большее 1000 — значение по умолчанию для диалогов jQuery UI.
По умолчанию: 950
События
Событие: afterclickPgButtons
Это событие может использоваться, только когда мы находимся в режиме редактирования и кнопки навигации по записям включены. Оно возникает после загрузки данных новой строки из таблицы и позволяет изменить данные или форму перед перерисовкой формы.
afterclickPgButtons : function(whichbutton, formid, rowid) {…}
где
whichbutton — это
'prev' или
'next'.
formid — это объект jQuery идентификатора формы, вы можете использовать
formid[0].id, чтобы получить id формы.
rowid — это id текущей строки.
Событие: afterComplete
Это событие возникает сразу после окончания всех действий и обработчиков событий и добавления или обновления строки в таблице.
afterComplete : function (response, postdata, formid) {…}
где
response — это данные, возвращённые сервером (если есть).
postdata — это данные, отправленные на сервер.
formid — объект jQuery идентификатора формы, вы можете использовать
formid[0].id, чтобы получить id формы.
Событие: afterShowForm
Возникает после отображения формы. В качестве параметра принимает id созданной формы.
afterShowForm : function (formid) {…}
Свойство: afterSubmit
Возникает после получения ответа с сервера. Обычно используется для отображения статуса от сервера (например, данные успешно сохранены, или сохранение отменено по причине…). В обработчик этого события передаются: данные, возвращённые сервером, массив с отправленными значениями в виде пар
id=value1,value2.
Обработчик этого события должен вернуть массив вида
[success, message, new_id].
где
success — логическое значение, true в случае успешного завершения. Если false, то отображается сообщение об ошибке. Сообщение игнорируется, если success равен true.
new_id — может использоваться для установки id новой строки в таблице для режима добавления.
afterSubmit : function(response, postdata){…return [success,message,new_id]}
Событие: beforeCheckValues
Это событие возникает перед проверкой введённых значений (если проверка определена в colModel с помощью свойства editrules.
В это событие передаются следующие параметры:
1. posdata — массив значений, который нужно проверить в виде пар «имя:значение», где имя — это name из colModel.
2. formid — id формы.
3. mode — текущий режим. Может быть
"add" или
"edit".
Во всех случаях событие должно вернуть объект в виде пар имя-значение, который затем отправляется на сервер.
Событие: beforeInitData
Возникает перед инициализацией новых данных для формы. Принимает в качестве параметра jQuery-объект созданной формы. Обработчик события может вернуть true или false. Если обработчик события возвращает false, то дальнейших действий не происходит и форма не отображается.
beforeInitData : function(formid) {…}
Событие: beforeShowForm
Возникает перед отображением формы с новыми данными. В обработчик события в качестве параметра передаётся id созданной формы.
beforeShowForm : function(formid) {…}
Событие: beforeSubmit
Событие возникает перед отправкой данных на сервер. В обработчик события передаётся в качестве параметра массив данных и formid.
beforeSubmit : function(postdata, formid) {…return[success,message];}
Обработчик этого события должен вернуть массив со следующими значениями.
success boolean указывает, что процесс должен продолжиться (true), или должно отобразиться сообщение об ошибке (false).
message — сообщение об ошибке.
Событие: onclickPgButtons
Это событие может использоваться только в режиме редактирования. Оно возникает сразу после нажатия кнопки перехода к предыдущей или к следующей записи, перед покиданием текущей строки, позволяя работать (например, сохранять) с текущими значениями формы.
onclickPgButtons : function (whichbutton, formid, rowid) {…}
где
whichbutton — это
'prev' или
'next'
formid — это jQuery-объект идентификатора формы, вы можете использовать
formid[0].id, чтобы получить id формы.
rowid — id текущей строки.
Событие: onclickSubmit
Возникает после нажатия кнопки отправки на сервер и создания postdata. В это событие передаются параметры: массив свойств метода и отправляемые данные. Обработчик события должен вернуть объект вида
{}, который расширяет postdata.
onclickSubmit : function(params, posdata) {…return {add_data}}
Событие: onInitializeForm
Возникает только один раз, при создании данных для редактирования и добавления. Обработчик события принимает в качестве параметра id созданной формы.
onInitializeForm : function(formid) {…}
Событие: onClose
Это событие возникает перед закрытием формы, когда нажата иконка закрытия, кнопка отмены, Esc, или произошёл клик на слое тумана (если jqModal доступен). Событие может вернуть (но не обязательно) true. Если обработчик события возвращает true, то форма закрывается, если false, то форма не закрывается. Если ничего не возвращается, то форма закрывается.
Событие: errorTextFormat
Это событие может возникнуть при возникновении ошибки при AJAX-запросе и может использоваться для лучшего форматирования сообщений об ошибках. В обработчик этого события передаётся ответ сервера. Обработчик события должен вернуть сообщение об ошибке (не массив).
Событие: serializeEditData
Если установлен, обработчик этого события может сериализовать данные, отправляемые с помощью AJAX-запроса, когда мы сохраняем данные формы. Функция должна вернуть сериализованные данные. Это событие может использоваться при необходимости отправить пользовательские данные на сервер, например JSON, XML. В это событие передаются данные, которые нужно отправить на сервер.
Как создаётся форма
При создании формы применяются следующие правила:
- Скрытые поля включаются в форму с установкой свойства display:none для строки формы.
- Идентификатор id элемента редактирования равен name из colModel
- Атрибут name элемента редактирования равен name из colModel
- Для облегчения манипуляции элементами в форме редактирования каждая строка формы, содержащая данные для редактирования , имеет id вида "tr_" + name (from colmodel). Пример:
|
1 2 3 4 5 6 7 |
<form ....> <table> <tr id='tr_myfield'> <td> Caption</td> <td>edited element named, in colModel, as "myfield"</td> </tr> ... </table> </form> |
Это позволяет легко скрывать и отображать строки в зависимости от условий в обработчике события beforeShowForm.
Что отправляется на сервер
В режиме редактирования объект {} , который отправляется на сервер, содержит:
- Пары «имя:значение», где имя — это name элемента редактирования на форме (это для всех элементов ввода).
- Дополнительно пара «id:rowid», где rowid — это id редактируемой строки
- Дополнительно пара «oper:edit», показывающая, что это режим редактирования.
- Если объект editData не пуст, то к отправляемым данным добавляются эти данные.
- Если объект, возвращённый из onclickSubmit не пуст, то мы расширяем данные этим объектом.
Цикл статей «Документация jqGrid на русском».
Следующая статья — «Добавление строки с помощью editGridRow в jqGrid».
Предыдущая статья — «Редактирование в форме в jqGrid>».
Здравствуйте.
>>Эти свойства могут быть переопределены при передаче параметров в метод.
Есть ли возможность и где переопределить их для всех вызовов(напр с кнопки навигатора)?
Для всех вызовов, на сколько я знаю, нельзя. Но можно объявить переменную с нужными свойствами, а потом пихать её и в метод editGridRow, и в свойства кнопки навигатора (в качестве prmAdd, prmEdit и т. д)