ui.datatable

редактируемая таблица для больших данных.

Компонент DataTable обладает большими возможностями: фильтрация, сортировка, пейджинг, редактирование данных, навигация, драг-н-дроп, локализация, экспорт в PDF, Excel и т.д. Благодаря динамической отрисовке, DataTable успешно и быстро справляется с тысячами записей. Подробнее читайте в описательной документации datatable.

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

var datatable = webix.ui({
    view:"datatable",
    columns:[
        { id:"rank",    header:"",              width:50},
        { id:"title",   header:"Film title",    width:200},
        { id:"year",    header:"Released",      width:80},
        { id:"votes",   header:"Votes",         width:100}
    ],
    data: [
        { id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rank:1},
        { id:2, title:"The Godfather", year:1972, votes:511495, rank:2}
    ]
});

С чего начать

Methods
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 позволяет определить момент, когда операции над данными были сохранены на сервер
Events
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())
Properties
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 (в количестве рядов)
Other
$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 конечный результат загрузки данных в компонент (промис)
Наверх
If you have not checked yet, be sure to visit site of our main product Webix javascript web framework and page of datagrid in html5 product.