在 Vaadin 7 Grid 中通过箭头键立即选择行答案

【问题标题】：Immediately select row by Arrow key in Vaadin 7 Grid在 Vaadin 7 Grid 中通过箭头键立即选择行
【发布时间】：2015-11-01 04:12:09
【问题描述】：

在Vaadin 7.5.3 中，Grid 小部件通过在单个单元格周围移动突出显示框来响应用户按下向上 (↑) 或向下 (↓) 箭头键。如果用户随后执行第二个操作，即按下空格键，则该行变为选择。

我对这种行为感到困惑。我本来希望箭头键的每一次敲击都会立即选择下一行。

有什么方法可以改变 Grid 的行为，直接选择下一行，而不需要用户做出第二次手势？

【问题讨论】：

我不这么认为。您可以关闭服务器并注意到您仍然可以使用键盘在 Grid 中导航 - 因此此功能在客户端 (javascript) 上运行。
@kukis 我不明白你的评论。我在问是否有办法进行击键并立即选择下一行（无需第二次击键）。
切线... InlineDateField 具有类似的两次击键行为。右箭头在月历中的下一个日期周围产生一个突出显示框。要实际选择该日期，您必须再次击键。奇怪的部分：第二次击键是RETURN 键，而不是Grid 使用的SPACE 键。

标签： keyboard-shortcuts vaadin vaadin7 vaadin-grid

【解决方案1】：

框架中没有内置功能。如果您不想自己为 Grid 创建扩展，您可以使用 GridFastNavigation 附加组件，它具有行焦点跟踪和事件侦听器。您可以在该事件中以编程方式选择行。

【讨论】：

【解决方案2】：

供参考，对应的vaadin forum topic about arrow navigation in grid。甚至有人发布了一个带有示例项目的 zip 文件。

我刚刚尝试了这个建议，它似乎有效，只是我现在收到“忽略不存在连接器的连接器请求”日志消息。

解决方案涉及编译您自己的小部件集，如果您还没有这样做，那么设置起来可能会很痛苦。

在小部件集/客户端包中：

@Connect(GridExtension.class)
public class GridExtensionConnector extends AbstractExtensionConnector
{
  @Override
  protected void extend(ServerConnector target)
  {
    GridConnector gridConnector = (GridConnector) target;

    final Grid<JsonObject> grid = gridConnector.getWidget();

    grid.addDomHandler(new KeyDownHandler() {
      @Override
      public void onKeyDown(KeyDownEvent event)
      {
        if(event.getNativeKeyCode() == 40)
        {
          selectFocused();
        }
        else if(event.getNativeKeyCode() == 38)
        {
          selectFocused();
        }
      }
    }, KeyDownEvent.getType());
  }

  public static void selectFocused()
  {
    Timer timer = new Timer() {
      @Override
      public void run()
      {
        execClick();
      }
    };

    timer.schedule(10);
  }

  public static native void execClick() /*-{
    // only click if focused row is not already selected
    if(!$wnd.$(".v-grid-body .v-grid-row-focused .v-grid-row-selected").length)
    {
      $wnd.$(".v-grid-body .v-grid-cell-focused").click();
    }
  }-*/;
}

其他地方：

@JavaScript({ "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" })
public class GridExtension extends AbstractExtension
{
  public void extend(Grid grid)
  {
    super.extend(grid);
  }
}

及用法：

new GridExtension().extend(grid);

请注意，此解决方案仅适用于每页的单个网格。 vaadin 论坛主题还包含有关如何使此功能适用于同一页面上具有多个网格的页面的建议，但它并没有立即为我编译，因此我不包括在此处。

【讨论】：