选择后,免费的jqGrid自动完成功能会禁用内联编辑

时间:2016-02-24 17:31:11

标签: jquery autocomplete free-jqgrid

这是我的网格列代码:

{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之外,所有上述单元格都是可见且可编辑的,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);
    } 
}

这是内联编辑触发器:

select

按预期选择,显示和发送正确的值。我的问题是,选择一个值后,所有上面的单元格都被禁用进行编辑。我该如何防止这种行为?

-------------------- UPDATE ---------------------

jqGrid 4.13.0 - 免费jqGrid

的jquery-1.11.0.min.js

列出changeeditable:true个事件中的列$("#"+options.rowId+"_Disc").focus(); - 目标是将数据填入这些单元格

$char ASCII value or unicode code-point of the character char. base#value Integer with the base base, that must be an integer in the range 2..36. In Erlang 5.2/OTP R9B and earlier versions, the allowed range is 2..16. - 只是在选择自动填充数据后将焦点放入特定单元格。

1 个答案:

答案 0 :(得分:1)

在我看来,问题的根源是setCell在编辑模式 的单元格上的使用情况。一个人不能这样做。 setCell只会在单元格(<td>元素的innerHTML)上设置新的HTML内容,<input><select>和其他编辑控件将从行中删除。如果您确实需要使用相应控件中的值设置,那么您应该通过ID访问输入元素。

内联编辑行控件的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"align:"left"的不需要的属性colModel