如何将焦点设置到单击以在 jqgrid 中开始内联编辑的单元格答案

【问题标题】：How to set focus to cell which was clicked to start inline edit in jqgrid如何将焦点设置到单击以在 jqgrid 中开始内联编辑的单元格
【发布时间】：2011-08-28 07:28:09
【问题描述】：

在 jqgrid 中，内联编辑是通过双击单元格来进行的。光标位于第一个可编辑列。第二次单击需要将光标置于被单击的单元格上。

如何将光标放在被点击开始内联编辑的单元格上？在单元格编辑模式下，单击的单元格正确接收焦点。

function beginInlineEdit(rowID, afterSave) {
    var grid2 = $("#grid");
    if (rowID && rowID !== lastSelectedRow) {
        var scrollPosition = $("#grid").closest(".ui-jqgrid-bdiv").scrollLeft();
        cancelEditing($("#grid"));
        lastSelectedRow = rowID;
        setTimeout(function () {
            grid2.closest(".ui-jqgrid-bdiv").scrollLeft(scrollPosition);
        }, 100);
    }
    $("tr#" + lastSelectedRow + " div.ui-inline-edit, " + "tr#" + lastSelectedRow + " div.ui-inline-del").hide();
    $("tr#" + lastSelectedRow + " div.ui-inline-save, " + "tr#" + lastSelectedRow + " div.ui-inline-cancel").show();

    $("#grid").jqGrid('editRow', lastSelectedRow, true, null, null, null,
                 { _dokdata: FormData },
                 afterSave,
                 errorfunc,
                 function () {
                     cancelEditing($("#grid"));
                     setFocusToGrid();
                 }
             );
}

更新 1

我在 IE9 中尝试了 Oleg 演示。问题：

双击复选框列仍将焦点放在第一列。
我减小了浏览窗口宽度并向右滚动。单击最右边的列会导致奇怪的快速闪烁：网格滚动到最左边的位置，然后又回到右边的位置。

如何解决这些问题？

【问题讨论】：

标签： jqgrid

【解决方案1】：

从the answer 看the demo。演示可以完全满足您的需要，或者您可以根据自己的目的修改演示。

更新：1) 您尝试过我的原始演示还是尝试在您的代码中使用所描述的想法？在我的环境中（在不同的计算机上）the demo 将焦点放在单击的单元格中。它在 IE9（本机甚至兼容模式）、IE8、Google Chrome 13、Safari 5.1、Opera 11.50、Firefox 3.6.20 和 Nightly 9.0a1（Firefox 的下一个版本）中都能正常工作。

2) 在第一个编辑位置滚动网格然后到单击的单元格是正确的行为。默认情况下，jqGrid 内联编辑将焦点设置在第一个编辑单元格上，然后在editRow 的回调函数oneditfunc 内部，我们将焦点更改为单击的单元格。

【讨论】：

谢谢。我尝试了您的演示并发现了两个问题。我更新了问题并描述了这些问题。此外，在我的测试用例中，按回车键将 jqgrid 滚动到最左边的位置。如果您的测试用例水平偏移没有改变。可能是保存到服务器造成的
@Andrus：我在您的测试用例代码中看不到所需的更改。在invokeEditRow 中，您仍然使用$("#grid").jqGrid('editRow', lastSelectedRow, true, null, null, null, ...。所以没有使用oneditfunc应该设置焦点。
我试过你的演示并双击复选框。内联编辑开始，但焦点不是放在被点击的复选框上，而是放在第一个可编辑的列上。我正在寻找一种方法来消除不必要的水平滚动。如果大量行被更改，这将变成 annyoiing。
@Andrus：在某些浏览器中（例如在谷歌浏览器中），光标会放在输入元素的末尾。可以像here 中描述的那样将插入符号移动到单击点。我想所有在一起应该不是那么容易。
@Andrus：您可以尝试使用onCellSelect 来执行此操作或在beforeSelectRow 或ondblClickRow 内部实现进入内联模式。所有事件都有e 参数，代表event 对象，该对象包含有关单击的确切鼠标位置的信息。因此，总的来说，您将获得所有需要的信息。

【解决方案2】：

我的工作解决方案：

onSelectRow: function(rowid,status,e){
                    if(rowid && rowid!==lastSel){ 
                        jQuery('#table_salary').restoreRow(lastSel); 
                        lastSel=rowid; 
                    }
                    jQuery('#table_salary').editRow(rowid, true);
                    $("input, select",e.target).focus();
                },

注意：

需要声明变量lastSel
table_salary - 更改为您的表格名称

【讨论】：