Vaadin - 如何将具有布尔值的网格列转换为复选框
Vaadin - How to convert a Grid column which has boolean value to Checkbox
我的 UI 工作使用 Vaadin 7.6.4。这有以下内容:-
- 我有一个 window,其中包含一个包含数据的网格。这个 window 实际上是一种弹出窗口 [ 当我在主屏幕上点击设置图标(此处未显示)时会出现。这工作正常(当单击主屏幕的设置图标时,获取 UI 屏幕以打开 Vaadin window)。
- 问题在于显示如下所述的数据。
- 此网格将包含 4 列,其数据来自 bean 容器。
- 第一列是一个布尔字段,true/false 根据 bean 容器中的数据显示。
- 我需要将此布尔字段列转换为一个复选框,并将该字段显示为值为 selected 的复选框。如果该值为 false,则显示一个未 selected 的复选框。
- 我正在尝试按照下面的代码所示执行此操作,但我一直在打印此复选框名称。我没有看到复选框,但那里印有 "checkbox" 字样?
- 此复选框应该是可编辑的。这个想法是用户应该能够 select 一些复选框并且 selected 应该显示在面板中(此处未显示)。因此,复选框必须是可编辑的。
我该如何解决这个问题? window 的代码如下所示
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%");
}
}
好的,我们使用 SelectionMode.MULTI 来显示其中的行选择。
https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-grid/demo/selection.html
不过,我很想了解更多关于我们如何完成上述问题中所示的更改。
仍在寻找答案。
使用渲染器和转换器,不需要使用SelectionMode.MULTI
。
发布了一个示例 。
我的 UI 工作使用 Vaadin 7.6.4。这有以下内容:-
- 我有一个 window,其中包含一个包含数据的网格。这个 window 实际上是一种弹出窗口 [ 当我在主屏幕上点击设置图标(此处未显示)时会出现。这工作正常(当单击主屏幕的设置图标时,获取 UI 屏幕以打开 Vaadin window)。
- 问题在于显示如下所述的数据。
- 此网格将包含 4 列,其数据来自 bean 容器。
- 第一列是一个布尔字段,true/false 根据 bean 容器中的数据显示。
- 我需要将此布尔字段列转换为一个复选框,并将该字段显示为值为 selected 的复选框。如果该值为 false,则显示一个未 selected 的复选框。
- 我正在尝试按照下面的代码所示执行此操作,但我一直在打印此复选框名称。我没有看到复选框,但那里印有 "checkbox" 字样?
- 此复选框应该是可编辑的。这个想法是用户应该能够 select 一些复选框并且 selected 应该显示在面板中(此处未显示)。因此,复选框必须是可编辑的。
我该如何解决这个问题? window 的代码如下所示
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%");
}
}
好的,我们使用 SelectionMode.MULTI 来显示其中的行选择。 https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-grid/demo/selection.html
不过,我很想了解更多关于我们如何完成上述问题中所示的更改。
仍在寻找答案。
使用渲染器和转换器,不需要使用SelectionMode.MULTI
。
发布了一个示例