Vaadin - 如何将具有布尔值的网格列转换为复选框答案

【问题标题】：Vaadin - How to convert a Grid column which has boolean value to CheckboxVaadin - 如何将具有布尔值的网格列转换为复选框
【发布时间】：2016-07-05 05:44:24
【问题描述】：

我正在使用 Vaadin 7.6.4 进行 UI 工作。这有以下几点：-

我有一个窗口，其中包含一个带有数据的网格。这个窗口实际上是一种弹出窗口[当我的主屏幕点击设置图标时显示（此处未显示）。这工作正常（当单击主屏幕的设置图标时，让 UI 屏幕打开 Vaadin 窗口）。
问题在于如下所述显示数据。
此网格将有 4 列，其数据来自 bean 容器。
第一列是一个布尔字段，根据来自 bean 容器的数据显示真/假。
我需要将此布尔字段列转换为带有 true 的复选框，将字段显示为带有选中值的复选框。如果值为 false，则显示未选中的复选框。
我正在尝试按照下面的代码所示执行此操作，但我不断打印此复选框名称。我没有看到复选框，但那里印有“复选框”字样？
此复选框应该是可编辑的。这个想法是用户应该能够选择一些复选框，并且选择的复选框应该显示在面板中（此处未显示）。因此，复选框必须是可编辑的。

我该如何解决这个问题？窗口的代码如下所示

package com.platform28.mybatis;

import java.util.List;

import com.vaadin.data.Item;
import com.vaadin.data.util.BeanItemContainer;
import com.vaadin.data.util.GeneratedPropertyContainer;
import com.vaadin.data.util.PropertyValueGenerator;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.CheckBox;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;
@SuppressWarnings("serial")
public class ConfigPopUp extends Window {
VaadinUtils vaadinUtils = null;

public ConfigPopUp(List<TableColumnData> tblDataLst) {
    vaadinUtils = new VaadinUtils();

    // Some basic content for the window
    VerticalLayout configLayout = new VerticalLayout();
    configLayout.addComponent(new Label("Settings"));
    configLayout.setMargin(true);
    //configLayout.setWidth(null);;
    setContent(configLayout);
    //adding grid.
    List<SettingsColumnData> settingsList = vaadinUtils.processSettingsList(tblDataLst);
    final BeanItemContainer<SettingsColumnData> gridDataSource = new BeanItemContainer<SettingsColumnData>(SettingsColumnData.class, settingsList);

    //change boolean value to checkbox.
    GeneratedPropertyContainer gp = new GeneratedPropertyContainer(gridDataSource);
    gp.addGeneratedProperty("columnDisplayed", new PropertyValueGenerator<CheckBox>() {

        @Override
        public CheckBox getValue(Item item, Object itemId, Object propertyId) {
            boolean currentCheckBoxValue = (boolean) item.getItemProperty("columnDisplayed").getValue();
            CheckBox chkBox = new CheckBox();
            chkBox.setValue(currentCheckBoxValue);
            return chkBox;
        }

        @Override
        public Class<CheckBox> getType() {
            return CheckBox.class;
        }
    });



    Grid settingsGrid = new Grid(gp);
    settingsGrid.setWidth("100%");
    settingsGrid.setSizeFull();
    settingsGrid.setColumnOrder("columnDisplayed", "columnName","columnShortName","columnDescription");
    configLayout.addComponent(settingsGrid);
    //configLayout.setExpandRatio(settingsGrid, 1);

    // Disable the close button
    setClosable(false);

    HorizontalLayout hLayout = new HorizontalLayout();
    hLayout.setSpacing(true);
    hLayout.setMargin(true);

    // Trivial logic for closing the sub-window
    Button ok = new Button("Ok");
    ok.addClickListener(new ClickListener() {
        public void buttonClick(ClickEvent event) {
            close(); // Close the sub-window
        }
    });
    hLayout.addComponent(ok);

    // Trivial logic for closing the sub-window
    Button cancelBtn = new Button("Cancel");
    cancelBtn.addClickListener(new ClickListener() {
        public void buttonClick(ClickEvent event) {
            close(); // Close the sub-window
        }
    });
    hLayout.addComponent(cancelBtn);

    configLayout.addComponent(hLayout);

    // set pop up to center.
    center();
    // should be resizable
    setResizable(true);
    // should not be draggable
    setDraggable(false);
    //set it as modal window
    setModal(true);

    setWidth("50%");

    setHeight("75%");

}

}

【问题讨论】：

grid-renderers-collection-for-vaadin7 中的 CheckboxRenderer 似乎可以做你想做的事，尽管在我的测试中它在编辑时有一个奇怪的行为。也许您可以从sources 中获得一些灵感，并创建您自己的渲染器，它的行为就像您想要的那样。作为替代方案，您可以查看 the component renderer 插件，它使用组件的渲染器装饰网格。
感谢您的帮助。但是，我们最终使用了 SelectionMode.MULTI 选项

标签： checkbox vaadin

【解决方案1】：

好的，我们使用 SelectionMode.MULTI 来显示其中的行选择。 https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-grid/demo/selection.html

不过，我很想了解更多关于我们如何完成上述问题中所示的更改。

仍在寻找答案。

【讨论】：

【解决方案2】：

使用渲染器和转换器，您不需要使用SelectionMode.MULTI。

here 发布了一个示例。

【讨论】：