Элементы dataGrid

Атрибуты dataGrid

Методы интерфейса DataGrid

Использование всплывающих подсказок

Использование интерфейса DetailsGenerator

Использование режима внутристрочного редактирования

Использование интерфейса ColumnGenerator

Использование рендереров

Header и Footer

Стили DataGrid

columns - элемент, определяющий набор колонок DataGrid. Если не задан, то столбцы таблицы будут автоматически определены из атрибутов представления, используемого при загрузке данных из контейнера данных. Элемент columns имеет следующие атрибуты:

<column id="date" property="date">
    <formatter class="com.haulmont.cuba.gui.components.formatters.DateFormatter"
               format="yyyy-MM-dd HH:mm:ss"
               useUserTimezone="true"/>
</column>

actions - необязательный элемент для описания действий, связанных с DataGrid. Кроме описания произвольных действий, поддерживаются следующие стандартные действия, определяемые перечислением ListActionType: create, edit, remove, refresh, add, exclude.

buttonsPanel - необязательный элемент, создающий над DataGrid контейнер ButtonsPanel для отображения кнопок действий.

rowsCount - необязательный элемент, создающий для DataGrid компонент RowsCount, который позволяет загружать в DataGrid данные постранично. Размер страницы задается путем ограничения количества записей в data loader’е методом CollectionLoader.setMaxResults() в контроллере экрана. Также можно управлять количеством записей, используя универсальный компонент Filter, связанный с источником данных DataGrid.

<rowsCount autoLoad="true"/>

boolean autoLoadEnabled = rowsCount.getAutoLoad();
rowsCount.setAutoLoad(false);

Атрибут aggregatable включает режим агрегации строк в DataGrid. Поддерживаются следующие операции:

<dataGrid id="ordersDataGrid"
          dataContainer="ordersDc"
          aggregationPosition="BOTTOM"
          aggregatable="true">
    <columns>
        <column id="customerGrade" property="customer.grade">
            <aggregation strategyClass="com.company.sample.CustomerGradeAggregation"
                         valueDescription="msg://customerGradeAggregationDesc"/>
        </column>
        <column id="amount" property="amount">
            <aggregation type="SUM">
                <formatter class="com.company.sample.MyFormatter"/>
            </aggregation>
        </column>
        ...
    </columns>
    ...
</dataGrid>

Атрибут aggregationPosition позволяет задать положение строки агрегации: TOP или BOTTOM. По умолчанию используется TOP.

columnResizeMode - устанавливает режим изменения размера колонок пользователем. Поддерживаются следующие режимы (по умолчанию ANIMATED):

columnsCollapsingAllowed - разрешает или запрещает пользователю скрывать колонки с помощью меню (sidebar menu) в правой части шапки DataGrid. Существуют дополнительные пункты меню:

contextMenuEnabled - включает или выключает контекстное меню в DataGrid. По умолчанию имеет значение true.

editorBuffered - включает буферизацию в режиме внутристрочного редактирования. По умолчанию буферизация разрешена (true).

editorCancelCaption - устанавливает заголовок кнопки отмены в режиме редактирования DataGrid.

editorCrossFieldValidate - включает перекрестную проверку полей во встроенном редакторе. По умолчанию имеет значение true.

editorEnabled - включает отображение UI для внутристрочного редактирования ячеек. Если dataGrid привязан к источнику данных с типом KeyValueCollectionContainer, предполагается, что он используется только для чтения, и использование атрибута editorEnabled в этом случае бессмысленно.

editorSaveCaption - устанавливает заголовок кнопки сохранения изменений в режиме редактирования DataGrid.

frozenColumnCount - устанавливает количество фиксированных колонок в DataGrid. Значение 0 означает, что фиксированных колонок не будет, кроме встроенной колонки с чекбоксами для множественного выбора, если она используется. Значение -1 означает, что фиксированных колонок не будет вообще.

headerVisible - определяет видимость заголовка DataGrid. По умолчанию имеет значение true.

htmlSanitizerEnabled - разрешает или запрещает санитизацию HTML. Компонент DataGrid имеет несколько провайдеров, которые могут отображать HTML:

reorderingAllowed - разрешает или запрещает пользователю менять местами колонки, перетаскивая их с помощью мыши. По умолчанию имеет значение true.

selectionMode - определяет режим выделения строк. Поддерживаются следующие режимы:

