Тулбар - это панель инструментов для редактирования и форматирования ячеек.
Структура тулбара выглядит следующим образом:
Есть 2 режима отображения тулбара - “сокращенный” ( по умолчанию) и “полный”. В “сокращенном” виде на тулбаре доступна только часть всех возможных кнопок.
Чтобы показать все кнопки на тулбаре, задайте свойству toolbar значение "full":
webix.ui({
view:"spreadsheet",
data: base_data,
toolbar: "full"
});
Related sample: Тулбар со всеми кнопками
Чтобы иметь возможность обращаться к тулбару, необходимо задать ему id в конфигурации
var bar = {
view: "toolbar",
css: "webix_ssheet_toolbar webix_layout_toolbar",
id: "bar",
elements: [{...}]
};
Таким образом вы cможете обращаться к тулбару по его id:
spreadsheet.$$("bar");
Настройки для “сокращенного” тулбара хранятся в объекте buttons. Он содержит названия кнопок (ключи) и массивы кнопок (значения этих ключей).
buttons: {
"undo": ["undo","redo"],
"font": ["font-family","font-size","font-weight","font-style",
"underline","strike","color","background","borders"],
"align": ["text-align","vertical-align","wrap","span"],
"format": ["format"]
}
Названия блоков кнопок соответствуют свойствам, обозначенным в файлах локализации, которые указывают язык лейблов.
Принцип работы с кнопками в коллекции "toolbar" такой же, как и в коллекции "buttons".
Основные правила при работе с пользовательским тулбаром:
toolbar: [
{
rows:[
{
margin: 2,
cols: [
{$button: "undo"},
{$button: "redo"}
]
},
{},
{template: "Undo/Redo", view: "ssheet-bar-title", height: 24}
]
},
{view: "ssheet-separator"},
{
rows:[
{
margin: 2,
cols:[
{$button: "font-family", width: 167},
{$button: "font-size", width: 90}
]
},
...
]
},
...
]
Related sample: Кастомный тулбар
Код со всеми элементами тулбара приведен в отдельной статье.
В этой главе представлено подробное описание каждого блока кнопок тулбара, их названия и назначение.
webix.ui({
view: "spreadsheet",
data: base_data,
toolbar: [
{
rows: [
{
margin: 2,
cols: [
{
name: "sheet",
view: "ssheet-button-icon-top",
label: "Sheets",
arrow: true,
options: [
{ id: "new-sheet" },
{ id: "copy-sheet" },
{ id: "remove-sheet" },
{ id: "hide-sheet"}
],
},
{
rows: [{ $button: "excel-import" }, { $button: "excel-export" }],
},
{
rows: [{ $button: "print" }, {$button: "print-borders"}],
},
],
},
],
},
]
});
Блок содержит селектор "Sheets" с опциями:
и четыре кнопки:
view: "spreadsheet",
toolbar: [
{
rows: [
{ $button: "undo", view: "ssheet-button", label: "Undo", width: 80 },
{ $button: "redo", view: "ssheet-button", label: "Redo", width: 80 },
],
},
]
Блок содержит две кнопки:
view: "spreadsheet",
toolbar: [
{
rows: [
{
margin: 2,
cols: [
{
margin: 2,
cols: [
{
$button: "font-family",
width: (webix.skin.$active.inputHeight + 2) * 4 + 6,
},
{ $button: "font-size" },
],
},
{ $button: "borders" },
],
},
{
margin: 2,
cols: [
{
margin: 2,
cols: [
{ $button: "font-weight" },
{ $button: "font-style" },
{ $button: "underline" },
{ $button: "strike" }
],
},
{ $button: "background" },
{ $button: "color" },
],
},
],
},
]
Блок содержит кнопки для настройки шрифтов и границ ячеек:
view: "spreadsheet",
toolbar: [
{
rows: [
{
margin: 2,
cols: [{ $button: "text-align" },
{ $button: "span" },
{$button: "increase-indent"}],
},
{
margin: 2,
cols: [{ $button: "vertical-align" },
{ $button: "wrap" },
{$button: "decrease-indent"}],
},
],
},
]
Блок содержит кнопки для работы с положением текста:
view: "spreadsheet",
toolbar: [
{
rows: [
{ $button: "format" },
{
margin: 2,
cols: [
{ $button: "increase-decimals" },
{ $button: "decrease-decimals" },
],
},
],
},
]
Блок содержит селектор со списком возможных числовых форматов:
Также в блоке находятся парные кнопки увеличения/уменьшения разрядности, которые позволяют добавлять/убирать знаки относительно разделителя.
view: "spreadsheet",
toolbar: [
{
padding: 3,
rows: [
{
cols: [
{ $button: "sort-asc" },
{ $button: "create-filter" },
{ $button: "conditional-format" },
{ $button: "add-link" },
{ $button: "clear" },
],
},
{
cols: [
{ $button: "sort-desc" },
{ $button: "add-range" },
{ $button: "lock-cell" },
{ $button: "add-dropdown" },
],
},
],
},
]
Блок содержит набор кнопок для редактирования содержимого ячеек:
view: "spreadsheet",
toolbar: [
{
padding: 3,
rows: [
{
cols: [
{
$button: "image",
view: "ssheet-button",
label: "Image",
width: 110,
},
{
$button: "add-comment",
view: "ssheet-button",
label: "Comment",
width: 110,
},
],
},
{ $button: "graph", view: "ssheet-button", label: "Graph", width: 110 },
],
},
]
view: "spreadsheet",
toolbar: [
{
padding: 3,
rows:[
{
cols:[
{rows:[
{$button:"row"},
{$button:"column"}
]},
{rows:[
{$button:"hide-gridlines"},
{$button:"hide-headers"},
]},
{rows:[
{$button:"freeze-rows"},
{$button:"freeze-columns"}
]},
{rows:[
{$button:"show-formulas"},
{}
]}
]
},
]
},
]
Тулбар состоит из блоков, кнопки внутри блоков сгруппированы по функциям. Организация блоков задается в коллекции "buttons".
Если вы хотите удалить определенный блок или кнопку из тулбара, необходимо убрать соответствующий параметр или значение из объекта конфигурации.
Коллекция "buttons" - это объект данных, в котором ключ - это название блока, а значение - это массив с названиями кнопок.
По умолчанию тулбар содержит 4 блока с кнопками:
webix.ui({
view:"spreadsheet",
buttons: {
"undo": ["undo","redo"],
"font": ["font-family","font-size","font-weight","font-style",
"underline","strike","color","background","borders"],
"align": ["text-align","vertical-align","wrap","span"],
"format": ["format"]
}
});
Вы можете добавить новый блок с нужным названием или скрыть название, проставив символ "$" перед ним.
Также вы можете перевести названия всех кнопок и элементов на нужный вам язык с помощью локали Spreadsheet.
Чтобы добавить кнопку с текстом, необходимо поместить объект с конфигурацией кнопки (включая ее название) в соответствующий блок свойства buttons:
webix.ui({
view:"spreadsheet",
buttons: {
"undo": ["undo","redo"],
...
"My Block": [
{ view: "button", name: "a", width: 40, label: "New button" },
...
]
}
});
Related sample: Кнопки с текстом
Чтобы ваша новая кнопка соответствовала общему виду SpreadSheet, следуйте рекомендациям ниже:
Пример создания кнопки с иконкой ниже:
webix.ui({
view:"spreadsheet",
buttons: {
"undo": ["undo","redo"],
...
"Insert": [
{
view: "button", name: "insert-image", width: 40,
label: "<span class='webix_ssheet_button_icon icon_image'></span>",
tooltip: "Insert image", click: insertImage
}
]
}
});
Related sample: Кнопки с иконками
Если количество кнопок превышает ширину тулбара, вы может их сгруппировать. Для этого добавьте на тулбар кнопку с иконкой и прикрепите к ней выпадающее меню. Поместите все нужные кнопки в список выпадающего меню.
Описанная структура представлена в коде ниже:
webix.ui({
view:"spreadsheet",
buttons: {
"undo": ["undo","redo"],
...
"$other": [
{},
{
view: "button", name: "a", width: 40,
label: "<span class='webix_ssheet_button_icon icon_other'></span>",
tooltip: "Other options", popup: $$("mypopup")
}
]
}
});
Related sample: Дополнительные кнопки
Для создания выпадающего меню с иконками поместите компонент "ssheet-icons" в тело компонента datasuggest:
webix.ui({
id: "mypopup",
view: "datasuggest",
body:{
view: "ssheet-icons",
xCount:3,
yCount:1,
tooltip: {
template: "#title#"
}
},
data: [
{id: "insert_image", css: "bar_chart", title: "Bar"},
{id: "insert_chart", css: "line_chart", title: "Line"},
{id: "insert_column", css: "pie_chart", title: "Pie"}
]
});
Компонент "ssheet-icons" основан на DataView, поэтому вы можете задать лейаут для иконок, используя свойства xCount и yCount.
Свойство css в элементах данных определяет правила CSS, где вы можете задать фоновое изображение для кнопки:
.bar_chart{
background: url("images/bar-chart.svg");
}
Related sample: Выпадающее меню с иконками
Стиль кнопок в выпадающем меню должен совпадать со стилем остальных кнопок тулбара. Чтобы достичь этого, следуйте рекомендациям ниже:
Чтобы прикрепить выпадающее меню к кнопке на тулбаре, задайте ей свойство popup.
webix.ui({
view:"spreadsheet",
buttons: {
...
"$other": [
{ view: "button", popup: $$("mypopup"),...}
]
}
});
Также вы можете вызвать метод show() и передать элемент кнопки DOM, чтобы показать выпадающее меню как в примере:
$$("mypopup").show($$("mybutton").$view);
Related sample: Дополнительные кнопки
Для создания выпадающего меню со списком используйте компонент "ssheet-suggest". Компонент основан на ContextMenu, что позволит вам добавлять в него подменю и разделители:
webix.ui({
id: "mypopup",
view: "ssheet-suggest",
template: "<span class='webix_ssheet_button_icon #icon#'></span> #value#",
data:[
{ id: "insert_image", icon: "image", value: "Insert image"},
{ id: "insert_chart", icon: "chart", value: "Insert chart"},
{ $template: "Separator" },
{ id: "insert_column", icon: "column", value: "Insert column"},
{ id: "insert_row", icon: "row", value: "Insert row"}
]
});
Чтобы прикрепить выпадающее меню с формой к кнопке на тулбаре, выполните следующие условия:
Чтобы границы всех контролов внутри выпадающего меню отображались корректно, вы можете использовать компонент "ssheet-form-popup" вместо "popup", а для саджестов "ssheet-form-suggest":
webix.ui({
id: "mypopup",
view: "ssheet-form-popup",
body: {
view: "form",
borderless: true,
elements:[
{view: "text", placeholder: "Name",...},
{view: "richselect", label: "Type", placeholder: "Select", suggest:{
view: "ssheet-form-suggest",
data:["Area","Bar","Line"]
}},
{view: "ssheet-colorpicker", label: "Color"}
]
}
});
Related sample: Выпадающее меню с формой
Элементы в диалоговом окне SpreadSheet работают по тем же правилам, что и элементы выпадающего меню. Для создания диалогового окна вместо компонента "ssheet-dialog" рекомендуется использовать компонент window.
Компонент "ssheet-dialog" применяет стили к хедеру и добавляет три кнопки: иконка "Закрыть окно" в верхнем правом углу диалогового окна и две кнопки внизу (Отменить и Сохранить).
Чтобы задать заголовок окну, используйте свойство head.
webix.ui({
id: "mydialog",
view: "ssheet-dialog",
head: "Editor",
body: {
view: "form",
elements:[
...
]
}
});
Related sample: Диалоговое окно
Чтобы задать фон для иконки, используйте "webix_ssheet_hide_icon".
.webix_ssheet_hide_icon{
background: url("images/edit.svg");
}
Диалоговое окно запускает событие onHideClick по клику на иконку:
on:{
onHideClick: function(){
// клик произошел
this.hide();
}
}
Кнопки содержатся в компоненте "ssheet-dialog" и их не нужно добавлять отдельно. Если вы хотите убрать их, задайте значение false свойству buttons:
view: "ssheet-dialog",
buttons: false,
…
Названия кнопок заданы в локали SpreadSheet:
webix.i18n.spreadsheet.labels.cancel = "Cancel";
webix.i18n.spreadsheet.labels.save = "Save";
Диалоговое окно запускает события onCancelClick и onSaveClick по клику на соответствующую кнопку.
Кроме контролов, вы можете добавить в диалоговое окно любой компонент, например, таблицу. Чтобы получить соответствующий внешний вид таблицы, рекомендуется использовать "ssheet-dialog-table".
webix.ui({
id: "mydialog",
view: "ssheet-dialog",
head: "Editor",
body: {
cols:[
{
view: "ssheet-dialog-table", autowidth: true, autoheight:1,autoConfig:true,
data:[
{id: 1, name: "Range1", range: "A3:C8"},
{id: 2, name: "Range2", range: "D3:F8"}
]
},
{
view: "form",
elements:[
...
]}
]}
});
Related sample: Таблица в диалоговом окне
Наверх