Настройка Тулбара

SpreadSheet состоит из двух основных частей: тулбара с инструментами и таблицы.

Полная структура SpreadSheet представлена ниже:

  • Тулбар:
    • Блок "Работа с файлом" (File)
      • Меню "Листы" (Sheets)
      • Кнопка "Импорт из Excel"
      • Кнопка "Экспорт в Excel"
      • Кнопка "Печать"
    • Блок "Отменить/Восстановить" (Undo/Redo)
      • Кнопка "Отменить"
      • Кнопка "Повторить"
    • Блок "Шрифт" (Font):
      • Меню "Набор шрифтов"
      • Меню "Размер шрифта"
      • Кнопки "Начертание"
      • Палитра "Цвет шрифта"
      • Палитра "Цвет фона"
      • Меню "Границы"
    • Блок "Выравнивание" (Align):
      • Меню "Горизонтальное выравнивание"
      • Меню "Вертикальное выравнивание"
      • Кнопка "Перенос текста"
      • Переключатель "Объединение ячеек"
    • Блок "Числа" (Number):
      • Меню "Формат чисел"
      • Кнопка "Увеличить разрядность"
      • Кнопка "Уменьшить разрядность"
    • Блок "Редактирование (Edit):
      • Кнопка "Сортировка от A до Z
      • Кнопка "Сортировка от Z до A
      • Кнопка "Создать фильтр"
      • Кнопка "Присвоить имя диапазону"
      • Кнопка "Условное форматирование"
      • Переключатель "Заблокировать/разблокировать ячейку"
      • Кнопка "Добавить ссылку"
      • Кнопка "Создать выпадающее меню"
      • Меню "Очистить"
    • Блок "Вставить" (Insert):
      • Кнопка "Вставить изображение"
      • Кнопка "Вставить диаграмму"
      • Кнопка "Вставить комментарий"
    • Блок "Просмотр" (View):
      • Меню "Строки"
      • Меню "Столбцы"
      • Переключатель "Показать/скрыть гриды"
      • Переключатель "Показать/скрыть хедеры"
      • Переключатель "Закрепить строки"
      • Переключатель "Закрепить столбцы"
  • Таблица

Тулбар

Тулбар - это панель с инструментами для редактирования и форматирования содержимого ячеек таблицы.

Существует два режима отображения тулбара: "сокращенный" по умолчанию (часть кнопок) и "расширенный" (full, все кнопки).

Чтобы показать все доступные кнопки на тулбаре, укажите режим "full" в свойстве toolbar:

webix.ui({
    view:"spreadsheet",
    data: base_data,
    toolbar: "full"
});

Related sample:  Toolbar with all buttons

Обратиться к объекту тулбара можно по его ID, заданном в его настройках:

var bar = {
    view: "toolbar",
    css: "webix_ssheet_toolbar webix_layout_toolbar",
    id: "bar",
    elements: [{...}]
};
...
spreadsheet.$$("bar");

Кнопки тулбара

В этой главе представлено подробное описание каждого блока кнопок тулбара, их названия и назначение.

Блок "Работа с файлом" (File)

Блок содержит Выпадающее меню "Листы" (Sheets) с опциями:

  • "new sheet" - для создания нового листа
  • "copy to new sheet" - для копирования содержимого текущего листа в новый лист
  • "remove sheet" - для удаления листа

и три кнопки:

  • "excel-import" - для импорта данных из Excel
  • "excel-export" - для экспорта данных в Excel
  • "print" - для вывода листа на печать

Блок "Отменить/Восстановить" (Undo/Redo)

Блок содержит две кнопки:

  • кнопка "undo" отменяет последние изменения и возвращает Spreadsheet в предыдущее состояние
  • кнопка "redo" восстанавливает отмененное изменение

Блок "Шрифт" (Font)

Блок содержит кнопки для настройки шрифтов и границ ячеек:

  • Меню "Набор шрифтов" содержит список доступных шрифтов
  • Меню "Размер шрифта" содержит список возможных размеров для шрифтов
  • Группа кнопок "Начертание" служит для стилизации и декорации шрифтов:
    • кнопка "Bold" - "Полужирный"
    • кнопка "Italic" - "Курсив"
    • кнопка "Underline" - "Подчеркнутый"
  • Палитра "Цвет шрифта" служит для выбора цвета шрифта
  • Палитра "Цвет фона" служит для выбора цвета фона
  • Меню "Границы" - содержит стили границ ячеек

Блок "Выравнивание" (Align)

Блок содержит кнопки для работы с положением текста:

  • Меню "Горизонтальное выравнивание" содержит три режима выравнивания текста внутри ячейки: "по левому краю", "по правому краю", "по центру"
  • Меню "Вертикальное выравнивание" содержит три режима выравнивания текста внутри ячейки: "по верхнему краю", "по середине", "по нижнему краю"
  • Кнопка "Перенос текста" - позволяет отображать длинное содержимое ячейки, разделяя его на несколько строк и пропорционально увеличивая размер ячейки
  • Переключатель "Объединение ячеек" - позволяет объединять (и разъединять) ячейки и их содержимое

Блок "Числа" (Number)

