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

【问题标题】：jqGrid - OnSelectRow editable fields not focusing on click in FirefoxjqGrid - OnSelectRow 可编辑字段不关注 Firefox 中的点击
【发布时间】：2014-08-29 05:59:44
【问题描述】：

我正在使用 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
});

【问题讨论】：

标签： jquery jqgrid

【解决方案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。

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

我不建议您为colModel（name: 'Numbers', index: 'Type' 和name: 'Options', index: 'Summary'）的name 和index 属性提供不同的值。如果您确实需要将index 其他作为输入数据中的属性名称用于服务器端排序，那么最好使用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 的下一个版本中。

【讨论】：