GroupTable

Компонент GroupTable – это таблица с возможностью динамической группировки по значениям одной или нескольких колонок.

XML-имя компонента: groupTable.

Основы

GroupTable в основном повторяет функциональность компонента Table.

Ниже показан типичный GroupTable:

group table anatomy
  1. Колонки, участвующие в группировке

  2. Разделитель групп

  3. Строки групп

  4. Кнопка разворачивания группы

  5. Кнопка сворачивания группы

Ниже представлен пример объявления GroupTable в XML-дескрипторе экрана:

<data>
    <collection id="customersDc" class="ui.ex1.entity.Customer">
        <fetchPlan extends="_base"/>
        <loader id="customersDl">
            <query>
                <![CDATA[select e from uiex1_Customer e]]>
            </query>
        </loader>
    </collection>
</data>
<layout>
    <groupTable id="groupTable" dataContainer="customersDc" width="100%" >
        <columns>
            <group>
                <column id="city"/>
                <column id="level"/>
            </group>
            <column id="rewardPoints"/>
            <column id="firstName"/>
            <column id="lastName"/>
        </columns>
    </groupTable>
</layout>

В приведенном примере есть контейнер коллекции для сущности Customer. Компонент GroupTable привязан к контейнеру с помощью атрибута dataContainer, в то время как его элемент columns определяет, какие атрибуты сущности отображаются в колонках таблицы.

Группировка

Для того чтобы сгруппировать таблицу по какой-либо колонке, нужно в заголовке таблицы перетащить эту колонку в позицию слева от элемента group table icon. Сгруппированные значения можно разворачивать и сворачивать с помощью кнопок group table plus/group table minus.

group table grouping

group − необязательный элемент, может в единственном экземпляре находиться внутри колонок. Содержит набор элементов column, по которым будет выполняться первоначальная группировка при открытии экрана.

В приведенном ниже примере мы будем использовать атрибут includeAll элемента columns совместно с элементом group. Группировка произведена по колонке city:

<groupTable id="customersGroupTable" dataContainer="customersDc" width="100%">
    <columns includeAll="true">
        <group>
            <column id="city"/>
        </group>
        <column id="firstName" groupAllowed="false"/>
    </columns>
</groupTable>

Каждый элемент column может содержать атрибут groupAllowed с булевым значением. С помощью этого атрибута можно запретить пользователю группировать таблицу по данной колонке. Значение по умолчанию – true.

С помощью атрибуты fixedGrouping можно позволить пользователю изменять то, какие колонки участвуют в группировке. Значение по умолчанию – false.

Агрегация

GroupTable поддерживает агрегацию для строк таблицы. Для получения дополнительной информации см. раздел Table.

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

group table aggregation anatomy
  1. Агрегация по всем строкам.

  2. Агрегация по группам.

Отображение агрегации по всем строкам можно отключить, установив false в атрибуте showTotalAggregation. Значение по умолчанию – true.

Множественный выбор

При включенном атрибуте multiselect клик по строке группировки с зажатой клавишей Ctrl разворачивает группу (если та была свернута) и применяет выделение ко всем строкам этой группы. При этом, если вся группа выделена, Ctrl+click не снимает выделение со всей группы. Вы по-прежнему можете снять выделение с отдельных строк, пользуясь стандартным поведением клавиши Ctrl.

Экспорт значений колонок

