ui.pivot

Таблица с фильтрами и агрегаторами.

Webix Pivot быстро справляется с огромными данными и будет полезен для создания отчетов. Компонент легко настраивать, он умеет сравнивать, сортировать и фильтровать данные.

Подробнее читайте в описательной документации.

Инициализация

var pivot = webix.ui({
    view:"pivot",
    structure: {
        rows: ["form", "name"],
        columns: ["year"],
        values: [
            { name: "gdp", operation: "sum"},
            { name: "oil", operation: "sum"}
        ],
        filters: []
    },
    data: pivot_data
});

С чего начать

Methods
add добавляет элемент в DataStore
addOperation создает новую операцию с данными в Pivot Table
addTotalOperation добавляет новую операцию для агрегирования данных
adjust подстраивает размеры компонента под размеры HTML-контейнера
attachEvent задает обработчик внутреннего события компонента
bind связывает данные компонентов
blockEvent временно блокирует вызов ВСЕХ событий вызывающего объекта
callEvent вызывает внутреннее событие компонента
clearAll удаляет все элементы из компонента
configure открывает окно для настройки pivot
count возвращает количество элементов, отображаемых в компоненте на момент вызова
define переопределяет одну или несколько настроек компонента
destructor удаляет DataStore
detachEvent удаляет обработчик события (который был задан ранее методом attachEvent)
disable блокирует компонент (он становится серым, клики по нему не срабатывают)
enable делает активным ранее заблокированный компонент
exists проверяет, существует ли элемент с указанным ID
filter фильтрует данные в компоненте
find возвращает все элементы данных, соответствующие заданному критерию, или только первый из элементов
getChildViews возвращает внутренние компоненты
getConfigWindow возвращает объект окна для настройки pivot
getFields возвращает объект с настройками полей
getFilterView возвращает объект тулбара с фильтрами
getFirstId возвращает ID первого элемента
getFormView возвращает объект формы, которой принадлежит компонент
getIdByIndex возвращает id элемента по указанному индексу
getIndexById возвращает индекс элемента по заданному ID
getItem возвращает объект элемента данных по заданному ID
getLastId возвращает ID последнего элемента
getNextId возвращает ID элемента, расположенного после указанного элемента на заданной относительной позиции
getNode возвращает HTML-элемент компонента
getParentView возвращает родительский компонент
getPrevId возвращает ID элемента, расположенного до указанного элемента на заданной относительной позиции
getStructure возвращает текущие настройки pivot
getTopParentView возвращает самого верхнего родителя
hasEvent проверяет, есть ли у компонента обработчики указанного события
hide скрывает компонент
innerId возвращает внутренний ID элемента по его общедоступному (реальному) ID
isEnabled проверяет, активен или заблокирован компонент
isVisible проверяет, виден ли компонент
load загружает данные из внешнего источника данных
mapEvent направляет события от одного компонента к другому
parse загружает данные, доступные на клиенте
queryView возвращает внутренние компоненты, которые удовлетворяют указанному условию
refresh перерисовывает компонент или один из его элементов
remove удаляет указанный элемент(ы) из DataStore
render вызывает отрисовку пивота
resize перерисовывает компонент после изменения размеров
setStructure задает структуру пивота
show делает компонент видимым
sort сортирует DataStore
sync позволяет синхронизировать данные (все или часть) двух компонентов или DataCollection
ui позволяет создать новый пользовательский интерфейс, область видимости ID которого будет изолирована внутри родительского компонента
unbind отменяет связывание компонентов
unblockEvent отменяет блокировку событий, которая была вызвана командой 'blockEvent'
updateItem обновляет элемент данных (изменяет его поля)
waitSave позволяет определить момент, когда операции над данными были сохранены на сервер
Events
onAfterAdd срабатывает после добавления элемента в DataStore
onAfterDelete срабатывает после удаления элемента
onAfterLoad срабатывает после завершения загрузки данных
onAfterSort срабатывает после сортировки данных
onBeforeAdd срабатывает перед добавлением элемента в DataStore
onBeforeApply срабатывает по клику на кнопку "Apply"
onBeforeCancel срабатывает после клика по кнопке "Cancel" в окне с фильтрами перед отменой настроек
onBeforeDelete срабатывает перед удалением элемента
onBeforeLoad запускается непосредственно перед началом загрузки данных
onBeforeRender срабатывает перед отрисовкой пивота
onBeforeSort срабатывает перед сортировкой данных
onBindRequest срабатывает, когда компонент готов получить данные из главного компонента
onCancel срабатывает после клика по кнопке "Cancel" в окне с фильтрами
onDataRequest срабатывает, когда данные с сервера запрашиваются для линейных данных (List, DataTable, DataView и т.д.) для динамической загрузки данных
onDataUpdate срабатывает при обновлении элемента данных
onDestruct происходит, когда компонент был разрушен деструктором
onFilterChange срабатывает после изменения значения фильтра
onFilterCreate срабатывает после создания фильтра
onHeaderInit срабатывает при инициализации хедера таблицы в pivot
onItemClick fires when a data item is clicked
onLoadError срабатывает при возникновении ошибки во время загрузки данных (невалидный ответ с сервера)
onPopup срабатывает после создания окна для настройки Pivot
onViewInit срабатывает перед инициализацией любого внутреннего компонента пивота
onViewShow срабатывает, когда компонент появляется (вызов метода show())
onWebWorkerEnd срабатывает, когда веб-воркер закончил свою работу
onWebWorkerStart срабатывает в начале работы веб-воркера
Properties
animate определяет анимацию для показа компонента в Multiview
borderless скрывает или показывает границы компонента
columnWidth задает ширину колонок таблицы по умолчанию (в пикселях)
container HTML-контейнер (или его ID), внутри которого компонент должен быть инициализирован
css имя CSS-класса, который будет присвоен HTML-элементу компонента, или объект со стилями
data данные для компонента (массив, типизированный массив, XML или CSV)
datatable настройки таблицы внутри Pivot
datatype тип загружаемых данных
defaultOperation задает операцию по умолчанию
disabled блокирует или разблокирует компонент
externalProcessing включает серверную обработку данных в Pivot
fieldMap задает ярлыки для полей
filterLabelAlign выравнивает ярлыки фильтров в Pivot Chart
filterLabelWidth задает ширину ярлыков для фильтров
filterMap задает поля для фильтрации (подробности ниже)
filterMinWidth задает минимальную ширину фильтров (поле вместе с ярлыком) в хедере pivot
filterPlaceholder задает плейсхолдер для поля в фильтре
filterWidth задает ширину фильтра (поле и ярлык) в хедере pivot
footer добавляет в таблицу футер с итоговыми значениями по каждой колонке (значения подсчитываются операцией, заданной для колонки)
format задает функцию для форматирования значений во всех ячейках таблицы
gravity задает удельный (относительный) размер компонента
headerTemplate вызывается для хедера каждой колонки и возвращает текст для хедера
height задает высоту компонента
hidden скрывает компонент после его инициализации
id ID компонента
max включает подсветку зеленым ячеек с максимальными значениями в ряду
maxHeight задает максимальную высоту компонента
maxWidth задает максимальную ширину компонента
min включает подсветку красным ячеек с минимальными значениями в ряду
minHeight задает минимальную высоту компонента
minWidth задает минимальную ширину компонента
on позволяет присоединять обработчики к внутренним событиям компонента
padding определяет пространство между границами лейаута и его содержимым
paddingX задает правый и левый отступ внутри лейаута
paddingY задает верхний и нижний отступы внутри лейаута
ping отменяет процессы, которые не укладываются в лимит по времени
popup объект с параметрами окна для настройки pivot
profile включает подсчет времени, которое уходит на загрузку данных и отрисовку (для стадии разработки!)
readonly запрещает пользователям изменять настройки пивота
readonlyTitle задает текст для части хедера, в которой обычно находится кнопка для открытия окна с настройками пивота (для режима readonly)
ready обработчик, который вызывается сразу после того, как компонент полностью инициализирован
removeMissed определяет что должно происходить с элементами данных при перезагрузке
scheme определяет схему для обработки данных
separateLabel отделяет ярлык от фильтра и снимает ограничения на размеры ярлыка
stableRowId включает режим, в котором в id рядов и колонок входят названия правил группировки
structure задает начальные настройки пивота (поля, операции, фильтры)
totalColumn добавляет в таблицу итоговую колонку, которая агрегирует значения в ряду в зависимости от типа данных
type определяет границы и отступы в лейауте
url путь к данным, которые загрузятся в компонент сразу после инициализации
webWorker задает путь к файлу с веб-воркером
width задает ширину компонента
yScaleWidth задает ширину первой колонки
Other
$$ возвращает объект внутреннего компонента по его id
$divider строка, которая используется как разделитель в расчетах компонента Pivot
$getSize возвращает текущий размер компонентов
$height текущая высота компонента
$setNode определяет HTML-элемент компонента
$setSize задает размеры компонента
$skin вызывается после применения скина
$view возвращает HTML-элемент компонента
$width текущая ширина компонента
config все настройки, заданные при инициализации компонента
data DataStore компонента
name возвращает имя компонента (свойство только для чтения)
operations объект со всеми операциями в Pivot
waitData конечный результат загрузки данных в компонент (промис)
Наверх
If you have not checked yet, be sure to visit site of our main product Webix html5 framework and page of pivot table web product.