Обзор DHTMLX Pivot

JavaScript Pivot — готовый компонент для создания сводных таблиц из больших наборов данных. API виджета легко адаптируется под нужды вашего веб-приложения. Компонент предоставляет конечному пользователю инструменты для сравнения и анализа сложных данных в рамках одной таблицы.

Структура Pivot

Интерфейс Pivot состоит из двух основных компонентов: панели настройки и таблицы с данными.

Панель настройки

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

• Значения: можно добавить значения, определяющие способ агрегации данных (например, сумма, минимум, максимум)
• Столбцы: можно настроить столбцы таблицы (указать, какие поля будут применяться в качестве столбцов)
• Строки: можно настроить, какие поля будут применяться в качестве строк таблицы

Чтобы скрыть панель настройки, нажмите кнопку Hide Settings:

Область значений

В области Values можно определить, какие методы агрегации (например, min, max, count) будут применяться к ячейкам сводной таблицы. Доступны следующие операции:

• добавление и удаление полей из области значений
• изменение порядка и приоритета значений в таблице
• фильтрация данных
• настройка операций, применяемых к полям таблицы

Подробнее см. в разделах Операции в областях и Фильтры.

Область столбцов

В области Columns доступны следующие операции:

• добавление и удаление столбцов (то есть полей, применяемых в качестве столбцов)
• изменение порядка и приоритета столбцов в таблице
• фильтрация данных

Подробнее см. в разделах Операции в областях и Фильтры.

Область строк

В панели настройки для области Rows доступны следующие операции:

• добавление и удаление строк (то есть полей, применяемых в качестве строк)
• изменение порядка и приоритета строк в таблице
• фильтрация данных

Подробнее см. в разделах Операции в областях и Фильтры.

Операции в областях

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

Чтобы добавить новое поле, нажмите кнопку «+» в нужной области и выберите название из выпадающего списка.

Чтобы удалить элемент, нажмите кнопку удаления («x»).

Чтобы изменить порядок значений/строк/столбцов в таблице, перетащите элемент на нужную позицию. Чем левее элемент расположен в панели инструментов области, тем выше его приоритет и позиция в таблице.

Чтобы задать операции, применяемые ко всем данным столбца таблицы, в области Values нажмите на операцию для нужного поля в выпадающем списке и выберите требуемый вариант.

Фильтры

Фильтры отображаются в виде выпадающих списков для каждого поля во всех областях. Pivot поддерживает следующие типы условий фильтрации:

• для текстовых значений: equal, notEqual, contains, notContains, beginsWith, notBeginsWith, endsWith, notEndsWith
• для числовых значений: greater, less, greaterOrEqual, lessOrEqual, equal, notEqual, contains, notContains, begins with, not begins with, ends with, not ends with
• для дат: greater, less, greaterOrEqual, lessOrEqual, equal, notEqual, between, notBetween

Чтобы отфильтровать данные в таблице, нажмите на значок фильтра нужного элемента в требуемой области, затем выберите оператор, задайте значение для фильтрации и нажмите Apply. Поля, к которым применена фильтрация, будут отмечены специальным значком фильтра.

Таблица

Данные в таблице отображаются в соответствии с настройками, заданными в панели настройки. Сортировка по столбцам включается нажатием на заголовок столбца:

Что дальше

Теперь можно приступить к интеграции Pivot в ваше приложение. Следуйте инструкциям руководства Как начать работу.

Используя функциональность, предоставляемую API виджета, вы можете создать привлекательную сводную таблицу с расширенными возможностями, как в примере ниже: