ui.pivot

Инструмент для агрегации и представления больших объёмов данных.

Webix Pivot позволяет работать с данными в 3 режимах (table, tree, и chart), настраивать агрегацию и фильтрацию данных через удобный и понятный интерфейс, а также экспоритровать данные в необходимый формат.

Pivot разработан на базе Webix Jet, что существенно упрощает процесс кастомизации внешнего вида и поведения компонентов.

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

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

С чего начать

Methods
adjust подстраивает размеры компонента под размеры HTML-контейнера
app задаёт виджету класс Jet App
attachEvent задает обработчик внутреннего события компонента
bind связывает данные компонентов
blockEvent временно блокирует вызов ВСЕХ событий вызывающего объекта
callEvent вызывает внутреннее событие компонента
define переопределяет одну или несколько настроек компонента
destructor разрушает компонент
detachEvent удаляет обработчик события (который был задан ранее методом attachEvent)
disable блокирует компонент (он становится серым, клики по нему не срабатывают)
enable делает активным ранее заблокированный компонент
getChildViews возвращает внутренние компоненты
getFormView возвращает объект формы, которой принадлежит компонент
getNode возвращает HTML-элемент компонента
getParentView возвращает родительский компонент
getService возвращает доступный для Pivot сервис
getState возвращает объект реактивного состояния Pivot
getStructure возвращает настройки Pivot
getTopParentView возвращает самого верхнего родителя
hasEvent проверяет, есть ли у компонента обработчики указанного события
hide скрывает компонент
isEnabled проверяет, активен или заблокирован компонент
isVisible проверяет, виден ли компонент
mapEvent направляет события от одного компонента к другому
queryView возвращает внутренние компоненты, которые удовлетворяют указанному условию
resize перерисовывает компонент после изменения размеров
setStructure задает настройки Pivot
show делает компонент видимым
unbind отменяет связывание компонентов
unblockEvent отменяет блокировку событий, которая была вызвана командой 'blockEvent'
Events
onAfterScroll срабатывает после прокрутки содержимого компонента webix
onBindRequest срабатывает, когда компонент готов получить данные из главного компонента
onBlur срабатывает при смещении фокуса за пределы компонента
onDestruct происходит, когда компонент был разрушен деструктором
onEnter срабатывает после нажатия клавиши Enter
onFilterChange срабатывает после изменения значения фильтра
onFocus срабатывает после смещения фокуса на компонент
onInit срабатывает при инициализации
onItemClick срабатывает при клике по элементу данных
onKeyPress срабатывает после того, как пользователь нажал клавишу (для компонента, на котором сейчас фокус)
onLongTouch срабатывает после того, как пользователь на достаточно долгое время задержит палец на экране (для устройств с сенсорным экраном)
onSwipeX срабатывает по горизонтальному свайпу
onSwipeY срабатывает по вертикальному свайпу
onTabFocus срабатывает после смещения фокуса на другой компонент с помощью клавиши Tab
onTimedKeyPress срабатывает через некоторое время после нажатия клавиши в текстовом поле
onTouchEnd срабатывает после завершения события touch
onTouchMove срабатывает по время движения пальца по сенсорному экрану
onTouchStart срабатывает после touch-события в компоненте webix
onViewResize срабатывает после того, как пользователь изменил размер компонента с помощью компонента resizer
onViewShow срабатывает, когда компонент появляется (вызов метода show())
Properties
animate определяет анимацию для показа компонента в Multiview
body задает содержимое компонента proxy
borderless скрывает или показывает границы компонента
chart определяет настройки для чарта в Pivot
compact переключает Pivot в компактный режим
container HTML-контейнер (или его ID), внутри которого компонент должен быть инициализирован
css имя CSS-класса, который будет присвоен HTML-элементу компонента, или объект со стилями
datatable определяет настройки для таблиц Pivot
defaultOperation задает операцию по умолчанию
disabled блокирует или разблокирует компонент
fields определяет поля данных
gravity задает удельный (относительный) размер компонента
height задает высоту компонента
hidden скрывает компонент после его инициализации
id ID компонента
keyPressTimeout задержка между нажатием клавиши и обработчиком
locale задаёт объект со структурой локали
maxHeight задает максимальную высоту компонента
maxWidth задает максимальную ширину компонента
minHeight задает минимальную высоту компонента
minWidth задает минимальную ширину компонента
mode определяет режим отображения данных
on позволяет присоединять обработчики к внутренним событиям компонента
operations хрнаит кастомные операции
override используется при переопределении классов по умолчанию
predicates позволяет добавить кастомные обработчики
readonly запрещает пользователям настраивать Pivot
structure задает настройки для Pivot (поля, операции, фильтры)
url URL для загрузки данных
width задает ширину компонента
Other
$app возвращает экземпляр класса Jet App
$getSize возвращает текущий размер компонентов
$height текущая высота компонента
$setNode определяет HTML-элемент компонента
$setSize задает размеры компонента
$skin вызывается после применения скина
$view возвращает HTML-элемент компонента
$width текущая ширина компонента
config все настройки, заданные при инициализации компонента
name возвращает имя компонента (свойство только для чтения)
Наверх
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.