Javascript jqGrid-bindkeys更改箭头键和tab键行为

我想在jqGrid上提供

bindKeys

功能。这意味着在回车时，数据应该被保存（工作正常），在左箭头上，光标应该移动到左侧可编辑单元格，依此类推

这意味着当光标位于文本框中最左边的位置（如图所示）并按下向左箭头键时，光标应移动到上一个可编辑单元格（在本例中为项目编号）。如果光标在文本中间某个地方，那么正常行为应该发生。 类似地，在右箭头键上，如果光标位于最右边的位置，它应该移动到右边的可编辑单元格。同样，如果光标在文本中间某个地方，那么正常行为应该发生。 在向上和向下箭头键上，可编辑行应分别切换到上一行和下一行

我尝试过实现

bindKeys

，但似乎不起作用。我错过了什么

---

网格代码：

我建议您将演示修改为类似的内容，它使用修改后的

按键式事件处理程序：

list.keydown(function(e) {
  switch (e.which) {
    case 40: // down
      var $grid = $(this),
        $td = $(e.target).closest("tr.jqgrow>td"),
        $tr = $td.closest("tr.jqgrow"),//$td.parent()
        rowid = $tr.attr("id"),
        $trNext = $tr.next("tr.jqgrow"),
        p = $grid.jqGrid("getGridParam"),
        cm = $td.length > 0 ? p.colModel[$td[0].cellIndex] : null;
      var cmName = cm !== null && cm.editable ? cm.name : 'PackCartonNo';
      var selectedRowId = $grid.jqGrid('getGridParam', 'selrow');
      if (selectedRowId == null || rowid !== selectedRowId) { return; }

      // this is the DOM of table and $tr[0] is DOM of tr
      if ($trNext.length < 1) { return; }

      var rowidNext = $trNext.attr("id");
      $grid.jqGrid('saveRow', rowid, {
        aftersavefunc: function () {
          $(this).jqGrid("setSelection", rowidNext, false)
            .jqGrid("editRow", rowidNext, {
              keys: true,
              focusField: cmName
            });
        }
      });

      e.preventDefault();
      break;

    default:
      return;
  }
});

list.keydown（函数（e）{
开关（e.which）{
案例40://向下
var$grid=$（此），
$td=$（e.target）.closest（“tr.jqgrow>td”），
$tr=$td.closest（“tr.jqgrow”），/$td.parent（）
rowid=$tr.attr（“id”），
$trNext=$tr.next（“tr.jqgrow”），
p=$grid.jqGrid（“getGridParam”），
cm=$td.length>0？p.colModel[$td[0].cellIndex]：空；
var cmName=cm！==null&&cm.editable？cm.name:'PackCartonNo'；
var selectedRowId=$grid.jqGrid（'getGridParam'，'selrow'）；
if（selectedRowId==null | | rowid！==selectedRowId）{return；}
//这是表的DOM，$tr[0]是tr的DOM
如果（$trNext.length<1）{return；}
var rowidNext=$trNext.attr（“id”）；
$grid.jqGrid（'saveRow'，rowid{
aftersavefunc:函数（）{
$（this）.jqGrid（“setSelection”，rowidNext，false）
.jqGrid（“editRow”，rowidNext{
凯斯：没错，
焦点字段：cmName
});
}
});
e、 预防默认值（）；
打破
违约：
返回；
}
});

我建议您通常使用事件处理程序内部元素的相对寻址
e.target
是事件的目标DOM，通常位于某个
元素的某个位置。通过使用
var$td=$（e.target）.最近的（“tr.jqgrow>td”）
和
var$tr=$td.最近的（“tr.jqgrow”）
可以“旅行”到
和
元素，这些元素包含
e.target
。同样，您可以使用
var$trNext=$tr.next（“tr.jqgrow”）
来获取下一个数据行（以及
$tr.prev（“tr.jqgrow”）
来获取上一个数据行）。jQuery方法的实现使用本机DOM方法，这种方法工作得非常快。另一方面，list.getDataIDs（）检查网格的所有元素，并保存数组中所有元素的
id
属性值。它工作得更慢

最后，只有在成功保存上一行后，才应在下一行调用
setSelection
和
editRow
。例如，如果出现任何服务器端错误（例如，由于验证错误），您应该在当前行上保持编辑状态。此外，将方法调用放在
aftersavefunc
中可以确保我们不会同时编辑多行。
对不起，我还是不太清楚。首先是上下键。“可编辑行应分别切换到上行和下行”是什么意思？应保存或放弃当前可编辑行（如果存在）中的更改。一般来说，未经任何确认就保存或丢弃任何行可能是危险的。你是否对stackoverflow输入了长评论？键入错误的键可能会移动到另一页并放弃以前键入的所有文本。如果在stackoverflow上写入答案，则会出现一个获取确认对话框。同样，“光标位于文本框最左边”的要求听起来也非常具体。没有适用于所有web浏览器的通用API可用于获取插入符号位置。此外，键盘支持自动回复、结束和主页按钮。web浏览器中有一些标准。使用TAB和Shift TAB在输入字段之间移动，并使用左右键在一个输入字段内移动。在我看来，你的要求可能会被你的程序的新用户错误地解释。编辑控件可以不仅仅是简单的输入字段。On可以使用HTML5输入类型，如datetime、date、time等（请参阅并在Chrome中测试）。这些输入包含子部分，并使用左、右、上、下键在字段之间移动或更改值。举个例子。您的要求将破坏控制。@Oleg抱歉，这正是我的要求。我的用户经常更改数据，他们更喜欢使用键盘，而不是每次用鼠标保存数据（这节省了用户的时间）。因此，当按下上下键时，应保存正在编辑的当前行，且上面或下面的行应处于编辑模式。我可能也可以在服务器端处理验证。我现在不太担心验证问题，因为我的用户群是我公司的员工本身，而且该应用程序从未真正暴露在网络上。@Oleg同样，我的需求中也需要左键和右键。那么你是说插入符号的位置是不可能得到的？在我当前的旧系统中，用户使用4个导航键（左-右-上-下）在要编辑的数据之间切换。我不会太担心结束和结束按钮。我知道使用web表单的标准，但我的