如何在jqgrid内联编辑中启用向上/向下箭头键

时间:2011-07-21 19:28:01

标签: jquery asp.net-mvc-2 jqgrid

如何实现excel,如订单明细编辑网格。

这个网格应该像excel一样:

  1. 最好上/下箭头键移动到上一行/下一行并开始单元格编辑
  2. 如果按下向上/向下箭头键或单元格获得焦点,则所有单元格始终处于编辑模式或编辑模式 以任何其他方式。
  3. 标签移至行中的下一个单元格
  4. “提交”按钮将所有行发送到服务器中的ASP .NET mvc控制器
  5. 使用jqGrid是否合理/如何实现? 我发现的所有jqGrid示例都不允许在编辑模式下使用向上箭头键移动下一行/上一行。 如果jqGrid不合理,在哪里可以找到其他可用于实现此功能的免费组件? 在哪里可以找到示例代码?

    更新1

    我提出了更多问题,希望更简单:

    如何在jqgrid中以内联编辑模式启用向上和向下箭头键

    如何在内联编辑模式下强制向上箭头键将上一行和下箭头键移动到下一行?

    Desiread行动可能是:

    1. 当前行应保存
    2. 如果保存成功并且存在下一行/上一行,则焦点应移至同一列中的此行
    3. 应该开始内联编辑,当前列应该相同。
    4. Oleg提供的链接显示在单元格编辑模式下移动到同一行中的下一个/上一个单元格。如何移动到内联编辑中的下一行/上一行。即使可以实现以下步骤的soem,它也使jqGrid更适用于快速数据输入。我尝试下面的代码,但它不起作用,因为可能在其他行没有输入元素。解决方案是强制jqgrid以编辑模式显示所有单元格,然后可以使用此代码。不明白这是否合理/如何实施。

      <script>
      $(document).ready(function () {
          $("input.cell").keyup(function (e) {
              switch (e.keyCode) {
                  // up arrow        
                  case 40:
                      $(this).parent()
                          .parent()
                          .next()
                          .children("td")
                          .children("input.cell[name="
                              + $(this).attr("name") + "]")
                          .focus();
                      break;
      
                  // down arrow        
                  case 38:
                      $(this).parent()
                          .parent()
                          .prev()
                          .children("td")
                          .children("input.cell[name="
                              + $(this).attr("name") + "]")
                          .focus();
                      break;
              }
          });
      });</script>
      

      jqgrid edit and add rows with "tab" key提供了Tab键保存行的示例,我应该尝试使用此代码或其他想法来编辑它吗?

1 个答案:

答案 0 :(得分:0)

我花了整整一天时间研究jqGrid以便在我们的软件中使用,虽然该工具提供了很多潜力,但您要求实现的目标似乎只能通过强烈的自定义来实现。我希望有人回答并证明我错了,但我认为你和我都可以自己扩展它来添加这个功能。

真的很遗憾,如果它具有开箱即用的功能,那将是非常有价值的。