如何在Vaadin 8网格的网格单元中单击组件以选择单元格行? [英] How to have a click on component in a grid cell in Vaadin 8 Grid to select cells row?

问题描述

在Vaadin 8 Grid中单击包含诸如VerticalLayout行之类的组件的单元格时，不会被选中(使用Vaadin 8.1.5).

When clicking a cell in a Vaadin 8 Grid that contains component like VerticalLayout row does not get selected (using Vaadin 8.1.5).

如果该组件未填充整个单元格，则单击单元格中未使用的区域将使该行处于选中状态.

If the component does not fill the whole cell then clicking the unused area in cell makes the row selected.

我一直在研究如何将单击组件转发到单元格单击侦听器，但是对此还没有任何把握.猜猜它甚至不是最好的方法.

I have been researching how could the click on component be forwarded to the cell click listener but have not get any grip yet on that. Guess it is even not the best way to do it.

有什么解决方案?

推荐答案

我提供了自己当前的解决方案，作为不混淆问题和单独提出可能的评论的答案.这种特殊的方法不是完美的-例如，multiselect的处理不正确-但这只是为了说明我决定如何处理这一点.

I provide my own current solution as an answer to not mess the question and for separate possible comments. This particular one is not perfect - for example multiselect is not handled correctly - but it is just meant to give the idea how i decided to handle this.

想法是为了扩展值提供者，使其拥有对其生成值的网格的引用.前面提到的-除了生成网格列组件之外-还向组件添加了click侦听器.

Idea is to extend a value provider so that it holds a reference to the grid for which it generates values. Beforementioned - in addition to that it generates grid column components - adds click listener to the component.

在处理此程序包时，单击一个组件，并引用了网格和行项目，因此选择/取消选择非常容易.

In this package is handled click on a component and there are references to the grid and row item so select/unselect is quite easy.

@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()仅返回随机布尔值，并用于从以下样式中进行选择:

In case somebody is interested: in this test code GridEntity.isValid() simply returns random boolean value and it is used to choose from styles below:

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

添加到网格的过程如下:

And adding to the grid goes like:

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

这篇关于如何在Vaadin 8网格的网格单元中单击组件以选择单元格行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！