0

我有一个带有自动完成列的 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;
                }
            });
        }
    }},

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

jqGrid 4.4.1
jQuery 1.7.2
jQuery UI 1.8.18

4

1 回答 1

2

您应该将Name项目的属性从autocompleteSourceto重命名，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/

于 2012-10-09T05:47:53.390 回答