Question

我正在使用jqGrid和OnSelectRow函数来编辑网格中的行。当我在行上选择时，我选择的单元格将在Firefox上获得焦点，当我尝试单击同一行中的另一个单元格时，它将不会绘制焦点。我需要标记它或选择我们的行并返回它。

在Chrome中运行良好。

以下是代码：

    gridElement.jqGrid({
    url: $.url("/MyURL"),
    postData: {
        ID: function () { return $('#IDVAL').val(); }
    },
    datatype: "json",
    mtype: "POST",
    colNames: ['Name', 'Numbers', 'Options', 'TextBox', 'Hide'],
    colModel: [
       { name: 'Name', index: 'Name', width: 200, hidden: false },

       { name: 'Numbers', index: 'Type', width: 120, editable: true, edittype: "select", editoptions: { value: { 0: 'None', 1: 'One', 2: 'Two' }, dataInit: function (elem) { $(elem).width(85); } } },
       { name: 'Options', index: 'Summary', width: 120, editable: true, edittype: "select", editoptions: { value: { 0: 'None', 1: 'Option 1', 2: "Option 2" }, dataInit: function (elem) { $(elem).width(85); } } },
       { name: 'TextBox', index: 'TextBox', width: 300, edittype: "text", editable: true, editoptions: { size: "50", maxlength: "100"} },
       { name: 'Hide', index: 'Hide', width: 80, editable: true, edittype: "checkbox", editoptions: { value: "true:false"} }
          ],
    rowNum: 50,
    width: 800,
    height: "auto",
    loadtext: "Please wait...",
    viewrecords: true,
    hidegrid: false,
    onSelectRow: function (id) {
        if (id && id !== lastselref) {
            gridElement.saveRow(lastselref, false, 'clientArray', '');
            gridElement.jqGrid('restoreRow', lastselref);
            gridElement.jqGrid('editRow', id, true);

            lastselref = id;

        }
    },
    forceFit: true
});

Answer 1

您的代码中有一些奇怪的部分我建议您更改，但在此之前我想指出您所关注的焦点问题。

问题是jqGrid首先搜索行中第一个可编辑单元格的索引（请参阅the line），然后仅设置跳过{{1}的单元格的<input>元素你有哪些（见the line）：

<select>

可以修复以下内容，例如

setTimeout(function(){$("td:eq("+focus+") input",ind).focus();},0);

将使用伪选择器:input和:visible，就像在jqGrid代码的许多其他位置一样。

The demo可用于重现您的问题（只需舔一行并尝试使用箭头按钮查看未在编辑行的select元素上设置焦点）并使用another demo jqGrid的the fixed code。

我将错误和我的建议报告为the following pull request。

您的代码的其他一些小评论：

我不建议setTimeout(function(){$("td:eq("+focus+") :input:visible",ind).focus();},0); name index colModel name: 'Numbers', index: 'Type'和name: 'Options', index: 'Summary'属性的不同值。如果您确实需要使用服务器端排序index其他作为输入数据中的propety名称，那么最好使用jsonmap而不是名称。例如name: 'Type', index: 'Type', jsonmap: 'Numbers'。一般来说，我建议不要使用index财产。如果将使用name属性的值：name: 'Type', jsonmap: 'Numbers'。
您应该考虑使用loadonce: true，因为您没有那么多的数据行。
您应始终使用gridview: true选项来提高网格的效果（请参阅the answer）
我建议你使用autoencode: true选项强制jqGrid将输入数据解释为文本而不是HTML片段。

我发布的

更新： The pull request已合并到jqGrid的主要代码中。因此，上述更改（"td:eq("+focus+") input"到"td:eq("+focus+") :input:visible"）将出现在jqGrid的下一个版本中。

jqGrid - OnSelectRow可编辑字段，不关注Firefox中的点击

1 个答案: