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

jqGrid inline edit autocomplete: 2 комментария

  1. Огромное спасибо. Сам день бы потратил пока понял бы как jqgrid с autocomplete подружить. От себя добавлю — Для jquery 11:
    $(el).autocomplete( {
    source : function (request, response) {
    $.ajax({
    dataType: «json»
    })
    }
    })
    Иначе не работает.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *