jqGrid inline edit autocomplete

В этой статье я расскажу про создание элемента с автодополнением в форме редактирования строки jqGrid. Будет рассматриваться именно режим редактирования строки. В jqGrid есть три режима редактирования: редактирование ячейки, редактирование строки и редактирование в форме редактирования.

Краткий курс теории. Редактирование строки в jqGrid начинается с вызова метода grid.editRow(rowId, keys). При этом создаются элементы редактирования строк у которых hidden=false на основе описания в colModel. Атрибуты name созданных элементов равны атрибутам name из colModel. При сохранении значения созданных элементов управления отправляются на сервер парами name=value с добавлением id=rowid.

Чтобы создать автодополнение мы используем событие dataInit в editoptions. Туда передаётся элемент, и мы инициализируем автодополнение для него. Поскольку редактирование вызвано для столбца с ФИО, то столбец с personId этого ФИО мы должны обновлять сами.

 

Также создадим PHP-скрипт, которые будет возвращать небольшой набор данных для нашего примера.

И небольшой скрипт, который будет сохранять наши изменения тестовых данных в сессии.

Скрипт поиска данных для автодополнения получает параметр term, содержащий строку поиска:

Тут надо сказать, что меня немного удивило то, что PHP не может сразу работать со строками в кодировке UTF-8. Для них нужно использовать специальные функции.

Посмотреть результат

 

Ссылки:

https://urvanov.ru/projects/jqgrid-examples/5.0.0/inline-autocomplete/

— получившаяся таблица с автодополнением

http://www.trirand.com/jqgridwiki/doku.php — документация на jqGrid

Документация jqGrid на русском — документация jqGrid на русском

http://api.jqueryui.com/autocomplete/ — jQueryUI autocomplete Widget


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

Один комментарий к “jqGrid inline edit autocomplete”

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

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

*