См. раздел Exporting Column Values компонента Table.

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

  • groupByColumns() - применяет группировку по заданным колонкам.

    В примере ниже таблица будет сгруппирована сначала по колонке level, а затем – по колонке city:

    groupTableP.groupByColumns("level", "city");
  • ungroupByColumns() - снимает группировку по заданным колонкам.

    Следующий пример снимет группировку по level, однако группировка по колонке city из предыдущего примера будет сохранена:

    groupTableP.ungroupByColumns("level");
  • ungroup() - снимает группировку по всем колонкам.

  • setShowItemsCountForGroup() - показывает или скрывает количество элементов группы GroupTable. Значение по умолчанию – true.

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

  • Метод setStyleProvider() позволяет задать стиль отображения ячеек таблицы. Для GroupTable данный метод будет принимать GroupTable.GroupStyleProvider, который расширяет Table.StyleProvider.

    GroupStyleProvider имеет специальный метод для стилизации сгруппированных строк с GroupInfo в качестве принимаемого параметра. Он будет вызываться для каждой сгруппированной строки в GroupTable.

    Пример задания стилей:

    @Autowired
    private GroupTable<Customer> styledTable;
    
    @Subscribe
    public void onInit(InitEvent event) {
        styledTable.setStyleProvider(new GroupTable.GroupStyleProvider<Customer>() {
            @Override
            public String getStyleName(Customer entity, @Nullable String property) {
                if (Boolean.TRUE.equals(entity.getEmail() != null)) {
                    return "customer-has-email";
                }
                return null;
            }
    
            @Nullable
            @Override
            public String getStyleName(GroupInfo info) {
                Object value = info.getPropertyValue(info.getProperty());
                if (value instanceof Level) {
                    Level level = (Level) value;
                    switch (level) {
                        case SILVER:
                            return "level-silver";
                        case GOLD:
                            return "level-gold";
                        case PLATINUM:
                            return "level-platinum";
                        case DIAMOND:
                            return "level-diamond";
                    }
                }
                return null;
            }
        });
    }

Далее нужно определить стили в теме приложения. Подробная информация о создании темы находится в разделе Темы. Имена стилей, заданные в контроллере, образуют CSS-селекторы. Например:

.v-table {
  .customer-has-email {
    font-weight: bold;
  }

  .v-table-row,
    .v-table-row-odd {
      &.level-silver {
        background-color: #f2f2f2;
        color: black;

        .jmix-grouptable-group-cell-expander:before {
          color: black;
        }
      }
    }

  .v-table-row,
    .v-table-row-odd {
      &.level-gold {
        background-color: #ffda79;
        color: black;

        .jmix-grouptable-group-cell-expander:before {
          color: black;
        }
      }
    }

  .v-table-row,
    .v-table-row-odd {
      &.level-platinum {
        background-color: #637497;
        color: black;

        .jmix-grouptable-group-cell-expander:before {
          color: black;
        }
      }
    }

  .v-table-row,
    .v-table-row-odd {
      &.level-diamond {
        background-color: #8befff;
        color: black;

        .jmix-grouptable-group-cell-expander:before {
          color: black;
        }
      }
    }
}
group table style provider

События и слушатели

Чтобы сгенерировать заглушку слушателя в Jmix Studio, выберите компонент в XML-дескрипторе экрана или на панели Component Hierarchy и используйте вкладку Handlers панели Component Inspector.

В качестве альтернативы вы можете воспользоваться кнопкой Generate Handler на верхней панели контроллера экрана.

AggregationDistributionProvider

AggregationDistributionProvider аналогичен тому же провайдеру компонента Table с той лишь разницей, что при создании провайдера используется объект GroupAggregationDistributionContext<V>, который содержит дополнительный GroupInfo groupInfo – объект с информацией о строке группировки: свойства сгруппированных столбцов и их значения.

ColumnCollapseEvent

ColumnReorderEvent

ContextHelpIconClickHandler

GroupCellValueFormatter

GroupCellValueFormatter позволяет отображать в строках групп собственный текст.

В приведенном ниже примере заменим текст по умолчанию следующим форматом: <Grouped column name>: <Grouping value>.

@Install(to = "groupTableFormatter", subject = "groupCellValueFormatter")
private String groupTableFormatterGroupCellValueFormatter(
        GroupTable.GroupCellContext<Customer> context) {
    String key = Customer.class.getSimpleName() +
            "." + context.getGroupInfo().getProperty();
    return messages.getMessage(Customer.class,key) + ": " +
            context.getFormattedValue();
}
group table group formatter

Для программной регистрации GroupCellValueFormatter используйте метод setGroupCellValueFormatter().

IconProvider

См. IconProvider.

ItemDescriptionProvider

LookupSelectHandler

SelectionEvent

Все XML-атрибуты

Просматривать и редактировать атрибуты, применимые к компоненту, можно с помощью панели Component Inspector конструктора экранов Studio.

XML-элементы Table

XML-атрибуты Columns

XML-элементы Columns

XML-элементы Column

XML-атрибуты Aggregation

XML-элементы Aggregation