立即在Vaadin 7 Grid中按箭头键选择行

Question

在Vaadin 7.5.3中,Grid小部件通过移动单个单元格周围的高亮框来响应用户按下向上(↑)或向下(↓)箭头键.如果用户然后执行第二个操作,按下SpaceBar键,该行将成为选择.

我对此行为感到困惑.我希望箭头键的每个笔划立即选择下一行.

有没有办法改变网格的行为,直接选择下一行而不需要用户的第二个手势？

Answer 1

作为参考，相应的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 论坛主题还包含有关如何使其适用于同一页面上具有多个网格的页面的建议，但它没有立即为我编译，因此我不将其包含在此处。