Question

我有一个带有自动填充列的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

Answer 1

您应该将项目的Name属性从autocompleteSource重命名为value，因为jQuery UI自动填充会检查默认情况下的label和value（请参阅{ {3}}）。

您无法使用当前处于编辑模式的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);
            }
        }
    });
}

请参阅the documentation

jqGrid内联编辑：自动完成列的奇怪行为

1 个答案: