keyboard-shortcuts - 在 Vaadin 7 Grid 中通过箭头键立即选择行

Question

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

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

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

Answer 1

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

Answer 2

作为参考，有关网格中箭头导航的相应vaadin 论坛主题。甚至有人发布了一个带有示例项目的 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 论坛主题还包含有关如何使此工作适用于同一页面上具有多个网格的页面的建议，但它并没有立即为我编译，所以我不包括在这里。