jqGrid - 绑定键更改箭头和制表键行为 [英] jqGrid - bindkeys change arrow and tab keys behavior

问题描述

我想在我的jqGrid上提供 bindKeys 功能。这意味着在 Enter 中，数据应该保存（工作正常），在 left 箭头上，光标应该移动到可编辑的单元格中，等等。 b
$ b

这意味着当光标位于文本框中最左侧的位置时如图所示，按下 left 方向键，光标应移动到前一个可编辑的单元格（在本例中为 ）。如果光标位于文本中间的某个位置，则正常行为应该发生。

同样在右键方向键上，如果光标位于最右边的位置，它应该移动到正确的可编辑单元格。再次，如果光标位于文本中间的某处，那么正常行为应该发生。 b
在向上和向下方向键中，可编辑行应分别切换到上方和下方行。

我尝试过执行 bindKeys ，但它似乎不起作用。我在这里错过了什么？

网格代码： jsFiddle

解决方案

我建议你修改你的demo https://jsfiddle.net/kapv1qjy/26/ 与 https://jsfiddle.net/OlegKi/kapv1qjy/28/ ，它使用修改的 keydown $ b $ pre $ lt; code> 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] .cell索引]：null;
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 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（）;
休息;

默认值：
return;
}
}）;

我建议您一般使用 relative 寻址元素内部的事件处理程序。 e.target 是事件的目标DOM，通常位于某个< td> 元素内。根据用法 var $ td = $（e.target）.closest（tr.jqgrow> td）和 var $ tr = $ td。最接近（tr.jqgrow）您可以前往< td> 和< tr> 元素，其中包含 e.target 。以同样的方式，您可以使用 var $ trNext = $ tr.next（tr.jqgrow）来获取下一个数据行（并且 $ tr.prev（tr.jqgrow）获取前一个）。 jQuery方法的实现使用原生DOM方法，其工作速度非常快。另一方面， list.getDataIDs（）会覆盖网格的所有元素，并保存 id code>数组中所有元素的属性。它的工作更慢。

最后你应该调用 setSelection 和 editRow 上执行$ c>。例如，如果出现任何服务器端错误，您应该在当前行上进行编辑（例如，由于验证错误）。此外，在 aftersavefunc 中放置方法的调用，可以确保我们不会同时编辑多行。

I would like to provide bindKeys functionality on my jqGrid. This means on Enter, the data should be saved (working fine), on left arrow the cursor should move to the left editable cell and so on.

This means when the cursor is at left most position in the textbox as shown in the image and the left arrow key is pressed, the cursor should be moved to the previous editable cell (in this case Item Number). If the cursor is somewhere in the middle of the text then the normal behavior should be happening.

Similarly on the right arrow key, it should move to the right editable cell, if the cursor is at the right most position. Again if the cursor is somewhere in the middle of the text then the normal behavior should be happening.

On the up and down arrow keys, the editable row should be switched to the upper and lower row respectively.

I have tried implementing bindKeys but it does not seem to work. What am I missing here?

Grid code: jsFiddle

解决方案

I would suggest you to modify your demo https://jsfiddle.net/kapv1qjy/26/ to something like https://jsfiddle.net/OlegKi/kapv1qjy/28/, which uses modified keydown event handler:

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

I'd recommend you in general to use relative addressing of elements inside of event handler. e.target is the target DOM of the event, which is typically somewhere inside of some <td> element. By usage var $td = $(e.target).closest("tr.jqgrow>td") and var $tr = $td.closest("tr.jqgrow") you can "travel" up to the the <td> and <tr> elements, which contains e.target. In the same way you can use var $trNext = $tr.next("tr.jqgrow"), to get the next data row (and $tr.prev("tr.jqgrow") to get the previous one). The implementation of jQuery methods uses native DOM methods, which works very quickly. On the other side list.getDataIDs() goes over all elements of the grid and saves the values of id attributes of all the elements in an array. It works more slowly.

Finally you should calls setSelection and editRow on the next row only after the previous row is successfully saved. You should stay editing on the current row in case of any server side errors, for example, (because of validation errors, for example). Moreover placing of the calls of the methods inside of aftersavefunc makes us sure that we will not edit multiple rows at the same time.

这篇关于jqGrid - 绑定键更改箭头和制表键行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！