sortable - разрешает или запрещает сортировку в DataGrid. По умолчанию имеет значение true. Если сортировка разрешена, то при нажатии на название колонки справа от названия появляется соответствующий значок. Сортировку некоторой отдельной колонки можно запретить с помощью атрибута sortable этой колонки.

textSelectionEnabled - разрешает или запрещает выделение текста в ячейках DataGrid. По умолчанию имеет значение false.

getColumns() - возвращает текущий набор колонок DataGrid в порядке их текущего отображения.

getSelected(), getSingleSelected() - возвращают экземпляры сущностей, соответствующие выделенным в таблице строкам. Коллекцию можно получить вызовом метода getSelected(). Если ничего не выбрано, возвращается пустой набор. Если установлен SelectionMode.SINGLE, удобно пользоваться методом getSingleSelected(), возвращающим одну выбранную сущность или null, если ничего не выбрано.

getVisibleColumns() - возвращет набор видимых колонок DataGrid в порядке их текущего отображения.

scrollTo() - позволяет программно прокрутить DataGrid до нужной записи. Метод принимает экземпляр сущности, определяющий нужную строку в DataGrid. Перегруженный метод, помимо сущности, принимает ScrollDestination, имеющий следующие возможные значения:

scrollToStart() and scrollToEnd() - позволяют прокрутить DataGrid в начало и конец соответственно.

addCellStyleProvider() - позволяет добавить стиль отображения ячеек DataGrid.

addRowStyleProvider() - позволяет добавить стиль отображения строк DataGrid.

setEnterPressAction() - позволяет задать действие, выполняемое при нажатии клавиши Enter. Если такое действие не задано, таблица пытается найти среди своих действий подходящее в следующем порядке:

setItemClickAction() - позволяет задать действие, выполняемое при двойном клике на строке таблицы. Если такое действие не задано, при двойном клике таблица пытается найти среди своих действий подходящее в следующем порядке:

sort() - сортирует данные в переданной колонке в направлении, заданном одним из двух доступных значений перечисления SortDirection:

Метод getAggregationResults() возвращает мэп с результатами агрегации, где ключи в мэп − идентификаторы столбцов DataGrid, а значения − значения агрегации.

setDescriptionProvider() - используется для генерации всплывающих подсказок для отдельных колонок DataGrid. Строка описания может содержать HTML-разметку.

@Inject
private DataGrid<Customer> customersDataGrid;

@Subscribe
protected void onInit(InitEvent event) {
    customersDataGrid.getColumnNN("age").setDescriptionProvider(customer ->
                    getPropertyCaption(customer, "age") +
                            customer.getAge(),
            ContentMode.HTML);

    customersDataGrid.getColumnNN("active").setDescriptionProvider(customer ->
                    getPropertyCaption(customer, "active") +
                            getMessage(customer.getActive() ? "trueString" : "falseString"),
            ContentMode.HTML);

    customersDataGrid.getColumnNN("grade").setDescriptionProvider(customer ->
                    getPropertyCaption(customer, "grade") +
                            messages.getMessage(customer.getGrade()),
            ContentMode.HTML);
}

setRowDescriptionProvider() - используется для генерации всплывающих подсказок для строк DataGrid. Если подсказки для колонок также установлены, подсказка, сгенерированная для строки, будет использована только для тех ячеек, для которых не задана подсказка колонки.

customersDataGrid.setRowDescriptionProvider(Instance::getInstanceName);

getEditedItem() - возвращает редактируемую запись.

isEditorActive() - возвращает true, если в момент вызова редактируется какая-либо запись.

editItem(Object itemId)(устаревший) - открывает интерфейс внутристрочного редактора для идентификатора указанной записи. Пролистывает таблицу до нужной записи, если в момент вызова она не была видна на экране.

edit(Entity item) - открывает интерфейс внутристрочного редактора для указанной записи. Пролистывает таблицу до нужной записи, если в момент вызова она не была видна на экране.

setEditorCrossFieldValidate(boolean validate) - включает или отключает перекрестную проверку полей во встроенном редакторе. По умолчанию имеет значение true.

isEditorCrossFieldValidate() - возвращает значение true, если для встроенного редактора включена перекрестная проверка полей.

addEditorOpenListener(), removeEditorOpenListener() - слушатель открытия встроенного редактора DataGrid.

