Question

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

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

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

Answer 1

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

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

解决方案涉及编译您自己的widgetset，如果您还没有这样做，那么设置很麻烦。

在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论坛帖子还包含一个关于如何在同一页面上为多个网格的页面进行此工作的建议，但它没有立即为我编译，因此我不在此处包含它。

Answer 2

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

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

2 个答案: