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

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

var gridfs
// How to implement this code
if gridfs.fs.exists("object_id"){
    // How to implement this code
    gridfs.fs.upload("the other part content")
}else{
    // code here i implemented 
    gridfs.fs.createfs("file_name", "first part content")
}

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

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

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

1 个答案: