Vaadin делает компонент таблицы динамическим или переходящим в сетку - PullRequest
Новая
       83

Vaadin делает компонент таблицы динамическим или переходящим в сетку

0 голосов
/ 19 февраля 2019

Изображение: изменения таблицы

Итак ... Я новичок в веб-разработке на vaadin и java, и у меня возникают проблемы с тем, как сделать это изменение, легкодобавьте новый столбец к компоненту таблицы, но мне нужно сделать это динамическим, чтобы при нажатии кнопки, такой как изображение (знак 6), добавлялся новый столбец с данными выпадающего списка, а также показывалась еще одна кнопка для продолжения добавления дополнительного списка....

Возможно ли это сделать с помощью компонента таблицы и как это можно сделать, или это проще сделать с помощью компонента сетки.

Компонент сетки дает мне этоinfo 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));
    }

1 Ответ

0 голосов
/ 19 февраля 2019

Может быть, будет проще создать пользовательский компонент композиции для детали с пунктирным контуром, вместо того, чтобы пытаться подогнать таблицу или сетку к этому динамическому, постоянно растущему формату?Это может быть что-то вроде 

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 для каждого из них.

...