选择后免费的 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 返回的内容：

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

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