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

问题描述

我有一个jqGrid的（使用内联编辑）与自动完成列。当用户选择从自动完成列中的值，一个事件处理程序将在另一列中的值，并且还设置在自动完成列中的值比标签以外的东西返回从自动完成源。两列定义（完整的的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;
                }
            });
        }
    }},

问题是，当用户选择从自动完成，可以通过单击它或使用箭头和pressing TAB键的值，该单元不再是可编辑，和电网似乎失去完全集中。如果我注释掉设置行动画片单元格的值，它行为正常。有没有什么办法可以解决这个问题？我需要整行留在编辑模式，包括卡通列，直到用户完成编辑。

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.

4.4.1 jqGrid的结果
jQuery的1.7.2结果
jQuery UI的1.8.18

jqGrid 4.4.1
jQuery 1.7.2
jQuery UI 1.8.18

推荐答案

您应该重命名从 autocompleteSource 名称属性C $ C>为值因为jQuery UI自动完成检查标签和值每默认（参见文档）。

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).

您无法使用'卡通'列这是目前在编辑模式下的 setCell 。您应该删除返回false; 从选择回调了。因此，code可能对以下长相

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屋！