带有复选框的 vaadin8.1.0 网格有问题答案

【问题标题】：vaadin8.1.0 Grid with Checkbox had an Issue带有复选框的 vaadin8.1.0 网格有问题
【发布时间】：2017-08-02 07:49:48
【问题描述】：

我正在使用 vaadin 8.1.0 网格。我需要将复选框插入为一列，也作为列标题。当我单击列标题中的复选框时，应选中所有列复选框。那工作正常。但问题是，如果我有 100 行，当我检查标题复选框时，只检查了一些列复选框，即只检查显示的行。当我向下滚动时，未选中剩余行复选框。这是我的代码：

    List<Person> people = new ArrayList();
         for (int i = 0; i < 1000; i++) {
          people.add(i, new Person("Galileo Galilei", 1564));
        }

    CheckBox CheckBox1 = new CheckBox("All");
    CheckBox1.setValue(false);

        Grid<Person> grid = new Grid<>();
        grid.setItems( people);
        grid.addColumn(Person::getName).setCaption("Name");
        grid.addColumn(Person::getYear).setCaption("Year of birth").setId("1");

        grid.addComponentColumn(Person -> {
            CheckBox chk=new CheckBox("Chk 2");
            CheckBox1.addValueChangeListener(e->
            chk.setValue(CheckBox1.getValue())
            );
            return chk; 
        }).setCaption("ch2").setId("CH2");

        grid.getHeaderRow(0).getCell("CH2").setComponent( CheckBox1);

【问题讨论】：

如果在组件列中创建复选框后还执行chk.setValue(CheckBox1.getValue()) 会发生什么（除了已经在值更改侦听器中执行此操作）？
你试过 grid.setSelectionMode(SelectionMode.MULTI);而不是使用您自己的复选框。
是的，我尝试了 SelectionMode 但我的需求不同，我不需要选择行。

标签： java maven vaadin vaadin8

【解决方案1】：

嗯，出于性能原因，并非所有复选框都是从一开始就呈现的，正如您将在下面的 GIF 中看到的那样（右侧，项目以紫色闪烁），只有当前可见的那些。当您滚动时，新项目将替换旧项目，并为它们绘制复选框。然而，它们的初始状态将被取消选中，因此最简单的解决方案是将其初始状态设置为 主复选框之一：CheckBox chk = new CheckBox("Chk 2", CheckBox1.getValue());。

结果：

此外，查看代码可能会有轻微泄漏。由于每次滚动较大部分时都会绘制复选框，因此每次都会调用 grid.addComponentColumn 中的代码，并且值更改侦听器将不断添加到列表中......因为它们永远不会取消注册。看看下图，翻了几卷后，我得到了超过 9000 个：

为了克服这个问题，您可以在复选框被分离时取消注册侦听器：

grid.addComponentColumn(Person -> {
     CheckBox chk = new CheckBox("Chk 2", CheckBox1.getValue());
     // save the registration info to unregister at a later time
     Registration listenerRegistration = CheckBox1.addValueChangeListener(e -> chk.setValue(CheckBox1.getValue()));
     // when the checkbox is detached, remove the listener
     chk.addDetachListener(event -> listenerRegistration.remove());
     return chk;
 }).setCaption("ch2").setId("CH2");

现在列表只包含那些尚未分离的人：

【讨论】：

@Apoorva 不客气。我希望您也看到并考虑了有关听众积累的一些信息，以及如何取消注册。

【解决方案2】：

您还可以通过布尔字段“selected”扩展数据模型，或者将其包装到一个新类中，然后添加“selected”字段。然后在添加到 CheckBox 的 ValueChangeListener 中设置/取消设置该字段。

这还将负责选择所有网格条目，而不仅仅是渲染的那个。您只需在所有数据模型实例中更改“已选择”。

【讨论】：

【解决方案3】：

另一种方法是使用 ImageRenderer。这样您就不必与任何听众打交道了。

这假设您的模型有一个属性来保存选中/选中的值。

ThemeResource resourceChecked = new ThemeResource("selected.gif");
ThemeResource resourceUnchecked = new ThemeResource("deselected.gif");

grid.addColumn(person -> person.getSelected() ? resourceChecked : resourceUnchecked, 
    new ImageRenderer<>(event -> { 
                Person person = event.getItem();
                person.setSelected(!person.getSelected());
                grid.getDataProvider().refreshItem(person);
                grid.markAsDirty();
            }));

【讨论】：