Question

我想在jqGrid上提供bindKeys功能。这意味着在 Enter 上，数据应保存（正常工作），在 left 箭头上，光标应移动到左侧可编辑单元格，依此类推。

这意味着当光标位于文本框中最左侧的位置（如图像所示）并按下 left 箭头键时，光标应移动到上一个可编辑单元格（在这种情况下） 项目编号）。如果光标位于文本中间的某个位置，则应该发生正常行为。

类似地，在 right 箭头键上，如果光标位于最右侧位置，它应移动到右侧可编辑单元格。再次，如果光标位于文本中间的某个位置，则应该发生正常行为。

在 up 和 down 箭头键上，可编辑行应分别切换到上一行和下一行。

我尝试过实施bindKeys，但似乎无效。我在这里缺少什么？

网格代码： jsFiddle

Answer 1

我建议您将示例https://jsfiddle.net/kapv1qjy/26/修改为https://jsfiddle.net/OlegKi/kapv1qjy/28/，使用修改后的keydown事件处理程序：

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;
  }
});

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

最后，只有在成功保存上一行之后，才应在下一行上调用setSelection和editRow。例如，如果出现任何服务器端错误，您应该继续编辑当前行（例如，由于验证错误）。此外，放置aftersavefunc内部方法的调用可以确保我们不会同时编辑多行。

jqGrid - bindkeys更改箭头和制表符键的行为

1 个答案: