Question

单击包含Grid行等组件的Vaadin 8 VerticalLayout中的单元格时未选中（使用Vaadin 8.1.5）。

如果组件未填满整个单元格，则单击单元格中未使用的区域将选中该行。

我一直在研究如何将组件的点击转发到单元格点击监听器，但还没有得到任何抓握。猜猜它甚至不是最好的方法。

解决方案是什么？

Answer 1

我提供我自己当前的解决方案作为答案，不要弄乱问题和单独的可能的评论。这个特别的一个并不完美 - 例如多选未得到正确处理 - 但它只是想让我知道我是如何决定处理它的。

想法是扩展值提供程序，使其保存对其生成值的网格的引用。前面提到 - 除了它生成网格列组件 - 添加单击侦听器到组件。

在此包中处理单击组件并且有对网格和行项的引用，因此选择/取消选择非常容易。

@RequiredArgsConstructor // i like lombok
private static class GridCallbackValueProvider
         implements ValueProvider<GridEntity, Layout> {

   private final Grid<GridEntity> grid;

   @Override
   public Layout apply(GridEntity source) {
      AbsoluteLayout al = new AbsoluteLayout();
      al.setWidth("100px");
      al.setHeight("30px");
      al.addStyleName(((source.isValid()) ? "green" : "red" ));
      al.addLayoutClickListener( clickEvent -> {
         if(grid.getSelectedItems().contains(source))
            grid.deselect(source);
         else
            grid.select(source);                
      });
      return al;
    }

}

如果有人感兴趣：在此测试代码GridEntity.isValid()中只返回随机布尔值，它用于从下面的样式中进行选择：

.green { background-color: green; }
.red { background-color: red; }

添加到网格中就像：

grid.addComponentColumn(new GridCallbackValueProvider(grid) )
        .setCaption("status").setId("status").setWidth(140);

Answer 2

请参阅以下问题 https://github.com/vaadin/framework/issues/10425。正如 tsuoanttila 所说，解决方案是调用 column.setWidgetEventsAllowed(true);，因此您不需要 AbstractLayout 包装器或 LayoutClickListener。

如何点击Vaadin 8 Grid中网格单元格中的组件来选择单元格行？

2 个答案: