keyboard-shortcuts - 立即在Vaadin 7网格中按箭头键选择行

Question

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

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

是否有某种方法可以更改网格的行为，以直接选择下一行，而无需用户进行第二手势？

Answer 1

作为引用，对应的vaadin forum topic about arrow navigation in grid。甚至有人用示例项目发布了一个zip文件。

我只是尝试了该建议，它似乎起作用，除了现在我收到“忽略不存在连接器的连接器请求”日志消息。

该解决方案涉及编译自己的窗口小部件集，因此如果尚未设置，可能会很麻烦。

在widgetset/client软件包中:

@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论坛主题还包含有关如何使同一页面上具有多个网格的页面工作的建议，但是它并没有立即为我编译，因此在此不进行介绍。