Vaadin 使表格组件动态或更改为网格

Question

Image : table changes

所以...我是 vaadin 和 java web 开发的新手，我在如何进行此更改时遇到了麻烦，向表组件添加新列很容易，但我需要使这个动态因此，当单击像图像（数字 6 符号）这样的按钮时，会添加一个新列，其中包含要选择的组合框数据，并显示另一个按钮以继续添加更多组合框...

用表格组件来做这个是否可行以及如何做，或者在网格组件上做这个更容易。

网格组件为我提供了此信息https://vaadin.com/docs/v7/framework/components/components-grid.html，它向我展示了所有功能，但它仍然是一种传统的表格样式方式。

现在我正在加载数据：

for(int i=0; i<dataSourcesIdsToAdd.size(); i++)
    {
        Object[] rptKeyColMapItemValues = new Object[4];

        //Loading field types               
        ComboBox cbxDataSource = new ComboBox("");
        cbxDataSource.setStyleName("tiny");
        cbxDataSource.setRequired(true);
        cbxDataSource.setRequiredError("This field is required.");
        cbxDataSource.setHeight(20, Unit.PIXELS);
        cbxDataSource.setWidth(100, Unit.PERCENTAGE);   
        cbxDataSource.addItem(dataSourcesIdsToAdd.get(i));
        cbxDataSource.setItemCaption(dataSourcesIdsToAdd.get(i), dataSourcesNamesToAdd.get(i));
        cbxDataSource.setValue(dataSourcesIdsToAdd.get(i));
        cbxDataSource.setReadOnly(true);
        rptKeyColMapItemValues[0] = cbxDataSource;

        CheckBox chxMandatory = new CheckBox();
        chxMandatory.setStyleName("tiny");
        chxMandatory.setVisible(true);
        chxMandatory.setHeight(20, Unit.PIXELS);
        rptKeyColMapItemValues[1] = chxMandatory;

        ComboBox cbxDataSourceField = new ComboBox("");
        cbxDataSourceField.setStyleName("tiny");
        cbxDataSourceField.setRequired(true);
        cbxDataSourceField.setRequiredError("This field is required.");
        cbxDataSourceField.setHeight(20, Unit.PIXELS);
        cbxDataSourceField.setWidth(100, Unit.PERCENTAGE);
        rptKeyColMapItemValues[2] = cbxDataSourceField;

        Button btnNewColumn = new Button(FontAwesome.PLUS_CIRCLE);
        btnNewColumn.setHeight(20, Unit.PIXELS);
        rptKeyColMapItemValues[3] = btnNewColumn;

        tblKeyColumnMapping.addItem(rptKeyColMapItemValues, dataSourcesIdsToAdd.get(i));
    }

Answer 1

为带有虚线轮廓的部件创建自定义合成组件，而不是尝试使表格或网格适应这种动态的、不断增长的格式，会不会更容易？可能是这样的

public class DataSourceComponent extends HorizontalLayout {
  private ComboBox dataSourceTable;
  private CheckBox mandatory;
  private List<DataSourceFieldComponent> fields;

  ...

  public void setDataSource(DataSourceObject ds) { ... }

这些 DataSourceFieldComponent 中的每一个都类似地是 ComboBox 和添加按钮的组合。 （或者，上部组件负责将 ComboBox 和 Button 作为一对添加。）在每个组件上放置一个定义的宽度，它们将很好地对齐。我想你必须在字段成对出现时稍微修改这个想法，但我想你明白了。

然后在上一层您将有一个视图，该视图呈现标题并接收这些数据源对象的列表，并为每个对象初始化一个 DataSourceComponent。