Вы можете добавить выпадающее меню в верхней части SpreadSheet. Это сэкономит пространство тулбара и позволит разместить на нем только самые необходимые кнопки. Чтобы добавить меню, задайте свойству menu значение true.
webix.ui({
view:"spreadsheet",
data: math_data_simple,
menu: true
});
Настройки меню хранятся в массиве menu. Он состоит из объектов, которые содержат параметры для каждого блока меню. У каждого объекта есть свойство id с именем блока и свойство submenu с массивом объектов, представляющих список опций. Каждый объект в submenu также может хранить id с названием блока или опции и (необязательно) submenu.
Структура меню по умолчанию будет выглядеть следующим образом:
const menu = [{
id: "file",
submenu: [{
id: "sheet",
submenu: [{
id: "new-sheet"
},
{
id: "copy-sheet"
},
{
id: "remove-sheet"
},
{
id: "hide-sheet"
}
]
},
{
id: "excel-import"
},
{
id: "excel-export"
},
{
id: "print"
},
{
id: "print-borders"
}
]
},
{
id: "data",
submenu: [{
id: "sort",
submenu: [{
id: "sort-asc"
},
{
id: "sort-desc"
}
]
},
{
id: "create-filter"
}
]
}]
В этом разделе представлено подробное описание каждого блока опций, их названия и назначение.
Этот блок включает в себя набор опций для операций с листами:
webix.ui({
view:"spreadsheet",
data:base_data,
menu:[{ id:"file", submenu:[
{id: "sheet", submenu: [
{id: "new-sheet"},
{id: "copy-sheet"},
{id: "remove-sheet"},
{id: "hide-sheet"}
]},
{id: "excel-import"},
{id: "excel-export"},
{id: "print"},
{id: "print-borders"}
]}]
});
1.Селектор "Sheets" содержит три опции:
2.Опция "excel-import" импортирует данные из Excel
3.Опция "excel-export" экспортирует данные в Excel
Этот блок включает в себя набор опций для редактирования содержимого ячейки:
view:"spreadsheet",
menu:[{ id:"edit", submenu:[
{id: "add-range"},
{id: "add-dropdown"},
{id: "add-link"},
{id: "lock-cell"},
{id: "conditional-format"},
{id: "clear", submenu:[
{id: "clear-value"},
{id: "clear-style"},
{id: "clear-conditional-formats"},
{id: "clear-dropdown-editors"},
{id: "clear-filters"},
{id: "clear-comments"},
{ $template:"Separator" },
{id: "clear-all"}
]}
]}]
1.Опция "add-range" создает именованный диапазон ячеек
2.Опция "add-dropdown" создает в ячейке выпадающий список с опциями
3.Опция "add-link" добавляет ссылку в ячейку
4.Опция "lock-cell" переключает режимы доступа к редактированию содержимого ячеек
5.Опция "conditional-format" задает определенные стили для ячеек, выполняющих заданные условия
6.Селектор "clear", который позволяет очистить ячейку следующим образом:
Этот блок включает в себя набор опций, которые позволяют добавить к ячейкам дополнительный контент:
view:"spreadsheet",
menu:[{ id:"insert", submenu:[
{id: "image", submenu:[
{ id: "add-image-cell"},
{ id: "add-image-top"}
]},
{id: "graph", submenu:[
{ id: "add-sparkline"},
{ id: "add-chart"}
]},
{id: "add-comment"}
]}]
1.Селектор "image" содержит следующие опции:
2.Селектор "graph" содержит следующие опции:
3.Опция "add-comment" добавляет комментарий к ячейке
Этот блок включает в себя набор опций для сортировки и фильтрации данных ячеек:
view:"spreadsheet",
menu:[{ id:"data", submenu:[
{id: "sort", submenu: [
{id: "sort-asc"},
{id: "sort-desc"}
]},
{id: "create-filter"}
]}]
1.Селектор "sort" содержит следующие опции:
2.Опция "create-filter" создает фильтр
Этот блок включает в себя набор опций для операций со столбцами/рядами:
view:"spreadsheet",
menu:[{ id: "view", submenu:[
{id: "columns", submenu: [
{id: "insert-column"},
{id: "delete-column"},
{id: "show-column"},
{id: "hide-column"},
{id: "resize-column"}
]},
{id: "rows", submenu: [
{id: "insert-row"},
{id: "delete-row"},
{id: "show-row"},
{id: "hide-row"},
{id: "resize-row"}
]},
{ $template:"Separator" },
{id: "freeze-columns"},
{id: "freeze-rows"},
{id: "hide-gridlines"},
{id: "hide-headers"},
{id: "show-formulas"}
]}]
1.Cелектор "column" позволяет выполнить следующие операции со столбцами: вставить, удалить, скрыть, отобразить, изменить размер столбца
2.Cелектор "row" позволяет выполнить следующие операции со строками: вставить, удалить, скрыть, отобразить, изменить размер ряда
3.Опция "freeze-rows" фиксирует строки
4.Опция "freeze-columns" фиксирует столбцы
5.Опция "hide-gridlines" управляет сеткой Spreadsheet
6.Опция "hide-headers" управляет хедерами строк и столбцов
7.Опция "show-formulas" показывает формулы в ячейках вместо значений
Обратите внимание, что все возможные опции по умолчанию уже добавлены в меню. Вы можете только переставить или удалить их.
Верхнее меню можно настроить двумя способами:
Если вы хотите удалить некоторые блоки или опции из конфигурации по умолчанию, задайте массив menu без них.
Чтобы добавить в меню свою опцию/блок, необходимо задать свойство id и свойство value - название блока/опции.
Есть два способа добавить лейбл к кастомной опции/блоку:
Если вы используете локаль, ключом будет значение свойства id вашей опции, а значением будет лейбл:
webix.i18n.spreadsheet.menus["new-option"] = "New option";
Затем вы можете добавить свою опцию в массив menu во время настройки SpreadSheet:
menu:[{ id: "new-option" }]
Другой способ добавить лейбл — задать свойство value непосредственно в массиве menu, а также задать свойство id вашей опции:
menu:[{ id: "new-option", value: "New option" }]
Обратите внимание, что при использовании этого метода вы не сможете сделать локализацию.
Чтобы задать действие, которое будет запускаться при выборе вашей опции, установите обработчик на событие onCommand:
webix.ready(function(){
webix.ui({
view:"spreadsheet",
data:base_data,
menu:[{ id: "new-option", value: "My option"}],
on:{
onCommand(obj) {
if (obj.id === "new-option")
webix.message("click on custom option");
}
}
});
});
Если вы хотите добавить опцию из дефолтного списка, задайте ее свойству id соответствующего объекта в массиве submenu:
{
id: "my-options",
value: "My Options",
submenu: [{
id: "excel-import"
}, {
id: "new-sheet"
}]
}
Вы также можете использовать событие onViewInit для добавления или удаления блоков и опций меню. Вы можете добавить опцию следующим образом:
webix.ui({
view:"spreadsheet",
menu:true,
on:{
onViewInit(view, config){
if (view == "menu"){
config.data.push({ id: "new-option", value: "New option" });
}
}
}
});
Наверх