ui.spreadsheet

Компонент для работы с электронными таблицами (Excel и подобные).

Webix SpreadSheet позволяет создавать и редактировать электронные таблицы, доступные онлайн, но физически при этом находящиеся локально. Вы можете также импортировать и экспортировать таблицы из файлов Excel. Вы можете изменять вид таблиц: настраивать цвета, шрифты и границы ячеек, выравнивать содержимое ячеек, объединять ячейки, ряды и колонки.

Компонент поддерживает работу с математическими формулами. Вы можете изменять размеры таблиц и локализовывать их.

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

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

var spreadsheet = webix.ui({
    view:"spreadsheet",
    data: base_data
});

С чего начать

Methods
addImage добавляет изображение в ячейку
addSheet добавляет новый лист в SpreadSheet
addSparkline добавляет спарклайн в ячейку
addStyle создает новый стиль
adjust подстраивает размеры компонента под размеры HTML-контейнера
alert создает модальное всплывающее окно alert
attachEvent задает обработчик внутреннего события компонента
bind связывает данные компонентов
blockEvent временно блокирует вызов ВСЕХ событий вызывающего объекта
callEvent вызывает внутреннее событие компонента
changeDecimals увеличивает/уменьшает число знаков после запятой в одной ячейке или в нескольких
clearRange очищает диапазон ячеек (выбранные ячейки или указанные в параметре метода)
clearSheet очищает открытый лист Spreadsheet
combineCells объединяет ячейки
compactStyles удаляет неиспользуемые стили
confirm создает и показывает диалоговое окно confirm
define переопределяет одну или несколько настроек компонента
deleteColumn удаляет колонку по ее id
deleteRow удаляет ряд таблицы по его id
destructor разрушает компонент
detachEvent удаляет обработчик события (который был задан ранее методом attachEvent)
disable блокирует компонент (он становится серым, клики по нему не срабатывают)
eachSelectedCell проходит по всем выбранным ячейкам
editSheet начинает редактирование названия листа таблицы (открывает редактор)
enable делает активным ранее заблокированный компонент
filterSpreadSheet фильтрует таблицу в SpreadSheet по всем фильтрам
freezeColumns фиксирует указанное число колонок (слева)
freezeRows фиксирует ряды таблицы (сверху)
getActiveSheet вернет имя открытого листа
getCellEditor вернет объект редактора, заданного для ячейки
getCellFilter вернет объект фильтра, заданного для ячейки
getCellValue возвращает значение в ячейке
getChildViews возвращает внутренние компоненты
getColumn возвращает объект с настройками колонки SpreadSheet
getFormView возвращает объект формы, которой принадлежит компонент
getNode возвращает HTML-элемент компонента
getParentView возвращает родительский компонент
getRangeValue возвращает значения из диапазона ячеек
getRow возвращает данные из ряда таблицы по id ряда
getSelectedId возвращает первую ячейку из выбранных
getSelectedRange возвращает диапазон выбранных ячеек
getSheetData возвращает данные из одной или нескольких ячеек таблицы
getStyle возвращает стили ячейки
getTopParentView возвращает самого верхнего родителя
groupUndo объединяет переданные ему действия в одно действие, которое потом можно будет отменить
hasEvent проверяет, есть ли у компонента обработчики указанного события
hide скрывает компонент
hideColumn скрывает или показывает колонку
hideGridlines скрывает или показывает сетку в таблице
hideHeaders скрывает хедеры колонок и рядов таблицы
hideRow скрывает или показывает ряд
ignoreUndo не включает действия в историю операций, которые можно отменить
innerId возвращает внутренний ID элемента по его общедоступному (реальному) ID
insertColumn добавляет пустую колонку слева от от указанной
insertRow добавляет пустой ряд над указанным
isCellLocked проверяет, заблокирована (защищена) ли ячейка
isColumnVisible проверяет, отображается ли колонка
isEnabled проверяет, активен или заблокирован компонент
isRowVisible проверяет, отображается ли ряд
isVisible проверяет, виден ли компонент
load загружает данные из внешнего источника данных
lockCell блокирует (защищает от редактирования) одну или несколько ячеек
mapEvent направляет события от одного компонента к другому
parse загружает данные, доступные на клиенте
queryView возвращает внутренние компоненты, которые удовлетворяют указанному условию
recalculate вызывает пересчет формул в открытом листе
redo повторяет действие, отмененное методом/кнопкой undo
refresh перерисовывает spreadsheet
registerMathMethod добавление новой формулы
removeFilters убирает фильтры из листа
removeSheet удаляет лист из таблицы
renameSheet переименовывает лист
reset сбрасывает настройки SpreadSheet
resetUndo очищает историю операций
resize перерисовывает компонент после изменения размеров
saveCell сохраняет изменения (значение и стиль) в ячейке
serialize сохраняет данные из SpreadSheet в объект JSON
setCellEditor добавляет в ячейку редактор
setCellFilter добавляет фильтр select в ячейку
setCellValue задает значение ячейке
setColumnWidth задает ширину колонки spreadsheet
setFormat задает условное форматирование для значений в ячейке
setPlaceholder заполняет плейсхолдеры в таблице данными
setRangeStyle задает стиль диапазону ячеек
setRangeValue задает значение для диапазона ячеек
setRowHeight задает высоту ряда таблицы в spreadsheet
setStyle задает стиль для ячейки
show делает компонент видимым
showCell переводит фокус на указанную ячейку
showFormulas скрывает или показывает формулы внутри ячеек
showSheet открывает лист таблицы
sortRange сортирует ячейки
splitCell разбивает объединение ячеек на исходные ячейки
ui позволяет создать новый пользовательский интерфейс, область видимости ID которого будет изолирована внутри родительского компонента
unbind отменяет связывание компонентов
unblockEvent отменяет блокировку событий, которая была вызвана командой 'blockEvent'
undo отменяет последнюю операцию в SpreadSheet
zoom увеличивает масштаб листа
Events
onAfterConditionSet срабатывает после того, как пользователь задал новое условие для ячейки
onAfterLoad срабатывает после завершения загрузки данных
onAfterRangeSet срабатывает после добавления именованного диапазона ячеек
onAfterSelect срабатывает после выбора ячейки
onAfterSheetShow срабатывает после того, как пользователь открыл лист
onAfterSpan срабатывает после объединения ячеек
onAfterSplit срабатывает после удаления объединения ячеек
onBeforeCommentShow срабатывает перед тем, как пользователь открыл комментарий к ячейке
onBeforeConditionSet срабатывает перед тем, как пользователь задал новое условие для ячейки
onBeforeFormatChange срабатывает перед тем, как пользователь изменил формат ячейки
onBeforeLoad запускается непосредственно перед началом загрузки данных
onBeforeSheetMenu срабатывает перед показом меню листа на нижней панели
onBeforeSheetShow срабатывает перед тем, как пользователь открыл лист
onBeforeSpan срабатывает перед объединением ячеек
onBeforeSplit срабатывает перед разъединением ячеек
onBeforeValueChange срабатывает перед изменением значения в ячейке
onBindRequest срабатывает, когда компонент готов получить данные из главного компонента
onCellChange срабатывает после изменения значения в ячейке
onChange срабатывает после любого изменения в таблице
onColumnOperation срабатывает после того, как пользователь выполнил операцию над столбцами
onCommand срабатывает при выборе опции в контекстном меню, открытии внешнего UI или диалогового окна, обновлении тулбара, выполнении какого-либо действия над таблицей
onCommentHide срабатывает после того, как пользователь закрыл комментарий к ячейке
onComponentInit срабатывает во время инициализации Spreadsheet
onContextMenuConfig срабатывает каждый раз перед открытием контекстного меню
onDataParse срабатывает после начала загрузки данных в Spreadsheet
onDataSerialize срабатывает после начала сериализации данных
onDestruct происходит, когда компонент был разрушен деструктором
onFormatChange срабатывает, когда пользователь изменил формат ячейки
onLoadError срабатывает при возникновении ошибки во время загрузки данных (невалидный ответ с сервера)
onMathRefresh срабатывает после пересчета значений формулами
onReset срабатывает после сброса настроек SpreadSheet
onRowOperation срабатывает после того, как пользователь выполнил операцию над строками
onSheetAdd срабатывает после добавления нового листа в таблицу
onSheetRemove срабатывает после удаления листа из таблицы
onSheetRename срабатывает после переименования листа
onStyleSet срабатывает после добавления стиля для ячейки
onUIEditStart срабатывает при открытии формы для редактирования
onUIEditStop срабатывает при закрытии формы для редактирования
onUndo срабатывает при выполнении команд undo/redo
onViewInit срабатывает перед инициализацией каждого компонента в spreadsheet
onViewShow срабатывает, когда компонент появляется (вызов метода show())
Properties
animate определяет анимацию для показа компонента в Multiview
borderless скрывает или показывает границы компонента
bottombar добавляет панель с вкладками для переключенимя между листами таблицы
buttons задает блоки с кнопками для главного тулбара Spreadsheet
clipboard включает/отключает работу с буфером обмена на десктопных устройствах
clipboardDecimalDelimiter задает разделитель для десятичной части чисел (нужно для корректной работы копирования/вставки данных из Excel и наоборот)
clipboardNumberFormat задает формат для корректного копирования/вставки чисел между SpreadSheet и Excel
columnCount задает число колонок в SpreadSheet
columnWidth задает ширину колонки по умолчанию (в пикселях)
conditionStyle задает стили для условного форматирования
container HTML-контейнер (или его ID), внутри которого компонент должен быть инициализирован
css имя CSS-класса, который будет присвоен HTML-элементу компонента, или объект со стилями
data данные для компонента (массив, типизированный массив, XML или CSV)
datatype тип загружаемых данных
disabled блокирует или разблокирует компонент
gravity задает удельный (относительный) размер компонента
height задает высоту компонента
hidden скрывает компонент после его инициализации
id ID компонента
liveEditor переключает редактор формул в spreadsheet
maxHeight задает максимальную высоту компонента
maxWidth задает максимальную ширину компонента
menu добавляет меню над главной панелью инструментов SpreadSheet
minHeight задает минимальную высоту компонента
minWidth задает минимальную ширину компонента
on позволяет присоединять обработчики к внутренним событиям компонента
padding определяет пространство между границами лейаута и его содержимым
paddingX задает правый и левый отступ внутри лейаута
paddingY задает верхний и нижний отступы внутри лейаута
prepareData подготавливает данные перед парсингом
readonly делает таблицу в SpreadSheet нередактируемой
resizeCell отключает/включает возможность изменять размер ячеек
rowCount число рядов в таблице в SpreadSheet
rowHeight задает высоту рядов по умолчанию
save хранит путь к серверу для сохранения изменений ячеек
sheetStubs учитывает стили в пустых ячейках при загрузке файлов Excel
sheetTabWidth задает ширину вкладки листа таблицы
subbar добавляет компонент между тулбаром и таблицей
toolbar устанавливает режим и конфигурацию тулбара
type определяет границы и отступы в лейауте
url путь к данным, которые загрузятся в компонент сразу после инициализации
width задает ширину компонента
Other
$$ возвращает объект внутреннего компонента по его id
$getSize возвращает текущий размер компонентов
$handleSelection определяет поведение компонента при его выборе
$height текущая высота компонента
$setNode определяет HTML-элемент компонента
$setSize задает размеры компонента
$skin вызывается после применения скина
$view возвращает HTML-элемент компонента
$width текущая ширина компонента
comments коллекция, в которой хранятся комментарии к ячейке
conditions модуль для работы с условиями
config все настройки, заданные при инициализации компонента
name возвращает имя компонента (свойство только для чтения)
ranges модуль для работы с именованными диапазонами в формулах
views модуль для работы с компонентами поверх ячеек
Наверх
If you have not checked yet, be sure to visit site of our main product Webix popular javascript framework and page of spreadsheet product.