點擊獲取SpreadJS工具下載

這篇教程主要講講toolbar應該怎么在設計器中使用。前面我們也有提到一個新的命名空間叫GC.Spread.Sheets.Designer.ToolbarModeConfig。我們要使用toolbar的時候，先獲取設計器實例，然后通過setConfig設置這個config。這樣就可以直接使用toolbar模式，怎么樣,是不是so easy, too happy?

var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById('gc-designer-host'));
//Switch to toolbar mode ribbon
designer.setConfig(GC.Spread.Sheets.Designer.ToolBarModeConfig);

結合上面的代碼，我們來做一個模式切換的demo，也就是在工具欄上添加一個新的按鈕來切換兩種形式。首先我們還是來定義一個ribbon，創建一個名為switch的命令，我們可以看到label屬性這塊，用了一個if公式判斷，當我們的ribbonHeight大于toolbarHeight的時候就顯示label，否則不顯示。因為我們知道toolbar的位置有限，“寸土寸金”，因此可以不顯示label。由此，公式對于command的options的作用可見一斑。

var customerRibbon = {
"id": "operate",
"text": "操作",
"buttonGroups": [
{
"label": "=IF(ribbonHeight>toolbarHeight, "高端操作", "")",
"thumbnailClass": "ribbon-thumbnail-clipboard",
"commandGroup": {
"children": [
"switch"
]
}
},
]
};

接下來就是定義我們ribbon上的命令了，在命令中我們可以看到，icon可以根據兩種模式調整大小，可以通過visiblePriority控制其展示的優先級。在execute中，通過三目表達式進行config的切換。

var switchConfig = true;
var ribbonFileCommands = {
"switch": {
iconClass: "ribbon-button-namemanager",
bigButton: "=AND(ribbonHeight>toolbarHeight,NOT(inDropdown))",
text: "切換工具欄",
visiblePriority: 7,
commandName: "switch",
execute: async function (context) {
context.setConfig(switchConfig ? GC.Spread.Sheets.Designer.ToolBarModeConfig : GC.Spread.Sheets.Designer.DefaultConfig);
switchConfig = !switchConfig;
}
}
}

最后通過再將定義好的命令以及ribbon分別加入到我們的default config和toolbar config中，這樣定義好的一個命令就可以在兩套配置中使用。

var defaultConfig = GC.Spread.Sheets.Designer.DefaultConfig;
var toolbarConfig = GC.Spread.Sheets.Designer.ToolBarModeConfig;
defaultConfig.commandMap = {};
toolbarConfig.commandMap = {};
Object.assign(defaultConfig.commandMap, ribbonFileCommands);
Object.assign(toolbarConfig.commandMap, ribbonFileCommands);

defaultConfig.ribbon.push(customerRibbon);
toolbarConfig.ribbon.panels.push(customerRibbon);
designer.setConfig(defaultConfig);

SpreadJS | 下載試用

純前端表格控件SpreadJS，兼容 450 種以上的 Excel 公式，具備“高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受華為、蘇寧易購、天弘基金等行業龍頭企業的青睞，并被中國軟件行業協會認定為“中國優秀軟件產品”。SpreadJS 可為用戶提供類 Excel 的功能，滿足表格文檔協同編輯、 數據填報、 類 Excel 報表設計等業務場景需求，極大的降低企業研發成本和項目交付風險。

本文轉載自