jqGrid 内联编辑:带有自动完成列的奇怪行为 [英] jqGrid inline edit: odd behavior with an autocomplete column

问题描述

我有一个带有自动完成列的 jqGrid(使用内联编辑).当用户从自动完成列中选择一个值时，事件处理程序会在另一列上设置一个值，并将自动完成列上的值设置为从自动完成源返回的 label 以外的其他值.两列定义(完整的 jsFiddle 示例在这里):

I have a jqGrid (using inline editing) with an autocomplete column. When the user selects a value from the autocomplete column, an event handler sets a value on another column, and also sets the value on the autocomplete column to something other than the label returned from the autocomplete source. The two column definitions (complete jsFiddle example here):

{
    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;
                }
            });
        }
    }},

问题是，每当用户从自动完成中选择一个值时，无论是通过单击它还是使用箭头并按 Tab 键，该单元格都不再可编辑，并且网格似乎完全失去焦点.如果我注释掉设置 cartoon 单元格值的行，它会正常运行.有什么办法可以解决这种行为吗?我需要整行都保持在编辑模式，包括 cartoon 列，直到用户完成编辑.

The problem is that whenever the user selects a value from the autocomplete, either by clicking it or using arrows and pressing the tab key, that cell is no longer editable, and the grid appears to lose focus entirely. If I comment out the line that sets the cartoon cell value, it behaves normally. Is there any way I can get around this behavior? I need the entire row to remain in edit mode, including the cartoon column, until the user completes the edit.

jqGrid 4.4.1
jQuery 1.7.2
jQuery UI 1.8.18

jqGrid 4.4.1
jQuery 1.7.2
jQuery UI 1.8.18

推荐答案

您应该将项目的 Name 属性从 autocompleteSource 重命名为 value 因为 jQuery UI 自动完成默认检查 label 和 value(参见 文档).

You should rename Name property of the items from the autocompleteSource to value because jQuery UI Autocomplete examines the label and value per default (see the documentation).

您不能使用当前处于编辑模式的 'cartoon' 列的 setCell.您也应该从 select 回调中删除 return false; .所以代码可以看起来如下

You can't use setCell of the 'cartoon' column which is currently in the editing mode. You should remove return false; from select callback too. So the code could looks about the following

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/

这篇关于jqGrid 内联编辑:带有自动完成列的奇怪行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！