jquery - jqGrid - OnSelectRow 可编辑字段不关注 Firefox 中的单击

Question

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

它在 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 )，然后仅将其设置为 <input>跳过 <select> 的单元格元素您拥有的(请参阅 the line ):

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

例如可以修复以下内容

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

其中伪选择器:input和 :visible将像 jqGrid 代码的许多其他地方一样使用。

The demo可用于重现您的问题(只需单击一行并尝试使用箭头按钮来查看焦点未设置在编辑行中的选择元素上)和 another demo使用过the fixed code jqGrid 的。

我报告了该错误和我的建议:the following pull request .

对您的代码的一些其他小注释:

• 我不向您推荐 name 的不同值和index colModel的属性( name: 'Numbers', index: 'Type' 和 name: 'Options', index: 'Summary' )。如果您确实需要用于服务器端排序 index other 作为输入数据中的属性名称，那么最好使用 jsonmap而不是名字。例如name: 'Type', index: 'Type', jsonmap: 'Numbers' 。一般来说，我建议不要使用 index属性(property)根本。在这种情况下，值 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 的下一个版本中。