customersTable.addEditorOpenListener(editorOpenEvent -> {
    Map<String, Field> fieldMap = editorOpenEvent.getFields();
    Field active = fieldMap.get("active");
    Field grade = fieldMap.get("grade");

    ValueChangeListener listener = e ->
            active.setValue(true);
    grade.addValueChangeListener(listener);
});

addEditorCloseListener(), removeEditorCloseListener() - слушатель закрытия встроенного редактора DataGrid.

addEditorPreCommitListener(), removeEditorPreCommitListener() - слушатель редактора DataGrid, срабатывающий в процессе коммита изменений.

addEditorPostCommitListener(), removeEditorPostCommitListener() - слушатель, срабатывающий на финальной стадии коммита изменений.

Декларативно, используя аннотацию @Install в контроллере экрана:

@Inject
private UiComponents uiComponents;

@Install(to = "dataGrid.fullName", subject = "columnGenerator")
protected Component fullNameColumnGenerator(DataGrid.ColumnGeneratorEvent<Customer> e) {
    Label<String> label = uiComponents.create(Label.TYPE_STRING);
    label.setValue(e.getItem().getFirstName() + " " + e.getItem().getLastName());
    return label;
}

Программно с помощью следующих методов:

• addGeneratedColumn(String columnId, ColumnGenerator generator)

• addGeneratedColumn(String columnId, ColumnGenerator generator, int index)

ColumnGenerator - это специальный интерфейс, который описывает генерируемую колонку:

• значение для каждой строки колонки,

• тип значения - общий для всей колонки.

Например, для добавления генерируемой колонки, которая будет отображать логин пользователя в верхнем регистре, можно использовать следующий код:

@Subscribe
protected void onInit(InitEvent event) {
    DataGrid.Column column = usersGrid.addGeneratedColumn("loginUpperCase", new DataGrid.ColumnGenerator<User, String>(){
        @Override
        public String getValue(DataGrid.ColumnGeneratorEvent<User> event){
            return event.getItem().getLogin().toUpperCase();
        }

        @Override
        public Class<String> getType(){
            return String.class;
        }
    }, 1);
    column.setCaption("Login Upper Case");
}

Результат:

По умолчанию, генерируемая колонка добавляется в конец таблицы. Управлять расположением генерируемых колонок можно либо вставляя колонку по индексу, либо предварительно добавив колонку в XML с id, который потом передавать в метод addGeneratedColumn.

ButtonRenderer – рендерер, который использует строковое значение в качестве заголовка кнопки.

@Inject
private DataGrid<Customer> customersDataGrid;

@Inject
private Notifications notifications;

@Subscribe
public void onInit(InitEvent event) {
    DataGrid.ButtonRenderer<Customer> customersDataGridNameRenderer =
                customersDataGrid.createRenderer(DataGrid.ButtonRenderer.class);
    customersDataGridNameRenderer.setRendererClickListener(clickableButtonRendererClickEvent ->
        {
            notifications.create()
                .withType(Notifications.NotificationType.TRAY)
                .withCaption("ButtonRenderer")
                .withDescription("Column id: " + clickableButtonRendererClickEvent.getColumnId())
                .show();
        });
    customersDataGrid.getColumn("name").setRenderer(customersDataGridNameRenderer);
}

CheckBoxRenderer – рендерер, который отображает булево значение в виде значков чек-бокса.

<column property="checkBoxRenderer" id="checkBoxRendererColumn">
    <checkBoxRenderer/>
</column>

ClickableTextRenderer – отображает простой текст в виде ссылки. Позволяет задать обработчик, который будет вызван после нажатия на ссылку.

@Inject
private DataGrid<Customer> customersDataGrid;

@Inject
private Notifications notifications;

@Subscribe
public void onInit(InitEvent event) {
    DataGrid.ClickableTextRenderer<Customer> customersDataGridNameRenderer =
                customersDataGrid.createRenderer(DataGrid.ClickableTextRenderer.class);
    customersDataGridNameRenderer.setRendererClickListener(clickableTextRendererClickEvent -> {
        notifications.create()
                .withType(Notifications.NotificationType.TRAY)
                .withCaption("ClickableTextRenderer")
                .withDescription("Column id: " + clickableTextRendererClickEvent.getColumnId())
                .show();
    });
    customersDataGrid.getColumn("name").setRenderer(customersDataGridNameRenderer);
}

ComponentRenderer – рендерер для компонентов UI.

<column property="componentRenderer" id="componentRendererColumn">
    <componentRenderer/>
</column>

