點(diǎn)擊獲取SpreadJS工具下載

這篇教程主要講講toolbar應(yīng)該怎么在設(shè)計(jì)器中使用。前面我們也有提到一個(gè)新的命名空間叫GC.Spread.Sheets.Designer.ToolbarModeConfig。我們要使用toolbar的時(shí)候，先獲取設(shè)計(jì)器實(shí)例，然后通過setConfig設(shè)置這個(gè)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);

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

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

接下來就是定義我們r(jià)ibbon上的命令了，在命令中我們可以看到，icon可以根據(jù)兩種模式調(diào)整大小，可以通過visiblePriority控制其展示的優(yōu)先級(jí)。在execute中，通過三目表達(dá)式進(jìn)行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中，這樣定義好的一個(gè)命令就可以在兩套配置中使用。

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 公式，具備“高性能、跨平臺(tái)、與 Excel 高度兼容”的產(chǎn)品特性，備受華為、蘇寧易購(gòu)、天弘基金等行業(yè)龍頭企業(yè)的青睞，并被中國(guó)軟件行業(yè)協(xié)會(huì)認(rèn)定為“中國(guó)優(yōu)秀軟件產(chǎn)品”。SpreadJS 可為用戶提供類 Excel 的功能，滿足表格文檔協(xié)同編輯、 數(shù)據(jù)填報(bào)、 類 Excel 報(bào)表設(shè)計(jì)等業(yè)務(wù)場(chǎng)景需求，極大的降低企業(yè)研發(fā)成本和項(xiàng)目交付風(fēng)險(xiǎn)。

本文轉(zhuǎn)載自