редактируемая таблица для больших данных.
Компонент DataTable обладает большими возможностями: фильтрация, сортировка, пейджинг, редактирование данных, навигация, драг-н-дроп, локализация, экспорт в PDF, Excel и т.д. Благодаря динамической отрисовке, DataTable успешно и быстро справляется с тысячами записей.
Подробнее читайте в описательной документации datatable.
add | добавляет элемент в DataStore |
addCellCss | добавляет класс css для ячейки |
addCss | применяет CSS-класс к элементу компонента |
addRowCss | добавляет css класс для ряда |
addSelectArea | выбирает ячейки в режиме areaselect |
addSpan | добавляет объединение рядов и колонок в datatable |
adjust | подстраивает размеры компонента под размеры HTML-контейнера |
adjustColumn | подстраивает ширину колонки под размер данных, хедера или того, что из этих двух больше |
adjustRowHeight | подстраивает высоту ряда под содержимое ячейки |
attachEvent | задает обработчик внутреннего события компонента |
bind | связывает данные компонентов |
blockEvent | временно блокирует вызов ВСЕХ событий вызывающего объекта |
callEvent | вызывает внутреннее событие компонента |
clearAll | удаляет все элементы из компонента |
clearCss | удалить CSS-класс у всех элементов |
clearSelection | сбрасывает выбор |
clearValidation | удаляет из компонента все примененные после валидации стили и маркеры |
closeSub | закрывает вложенный компонент, открытый для ряда с указанным ID |
collectValues | возвращает массив уникальных значений из указанной колонки |
columnId | возвращает ID колонки по указанному индексу |
copy | копирует элемент в тот же или другой объект |
count | возвращает количество элементов, отображаемых в компоненте на момент вызова |
define | переопределяет одну или несколько настроек компонента |
destructor | разрушает компонент |
detachEvent | удаляет обработчик события (который был задан ранее методом attachEvent) |
disable | блокирует компонент (он становится серым, клики по нему не срабатывают) |
eachColumn | проходит по всем видимым колонкам таблицы |
eachRow | проходит по всем рядам таблицы |
edit | включает режим редактирования для выбранного элемента |
editCancel | заканчивает редактирование и закрывает всё открытые радакторы (компонент остается редатируемым) |
editCell | открывает редактор в указанной ячейке |
editColumn | открывает редакторы для всех ячеек в указанной колонке |
editNext | закрывает текущий редактор и открывает редактор в соседней ячейке |
editRow | открывает все редакторы в указанном ряду |
editStop | заканчивает редактирование и закрывает все открытые редакторы (компонент остаётся доступным для редактирования) |
enable | делает активным ранее заблокированный компонент |
exists | проверяет, существует ли элемент с указанным ID |
filter | фильтрует данные в компоненте |
filterByAll | фильтрует данные в DataTable по всем фильтрам |
find | возвращает все элементы данных, соответствующие заданному критерию, или только первый из элементов |
focusEditor | перемещает фокус на активный редактор |
freezeRow | фиксирует ряд datatable и переносит его в начало таблицы |
getAllSelectAreas | возвращает объект с настройками всех областей с выбранными ячейками в datatable |
getChildViews | возвращает внутренние компоненты |
getColumnConfig | возвращает объект с настройками указанной колонки |
getColumnIndex | возвращает порядковый номер колонки по ее ID |
getColumns | возвращает массив столбцов |
getCss | возвращает className ячейки |
getEditState | возвращает объект активного редактора |
getEditor | возвращает объект редактора |
getEditorValue | возвращает значение активного (открытого в настоящий момент) редактора |
getFilter | возвращает объект фильтра из указанной колонки |
getFirstId | возвращает ID первого элемента |
getFooterNode | возвращает элемент HTML колонки футера |
getFormView | возвращает объект формы, которой принадлежит компонент |
getHeaderContent | возвращает хелперы для работы с masterCheckbox |
getHeaderNode | возвращает элемент HTML колонки хедера |
getIdByIndex | возвращает id элемента по указанному индексу |
getIndexById | возвращает индекс элемента по заданному ID |
getItem | возвращает объект элемента данных по заданному ID |
getItemNode | возвращает HTML-контейнер элемента данных компонента |
getLastId | возвращает ID последнего элемента |
getNextId | возвращает ID элемента, расположенного после указанного элемента на заданной относительной позиции |
getNode | возвращает HTML-элемент компонента |
getPage | возвращает номер видимой в данный момент страницы для компонентов с включенным пейджингом |
getPager | возвращает объект пейджера, связанный с компонентом |
getParentView | возвращает родительский компонент |
getPrevId | возвращает ID элемента, расположенного до указанного элемента на заданной относительной позиции |
getScrollState | возвращает текущее положение скролла |
getSelectArea | возвращает объект с параметрами области с выбранными ячейками |
getSelectedId | возвращает ID выбранных элементов |
getSelectedItem | возвращает объект с данными выбранного элемента |
getSpan | возвращает массив с параметрами объединения ячеек или null, если нет объединений |
getSpanNode | возвращает элемент HTML объединения ячеек |
getState | возвращает текущее состояние компонента |
getSubView | возвращает вложенный компонент ряда таблицы по его id |
getText | возвращает текст из ячейки |
getTopParentView | возвращает самого верхнего родителя |
getVisibleCount | возвращает число отображаемых в таблице рядов |
group | группирует данные по указанному полю |
hasCss | проверяет есть ли у элемента указанный CSS-класс |
hasEvent | проверяет, есть ли у компонента обработчики указанного события |
hide | скрывает компонент |
hideColumn | скрывает указанную колонку |
hideOverlay | скрывает оверлей |
ignoreUndo | не вносит операции, вызванные внутри, в историю операций, которые можно отменить |
isColumnVisible | возвращает false, если колонка скрыта |
isEnabled | проверяет, активен или заблокирован компонент |
isSelected | возвращает true, если элемент выбран |
isVisible | проверяет, виден ли компонент |
load | загружает данные из внешнего источника данных |
loadNext | отправляет запрос на загрузку определённого количества строк данных (до конца имеющихся данных или до определённой позиции) |
locate | возвращает ID и порядковые номера ряда и колонки, в которых произошло событие или находится указанный элемент HTML |
mapCells | проходит по ячейкам и вызывает для них функцию |
mapEvent | направляет события от одного компонента к другому |
mapSelection | проходит по выбранным ячейкам и выполняет для них функцию |
markSorting | выставляет на хедере колонки стрелку сортировки в правильном направлении (asc/desc) |
move | перемещает выбранный элемент на новую позицию |
moveBottom | перемещает указанный элемент в конец списка элементов данных |
moveColumn | перемещает колонку на указанную позицию |
moveDown | увеличивает индекс элемента и перемещает элемент на новую позицию |
moveSelection | перемещает выделение в указанном направлении |
moveTop | перемещает указанный элемент на первую позицию |
moveUp | уменьшает индекс элемента и перемещает элемент на новую позицию |
openSub | открывает вложенный компонент для элемента с указанным id |
parse | загружает данные, доступные на клиенте |
queryView | возвращает внутренние компоненты, которые удовлетворяют указанному условию |
refresh | перерисовывает компонент или один из его элементов |
refreshColumns | обновляет структуру DataTable |
refreshFilter | заново формирует список опций для фильтра selectFilter |
refreshSelectArea | обновляет область с выбранными ячейками в DataTable |
registerFilter | добавляет внешний фильтр определённому столбцу или полю данных |
remove | удаляет указанный элемент(ы) из DataStore |
removeCellCss | удаляет класс css, который был присвоен ячейке datatable |
removeCss | удаляет CSS-класс у элемента компонента |
removeRowCss | удаляет класс css, который был присвоен ряду таблицы |
removeSelectArea | удаляет область с выбранными ячейками |
removeSpan | разбивает объединение ячеек в datatable |
removeUndo | очищает всю историю операций для указанного элемента |
render | перерисовывает весь компонент или указанный элемент |
resize | перерисовывает компонент после изменения размеров |
resizeSubView | подстраивает высоту встроенного компонента под его содержимое |
scrollTo | прокручивает содержимое компонента к указанной позиции |
select | выбирает указанный элемент |
selectAll | выбирает все элементы в DataTable |
selectRange | выбирает указанный диапазон элементов |
serialize | сериализует данные в массив JSON объектов |
setColumnWidth | задает ширину указанной колонки |
setPage | переключает пейджер на указанную страницу |
setRowHeight | задает высоту ряда |
setState | восстанавливает состояние компонента |
show | делает компонент видимым |
showCell | прокручивает содержимое таблицы, чтобы стала видна указанная ячейка |
showColumn | показывает ранее скрытую методом 'hideColumn' колонку |
showColumnBatch | показывает или прячет колонки группами |
showItem | прокручивает таблицу, чтобы стал видел указанный ряд |
showItemByIndex | прокручивает таблицу, чтобы стал виден указанный ряд |
showOverlay | показывает оверлей вместо рядов таблицы DataTable |
sort | сортирует DataStore |
sync | позволяет синхронизировать данные (все или часть) двух компонентов или DataCollection |
unbind | отменяет связывание компонентов |
unblockEvent | отменяет блокировку событий, которая была вызвана командой 'blockEvent' |
undo | отменяет последнюю операцию |
ungroup | разгруппировывает данные |
unselect | отменяет выбор указанного элемента |
unselectAll | отменяет выбор всех элементов в datatable |
updateItem | обновляет элемент данных (изменяет его поля) |
validate | проверяет один элемент или все данные |
validateEditor | проверяет данные в открытом на данный момент редакторе |
waitSave | позволяет определить момент, когда операции над данными были сохранены на сервер |
onAfterAdd | срабатывает после добавления элемента в DataStore |
onAfterAreaAdd | срабатывает после добавления новой области с выбранными ячейками |
onAfterAreaRemove | срабатывает после удаления области выбранных ячеек |
onAfterBlockSelect | срабатывает после выбора блока элементов таблицы |
onAfterColumnDrop | срабатывает после того, как колонку перетащили на новое место |
onAfterColumnDropOrder | срабатывает после того, как после драг-н-дроп изменился порядок колонок |
onAfterColumnHide | срабатывает после того, как колонку datatable скрыли |
onAfterColumnShow | срабатывает, когда колонку datatable показали |
onAfterContextMenu | срабатывает после вызова контекстного меню |
onAfterDelete | срабатывает после удаления элемента |
onAfterDrop | срабатывает после того, как элемент перетащили на цель |
onAfterEditStart | срабатывает после начала редактирования (редактор открыт и готов к вводу информации) |
onAfterEditStop | срабатывает после завершения редактирования |
onAfterFilter | происходит после фильтрации данных с помощью встроенных фильтров |
onAfterLoad | срабатывает после завершения загрузки данных |
onAfterRender | срабатывает после каждой отрисовки компонента |
onAfterScroll | срабатывает после прокрутки содержимого компонента webix |
onAfterSelect | срабатывает после того, как выбран элемент таблицы |
onAfterSort | срабатывает после сортировки данных |
onAfterUnSelect | срабатывает после отмены выбора элемента |
onAreaDrag | срабатывает, когда пользователь начал выбирать область ячеек |
onBeforeAdd | срабатывает перед добавлением элемента в DataStore |
onBeforeAreaAdd | срабатывает перед выбором области ячеек |
onBeforeAreaRemove | срабатывает перед удалением области с выбранными ячейками |
onBeforeBlockSelect | событие срабатывает перед выбором блока элементов таблицы |
onBeforeColumnDrag | срабатывает, когда пользователь начинает перетаскивать колонку |
onBeforeColumnDrop | срабатывает, когда пользователь отпустил колонку на новое место |
onBeforeColumnDropOrder | срабатывает перед тем, как пользователь отпускает колонку |
onBeforeColumnHide | срабатывает перед тем, как колонка datatable будет скрыта |
onBeforeColumnShow | срабатывает перед тем, как колонка datatable будет показана |
onBeforeContextMenu | срабатывает перед вызовом контекстного меню |
onBeforeDelete | срабатывает перед удалением элемента |
onBeforeDrag | срабатывает перед тем, как курсор переместили на элемент и нажали левую кнопку мыши |
onBeforeDragIn | срабатывает перед тем, как элемент будет перемещён в зону над целью перетаскивания |
onBeforeDrop | срабатывает перед тем, как элемент помещён на цель перетаскивания |
onBeforeDropOut | срабатывает перед тем, как элемент перемещен на цель вне компонента, в котором элемент находился |
onBeforeEditStart | срабатывает перед началом редактирования |
onBeforeEditStop | срабатывает перед завершением редактирования |
onBeforeFilter | срабатывает перед началом фильтрации |
onBeforeLoad | запускается непосредственно перед началом загрузки данных |
onBeforeRender | срабатывает перед каждой отрисовкой компонента |
onBeforeSelect | срабатывает перед выбором элемента |
onBeforeSort | срабатывает перед сортировкой данных |
onBeforeUnSelect | срабатывает перед тем, как выбор элемента будет отменен |
onBindRequest | срабатывает, когда компонент готов получить данные из главного компонента |
onBlur | срабатывает при смещении фокуса за пределы компонента |
onCheck | срабатывает, когда пользователь поставил или убрал галку в одном из чекбоксов в datatable |
onCollectValues | срабатывает после сбора значений из колонки datatable и сохранения их в коллекцию опций для редактора или фильтра |
onColumnGroupCollapse | срабатывает, когда пользователь свернул или развернул сгруппированные колонки |
onColumnResize | срабатывает, когда изменилась ширина колонки |
onDataRequest | срабатывает, когда данные с сервера запрашиваются для линейных данных (List, DataTable, DataView и т.д.) для динамической загрузки данных |
onDataUpdate | срабатывает при обновлении элемента данных |
onDestruct | происходит, когда компонент был разрушен деструктором |
onDragOut | срабатывает, когда элемент перемещён за пределы цели перетаскивания |
onEditorChange | срабатывает после срабатывания нативного события oninput для поля ввода HTML (select, text) |
onEnter | срабатывает после нажатия клавиши Enter |
onFocus | срабатывает после смещения фокуса на компонент |
onHeaderClick | срабатывает по клику на хедер колонки |
onItemClick | срабатывает после клика по элементу компонента |
onItemDblClick | срабатывает после двойного клика по элементу компонента |
onItemSingleClick | позволяет различать события одиночного и двойного клика |
onKeyPress | срабатывает после того, как пользователь нажал клавишу (для компонента, на котором сейчас фокус) |
onLiveEdit | срабатывает, когда данные были изменены в редакторе |
onLoadError | срабатывает при возникновении ошибки во время загрузки данных (невалидный ответ с сервера) |
onLongTouch | срабатывает после того, как пользователь на достаточно долгое время задержит палец на экране (для устройств с сенсорным экраном) |
onMouseMove | срабатывает при наведении мыши на указанный компонент |
onMouseMoving | срабатывает при наведении указателя мыши на компонент |
onMouseOut | срабатывает, когда курсор мыши убирается с указанного элемента |
onMoveSelection | срабатывает при перемещении выделения |
onPaste | срабатывает, когда буфер обмена включен и пользователь нажимает комбинацию клавиш CTRL+V |
onResize | срабатывает, когда высота или ширина DataTable изменились |
onRowResize | срабатывает, когда высота ряда таблицы изменилась |
onScrollX | срабатывает, когда пользователь прокрутит таблицу вправо или влево |
onScrollY | срабатывает, когда пользователь прокручивает таблицу вверх или вниз |
onSelectChange | срабатывает, когда в DataTable изменяется выбор элементов |
onStructureLoad | срабатывает, когда создается структура DataTable (настройка колонок) |
onStructureUpdate | срабатывает, когда изменилась структура datatable (добавили колонку, спрятали колонку или изменили ее настройки) |
onSubViewClose | срабатывает после закрытия вложенного компонента таблицы |
onSubViewCreate | срабатывает в момент создания вложенного компонента |
onSubViewOpen | срабатывает после того, как был открыт вложенный компонент |
onSubViewRender | срабатывает при каждой отрисовке вложенного компонента |
onSwipeX | срабатывает по горизонтальному свайпу |
onSwipeY | срабатывает по вертикальному свайпу |
onTabFocus | срабатывает после смещения фокуса на другой компонент с помощью клавиши Tab |
onTimedKeyPress | срабатывает через некоторое время после нажатия клавиши в текстовом поле |
onTouchEnd | срабатывает после завершения события touch |
onTouchMove | срабатывает по время движения пальца по сенсорному экрану |
onTouchStart | срабатывает после touch-события в компоненте webix |
onValidationError | срабатывает, если данные не прошли валидацию после их загрузки/редактирования/добавления |
onValidationSuccess | срабатывает, если данные успешно прошли прошли валидацию после их загрузки/редактирования/добавления |
onViewResize | срабатывает после того, как пользователь изменил размер компонента с помощью компонента resizer |
onViewShow | срабатывает, когда компонент появляется (вызов метода show()) |
animate | определяет анимацию для показа компонента в Multiview |
areaselect | включает режим выбора ячеек areaselection |
autoConfig | включает режим автоматической настройки колонок на основе полученных данных |
autoheight | подстраивает высоту Datatable к суммарной высоте всех рядов в таблице |
autowidth | подстраивает ширину Datatable к суммарной ширине всех колонок в таблице |
blockselect | включает/выключает выбор блока элементов таблицы |
borderless | скрывает или показывает границы компонента |
checkboxRefresh | управляет работой редакторов checkbox в таблице |
clipboard | включает/отключает поддержку буфера обмена на десктопных устройствах |
columnWidth | задает ширину колонки по умолчанию (в пикселях) |
columns | используется для настройки колонок таблицы |
container | HTML-контейнер (или его ID), внутри которого компонент должен быть инициализирован |
css | имя CSS-класса, который будет присвоен HTML-элементу компонента, или объект со стилями |
data | данные для компонента (массив, типизированный массив, XML или CSV) |
dataFeed | альтернативный источник для отфильтрованных и привязанных данных |
datafetch | задает число элементов, данные для которых подгрузятся со следующим запросом (для динамической загрузки) |
datathrottle | устанавливает промежуток времени между запросами данных (период времени между завершением одного запроса и началом следующего запроса) |
datatype | тип загружаемых данных |
delimiter | устанавливает разделители CSV для операций с буфером обмена |
disabled | блокирует или разблокирует компонент |
drag | включает или отключает драг-н-дроп для компонента |
dragColumn | включает драг-н-дроп колонок |
dragscroll | включает автоматическую прокрутку компонента во время перетаскивания его элементов |
editMath | включает редактирование формул |
editValue | определяет какие поля элемента данных доступны для редактирования (применяется если в ячейке / строке данные из нескольких полей) |
editable | включает / выключает редактирование данных в компоненте |
editaction | определяет действие, по которому открывается редактор |
externalData | позволяет переопределить логику перемещения элементов компонента |
filterMode | задает правила для фильтрации в древовидных компонентах |
fixedRowHeight | определяет, должна ли высота рядов быть фиксированной |
footer | включает/выключает футер в DataTable (по умолчанию выключен) |
form | форма для редактирования данных компонента |
gravity | задает удельный (относительный) размер компонента |
header | включает/выключает хедер DataTable (по умолчанию true) |
headerRowHeight | задает высоту ряда хедера |
headermenu | добавляет в хедер меню, с помощью которого можно показывать или скрывать колонки |
height | задает высоту компонента |
hidden | скрывает компонент после его инициализации |
hover | задает класс css для стилизации рядов таблицы в момент, когда над ними находится указатель мыши |
id | ID компонента |
keyPressTimeout | задержка между нажатием клавиши и обработчиком |
leftSplit | определяет число фиксированных колонок, начиная с крайней левой (режим Split) |
liveValidation | включает валидацию данных при редактировании |
loadahead | задает число элементов данных, которые будут подгружаться во время прокрутки |
map | определяет отображение данных |
math | включает работу с математическими формулами в DataTable |
maxColumnWidth | задает максимальную ширину колонок таблицы |
maxHeight | задает максимальную высоту компонента |
maxRowHeight | задает максимальную высоту рядов таблицы |
maxWidth | задает максимальную ширину компонента |
minColumnWidth | задает минимальную ширину колонок |
minHeight | задает минимальную высоту компонента |
minRowHeight | задает минимальную высоту рядов таблицы |
minWidth | задает минимальную ширину компонента |
mouseEventDelay | задержка между реальным действием мыши и вызовом связанных событий |
multiselect | включает возможность выбирать несколько элементов таблицы |
navigation | активирует навигацию с помощью клавиатуры |
on | позволяет присоединять обработчики к внутренним событиям компонента |
onClick | присоединяет обработчик клика для частей компонента с указанным классом CSS |
onContext | свойство, используемое для определения пользовательских обработчиков контекстного клика (клика правой кнопкой мыши) для элементов в ячейках DataTable
|
onDblClick | обрабатывает двойные клики по областям и элементам компонентов (по названию их CSS-классов) |
onMouseMove | обрабатывает событие mousemove для элементов компонента с указанным классом CSS |
pager | задает настройки для пейджера или привязывает пейджер по его ID к компоненту |
prerender | вызывает отрисовку всех элементов данных |
ready | обработчик, который вызывается сразу после того, как компонент полностью инициализирован |
removeMissed | определяет что должно происходить с элементами данных при перезагрузке |
resizeColumn | включает/выключает возможность изменения ширины колонки через интерфейс |
resizeRow | включает/выключает возможность изменять высоту рядов таблицы |
rightSplit | задает число зафиксированных справа колонок таблицы (для режима Split) |
rowHeight | задает высоту рядов таблицы по умолчанию |
rowLineHeight | задает величину line-height для текста в ряду таблицы |
rules | задает правила для валидации |
save | определяет URL для сохранения данных |
scheme | определяет схему для обработки данных |
scroll | управляет полосами прокрутки в datatable |
scrollAlignY | включает/выключает прокрутку таблицы на целое число рядов |
scrollX | включает/выключает горизонтальную прокрутку |
scrollY | включает/выключает вертикальную прокрутку |
select | задает режим выбора элементов в DataTable |
sort | включает возможность сортировки при клике по хедеру |
spans | определяет объединения ячеек в datatable |
subRowHeight | подстраивает высоту вложенного компонента под его содержимое |
subrow | задает темплейт для вложенного компонента |
subview | задает конфигурацию вложенных компонентов для рядов datatable |
templateCopy | задает шаблон, в соответствии с которым данные будут копироваться в буфер обмена из каждой выбранной в данный момент ячейки |
tooltip | задает тултип, который появится при наведении курсора на элемент |
topSplit | определяет число рядов, которые нужно зафиксировать (начиная с первого) |
type | задает элементы для темплейтов данных |
undo | включает отмену операций над данными в datatable |
url | путь к данным, которые загрузятся в компонент сразу после инициализации |
width | задает ширину компонента |
yCount | задает высоту datatable (в количестве рядов) |
$customPrint | создаёт HTML-разметку для печати компонента и начинает печать |
$drag | метод вызывается, когда когда пользователь начинает перетаскивать элемент |
$dragHTML | определяет вид перетягиваемого элемента |
$dragIn | метод вызывается, когда перетаскиваемый элемент попал в зону над возможной целью перетаскивания |
$dragMark | вызывается во время драг-н-дроп и помечает один из элементов компонента как активную цель перетаскивания |
$dragOut | метод вызывается, когда перетаскиваемый элемент покидает зону над возможной целью перетаскивания |
$drop | метод вызывается, когда элемент перемещён на подходящую цель |
$dropAllow | переопределяет правила перетаскивания элемента на цель |
$dropHTML | определяет вид цели перетаскивания перед тем, как пользователь перетащит на нее элемент |
$getSize | возвращает текущий размер компонентов |
$height | текущая высота компонента |
$scope | область имен для событий и методов |
$setNode | определяет HTML-элемент компонента |
$setSize | задает размеры компонента |
$skin | вызывается после применения скина |
$tooltipIn | показывает тултип |
$tooltipMove | определяет поведение тултипа в момент, когда курсор перемещается над компонентом или HTML-областью |
$tooltipOut | определяет поведение тултипа в момент, когда курсор выходит за пределы компонента или HTML-области |
$touch | адаптирует datatable к работе на устройствах с сенсорным экраном |
$view | возвращает HTML-элемент компонента |
$width | текущая ширина компонента |
config | все настройки, заданные при инициализации компонента |
data | DataStore компонента |
headerContent | все активные элементы, которые можно добавить в хедер |
name | возвращает имя компонента (свойство только для чтения) |
on_click | переопределяет обработку кликов по элементам компонента |
on_context | свойство, используемое для определения пользовательских обработчиков клика правой кнопкой мыши для элементов в компонентах |
on_dblclick | определяет обработчики для двойных кликов по элементам компонентов (по названию их CSS-класса) |
on_mouse_move | добавляет обработчик для события mousemove над элементами компонентов (по названию их CSS-класса) |
waitData | конечный результат загрузки данных в компонент (промис) |