Блок содержит кнопку вызова меню со списком возможных числовых форматов:

  • Common (общий)
  • Currency (валюта)
  • Number (числовой)
  • Percent (проценты)
  • Custom (пользовательский)

Также в блоке находятся парные кнопки увеличения/уменьшения разрядности, которые позволяют добавлять/убирать знаки относительно разделителя.

Блок "Редактирование (Edit)

Блок содержит набор кнопок для редактирования содержимого ячеек:

  • "Сортировка от A до Z" и "Сортировка от Z до A" - кнопки для задания возрастающей и убывающей сортировки
  • "Создать фильтр" - кнопка для установки фильтра
  • "Присвоить имя диапазону" - кнопка для создания именованного диапазона ячеек
  • "Условное форматирование" - кнопка для задания определенных стилей для ячеек выполняющих заданные условия
  • "Заблокировать/разблокировать ячейку" - кнопка для переключения режимов доступа к редактированию содержимого ячеек
  • "Добавить ссылку" - кнопка для добавления ссылки в ячейку
  • "Создать выпадающее меню" - кнопка для создания в ячейке выпадающего списка с опциями
  • "Очистить" - выпадающее меню, содержит варианты очищения ячейки:
    • "clear-value" - очистить содержимое ячейки
    • "clear-style" - очистить примененные к ячейке стили
    • "clear-conditional-formats" - очистить примененное к ячейке условное форматирование
    • "clear-dropdown-editors" - очистить примененное к ячейке фильтры и убрать выпадающие списки
    • "clear-all" - очистить все

Блок "Вставить" (Insert)

  • "Вставить изображение" - кнопка для добавления изображения в ячейку
  • "Вставить диаграмму" - кнопка для добавления спарклайна в ячейку
  • "Вставить комментарий" - кнопка для добавления комментария к ячейке

Блок "Просмотр" (View)

  • Меню "Строки" содержит опции вставить, удалить, скрыть, отобразить строки
  • Меню "Столбцы" содержит опции вставить, удалить, скрыть, отобразить столбцы
  • Переключатель "Показать/скрыть гриды" - для управления сеткой Spreadsheet
  • Переключатель "Показать/скрыть хедеры" - для управления хедерами строк и столбцов
  • Переключатель "Закрепить строки" - для фиксирования строк
  • Переключатель "Закрепить столбцы" - для фиксирования столбцов

Настройки кнопок тулбара

Настройки для тулбара по умолчанию хранятся в конфигурации объекта buttons. Параметры объекта - это названия блоков кнопок. Значения параметров - это массив кнопок, включенных в блок.

buttons: {
    "undo": ["undo","redo"],
    "font": ["font-family","font-size","font-weight","font-style",
    "text-decoration","color","background","borders"],
    "align": ["text-align","vertical-align","wrap","span"],
    "format": ["format"]
}

Имена блоков кнопок соответствуют свойствам, определенным в файлах локализации. У тулбара по умолчанию, заданный через объект конфигурации buttons, только один уровень.

Если вы хотите создать двухуровневый тулбар или расширенную версию (full) тулбара с полным набором кнопок, следуйте указаниям в разделе Настройка коллекции "toolbar" статьи Пользовательский Интерфейс.

Удалить блок или кнопку

Если вы хотите удалить определенный блок или кнопку из тулбара, необходимо убрать соответствующий параметр или значение из объекта конфигурации.

Добавить пользовательский блок или кнопку

Чтобы добавить свой блок, необходимо указать его название в свойстве объекта конфигурации "buttons".

Чтобы добавить кнопку, укажите ее название в массиве кнопок соответствующего блока.

Если вы не хотите показывать имя блока, добавьте символ "$" перед названием.

 buttons: {
    "$title": [{
        view: "label", width: 150, label: "My SpreadSheet"
    }],
    "undo": ["undo","redo"],
    "text": ["font-weight","font-style","text-decoration","color"],
    "My Block": [{
        view: "button", name: "my-button", width: 100, label: "My Button",
        tooltip: "Click this button", click: function(){webix.message("Click")}
    }]
 }

Related sample:  Toolbar buttons

Настройка таблицы

У таблицы SpreadSheet есть те же функции, что и у компонента DataTable.

Для настройки таблицы обратитесь к ее объекту как в примере:

var table = spreadsheet.$$("cells");

Вы можете настраивать таблицу по своему усмотрению. Например, вы можете задать контекстное меню для ячеек и вызывать его правой кнопкой мыши. Вы также можете добавить функцию-обработчик для вызова меню в свойстве click.

webix.ready(function(){
    webix.ui({
        view:"spreadsheet", 
        id:"ss",                
        math:true,      
        data:base_data
    });         
 
    webix.ui({
        view:"contextmenu",
        data:["Cut", "Copy", "Paste", "Delete"],
        click:function(id, event){
            var cell = this.getContext().id;
            webix.message(id+" on row "+cell.row+" of the column "+cell.column);                            
    }).attachTo( $$("ss").$$("cells"));         
});

Related sample:  Custom menu

Наверх
If you have not checked yet, be sure to visit site of our main product Webix ui widget library and page of spreadsheet javascript library product.