select 后免费的 jqGrid 自动完成禁用内联编辑

Question

这是我的网格列代码：

{name:'Track_Name',index:'isrc.Track_Name', width:195, align:"left", editable:true,
    editoptions:{
        dataInit:function (elem, options) {
            $(elem).autocomplete({
                source: "xtras/search_isrc.php",
                dataType: "json",
                minLength: 2,
                select: function(event, ui) {

                    $grid.jqGrid("setCell", options.rowId, "ISRC", ui.item.ISRC);
                    $grid.jqGrid("setCell", options.rowId, "Track_Name", ui.item.Track_Name);
                    $grid.jqGrid("setCell", options.rowId, "Time", ui.item.Track_Time);
                    $grid.jqGrid("setCell", options.rowId, "ArtistName", ui.item.ArtistName);
                    $grid.jqGrid("setCell", options.rowId, "Writer", ui.item.Writer);
                    $grid.jqGrid("setCell", options.rowId, "Publisher", ui.item.Publisher);
                    $grid.jqGrid("setCell", options.rowId, "Year", ui.item.TrackPLineYear);
                    $grid.jqGrid("setCell", options.rowId, "PInfo", ui.item.TrackPLineInfo);
                    $grid.jqGrid("setCell", options.rowId, "isrc_ID", ui.item.isrc_ID);

                    $("#"+options.rowId+"_Disc").focus();
                },
                change: function(event, ui) {
                    if (ui.item) {
                        $grid.jqGrid("setCell", options.rowId, "ISRC", ui.item.ISRC);
                        $grid.jqGrid("setCell", options.rowId, "Track_Name", ui.item.Track_Name);
                        $grid.jqGrid("setCell", options.rowId, "Time", ui.item.Track_Time);
                        $grid.jqGrid("setCell", options.rowId, "ArtistName", ui.item.ArtistName);
                        $grid.jqGrid("setCell", options.rowId, "Writer", ui.item.Writer);
                        $grid.jqGrid("setCell", options.rowId, "Publisher", ui.item.Publisher);
                        $grid.jqGrid("setCell", options.rowId, "Year", ui.item.TrackPLineYear);
                        $grid.jqGrid("setCell", options.rowId, "PInfo", ui.item.TrackPLineInfo);
                        $grid.jqGrid("setCell", options.rowId, "isrc_ID", ui.item.isrc_ID);
                        $("#"+options.rowId+"_Disc").focus();
                    }
                }
            });
            $('.ui-autocomplete').css('zIndex',1000); 

            if (options.mode !== "add") {
                $(elem).css({'border':'1px solid red','background-color':'#e8b7cf'});
            }
        }
    }
},

除 isrc_ID 之外的所有上述单元格都是可见和可编辑的，isrc_ID 是可编辑但隐藏的。这是 search_isrc.php returns:

$row_array['label']             = $data['Track_Name'];
$row_array['ISRC']              = $data['ISRC'];   
$row_array['Track_Name']        = $data['Track_Name'];
$row_array['ArtistName']        = $data['ArtistName']; 
$row_array['Track_Time']        = $data['Track_Time'];
$row_array['Writer']            = $data['Writer']; 
$row_array['Publisher']         = $data['Publisher']; 
$row_array['TrackPLineYear']    = $data['TrackPLineYear']; 
$row_array['TrackPLineInfo']    = $data['TrackPLineInfo']; 
$row_array['isrc_ID']           = $data['isrc_ID'];

这是内联编辑触发器：

ondblClickRow: function (rowid) {
    var savedRows = $grid.jqGrid("getGridParam", "savedRow");
    $grid.jqGrid("setSelection", rowid);

    if (savedRows.length > 0 && savedRows[0].id !== rowid) {
        // cancel editing of another row is editing
        // don't cancel on double click on the current editing
        $grid.jqGrid("restoreRow", savedRows[0].id);
    }
    if (savedRows.length === 0) {
        $grid.jqGrid("editRow", rowid, editOptions);
    } 
}

这会按预期选择、显示和发送正确的值。我的问题是，在选择一个值后，以上所有单元格都无法进行编辑。我怎样才能防止这种行为？

--------------------更新--------------------

jqGrid 4.13.0 - 免费 jqGrid

jquery-1.11.0.min.js

select 和 change 事件中列出的列都是 editable:true - 目标是将数据填入这些单元格

$("#"+options.rowId+"_Disc").focus(); - 是否只是在选择自动完成数据后将焦点放在特定单元格中。

Answer 1

在我看来，您的问题的根源是在处于编辑模式 的单元格上使用了setCell。一个人不能这样做。 setCell 只会在单元格上设置新的 HTML 内容（<td> 元素的内部 HTML）和 <input>、<select> 和其他编辑控件将从行中删除。如果你真的需要在相应的控件中使用设置值，那么你应该通过 ids 访问输入元素。

行内编辑行的控件id将以rowid为前缀，下划线字符_和列名组成。例如代码片段

$grid.jqGrid("setCell", options.rowId, "ISRC", ui.item.ISRC);
$grid.jqGrid("setCell", options.rowId, "Track_Name", ui.item.Track_Name);
$grid.jqGrid("setCell", options.rowId, "Time", ui.item.Track_Time);
...

应该改写成

var idPrefix = "#" + options.rowId + "_", item = ui.item;
$(idPrefix + "ISRC").val(item.ISRC);
$(idPrefix + "Track_Name").val(item.Track_Name);
$(idPrefix + "Time").val(item.Track_Time);
...

此外，您应该删除 jQuery UI 中不存在的选项 dataType: "json" 自动完成和 colModel 中不需要的属性 align:"left"。

select 后免费的 jqGrid 自动完成禁用内联编辑

Free jqGrid autocomplete disables for inline editing after select

jquery

autocomplete

free-jqgrid