Встроенное редактирование jqGrid: странное поведение с автозаполнением столбца
У меня есть jqGrid (используя встроенное редактирование) с автозаполнением столбца. Когда пользователь выбирает значение из столбца автозаполнения, обработчик события устанавливает значение в другом столбце, а также устанавливает значение в столбце автозаполнения в нечто иное, чем label
возвращается из источника автозаполнения. Определения двух столбцов (полный пример jsFiddle здесь):
{
name: 'cartoonId',
index: 'cartoonId',
width: 90,
editable: false},
{
name: 'cartoon',
index: 'cartoon',
width: 200,
editable: true,
edittype: 'text',
editoptions: {
dataInit: function(elem) {
$(elem).autocomplete({
source: autocompleteSource,
select: function(event, ui){
var rowId = $("#inlineGrid").jqGrid('getGridParam', 'selrow');
if(ui.item){
$("#inlineGrid").jqGrid('setCell', rowId, 'cartoonId', ui.item.CartoonId);
$("#inlineGrid").jqGrid('setCell', rowId, 'cartoon', ui.item.Name);
}
return false;
}
});
}
}},
Проблема состоит в том, что всякий раз, когда пользователь выбирает значение из автозаполнения, щелкая его или используя стрелки и нажимая клавишу табуляции, эта ячейка больше не редактируется, и сетка, по-видимому, теряет фокус полностью. Если я закомментирую строку, которая устанавливает cartoon
значение ячейки, оно ведет себя нормально. Есть ли способ, которым я могу обойти это поведение? Мне нужно, чтобы вся строка оставалась в режиме редактирования, включая cartoon
столбец, пока пользователь не завершит редактирование.
jqGrid 4.4.1
JQuery 1.7.2
JQuery UI 1.8.18
1 ответ
Вы должны переименовать Name
свойство предметов из autocompleteSource
в value
потому что JQuery UI Autocomplete исследует label
а также value
по умолчанию (см. документацию).
Вы не можете использовать setCell
из 'cartoon'
столбец, который в данный момент находится в режиме редактирования. Вы должны удалить return false;
от select
Обратный звонок тоже. Так что код может выглядеть примерно следующим
dataInit: function (elem) {
$(elem).autocomplete({
source: autocompleteSource,
select: function (event, ui) {
var rowId = $("#inlineGrid").jqGrid('getGridParam', 'selrow');
if (ui.item) {
$("#inlineGrid").jqGrid('setCell', rowId, 'cartoonId',
ui.item.CartoonId);
}
}
});
}
Смотрите http://jsfiddle.net/27dLM/38/