DateRenderer – рендерер для отображения дат в заданном формате.

<column property="dateRenderer" id="dateRendererColumn">
    <dateRenderer nullRepresentation="null" format="yyyy-MM-dd HH:mm:ss"/>
</column>

IconRenderer – рендерер, который представляет CubaIcon.

<column id="iconOS" property="iconOS">
    <iconRenderer/>
</column>

@Install(to = "devicesTable.iconOS", subject = "columnGenerator")
private Icons.Icon devicesTableIconOSColumnGenerator(DataGrid.ColumnGeneratorEvent<Device> event) {
    return CubaIcon.valueOf(event.getItem().getIconOS());
}

ImageRenderer – рендерер, который использует строковое значение в качестве пути до изображения.

@Inject
private DataGrid<TestEntity> testEntitiesDataGrid;
@Inject
private Notifications notifications;

@Subscribe
public void onInit(InitEvent event) {
    DataGrid.ImageRenderer<TestEntity> imageRenderer =
            testEntitiesDataGrid.createRenderer(DataGrid.ImageRenderer.class);
    imageRenderer.setRendererClickListener(imageRendererClickEvent -> notifications.create()
            .withType(Notifications.NotificationType.TRAY)
            .withCaption("ImageRenderer")
            .withDescription("Column id: " + imageRendererClickEvent.getColumnId())
            .show());
    testEntitiesDataGrid.getColumn("imageRendererColumn").setRenderer(imageRenderer);
}

HtmlRenderer – рендерер для отображения HTML-разметки.

<column property="htmlRenderer" id="htmlRendererColumn">
    <htmlRenderer nullRepresentation="null"/>
</column>

LocalDateRenderer – рендерер для отображения дат как значений типа LocalDate.

<column property="localDateRenderer" id="localDateRendererColumn">
    <localDateRenderer nullRepresentation="null" format="dd/MM/YYYY"/>
</column>

LocalDateTimeRenderer – рендерер для отображения дат как значений типа LocalDateTime.

<column property="localDateTimeRenderer" id="localDateTimeRendererColumn">
    <localDateTimeRenderer nullRepresentation="null" format="dd/MM/YYYY HH:mm:ss"/>
</column>

NumberRenderer – рендерер для отображения чисел в заданном формате.

<column property="numberRenderer" id="numberRendererColumn">
    <numberRenderer nullRepresentation="null" format="%f"/>
</column>

ProgressBarRenderer – рендерер, который отображает double-значения от 0 до 1 в виде компонента ProgressBar.

<column property="progressBar" id="progressBarColumn">
    <progressBarRenderer/>
</column>

TextRenderer – рендерер для отображения простого текста.

<column property="textRenderer" id="textRendererColumn">
    <textRenderer nullRepresentation="null"/>
</column>

декларативно, используя специальные вложенные элементы у элемента column.

через метод-фабрику интерфейса DataGrid, передавая в него интерфейс рендерера, для которого нужно создать имплементацию. Подходит для GUI и Web модулей.

непосредственно создавая имплементацию рендерера для соответствующего модуля:

appendHeaderRow(), appendFooterRow() - добавляет новую строку внизу секции заголовков/итогов.

prependHeaderRow(), prependFooterRow() - добавляет новую строку наверху секции заголовков/итогов.

addHeaderRowAt(), addFooterRowAt() - вставляет новую строку на заданную позицию в секции. Текущая строка на этой позиции, а также все следующие ниже, сдвигаются вниз с увеличением их индекса на 1.

removeHeaderRow(), removeFooterRow() - удаляет указанную строку в секции.

getHeaderRowCount(), getFooterRowCount() - возвращает количество строк в секции.

setDefaultHeaderRow() - устанавливает заголовок таблицы по умолчанию. Интерфейс стандартного заголовка по умолчанию включает в себя элементы для сортировки колонок таблицы.

setStyleName() - устанавливает пользовательский стиль для данной ячейки.

getCellType() - возвращает тип содержимого данной ячейки. Перечисление DataGridStaticCellType содержит 3 стандартных типа статических ячеек:

getComponent(), getHtml(), getText() - возвращает содержимое данной ячейки в зависимости от её типа.

borderless - удаляет внешнюю рамку.

no-horizontal-lines - удаляет горизонтальные строковые разделители.

no-vertical-lines - удаляет вертикальные разделители столбцов.

no-stripes - отключает чередование цветов строк таблицы.