概述
本 Demo 展示了如何自定义 Designer 组件的 Ribbon 工具栏，通过清空默认配置并创建新的选项卡和按钮组，实现完全自定义的工具栏布局。Demo 中创建了一个名为"偏好"的自定义选项卡，其中包含常用操作按钮组，整合了自动求和、插入表格、字体设置、查找替换、筛选以及网格线显示控制等功能。
实现思路
获取 Designer 的默认配置对象 DefaultConfig
清空默认的 Ribbon 选项卡配置
创建新的选项卡对象，设置 id 和显示文本
定义按钮组，配置命令布局和分组结构
将按钮组添加到新选项卡中
将新选项卡添加到 Ribbon 配置数组
使用自定义配置初始化 Designer 实例
代码解析
清空默认 Ribbon 配置
这段代码首先获取 Designer 的默认配置对象，然后将 ribbon 数组设置为空数组，清空所有默认的选项卡。
创建新选项卡
定义新的选项卡对象，包含三个属性：id 用于唯一标识选项卡，text 设置选项卡的显示名称，buttonGroups 数组用于存放按钮组。使用 unshift 方法将新选项卡添加到 Ribbon 数组的开头位置。
添加按钮组
按钮组配置中，label 设置按钮组的名称，thumbnailClass 设置缩略图样式类。commandGroup.children 定义按钮组的布局结构，使用 commands 数组指定要显示的内置命令，使用 type: 'separator' 添加分隔线，使用 direction: 'vertical' 设置垂直布局。这里使用了 SpreadJS 内置的命令名称，如 'formulaAutoSum'（自动求和）、'insertTable'（插入表格）、'fontFamily'（字体）等。
初始化 Designer
使用自定义的配置对象创建 Designer 实例，传入 DOM 宿主元素和配置对象。
运行效果
页面加载后显示一个简化的工具栏，仅包含一个名为"偏好"的自定义选项卡
选项卡中包含"常用操作"按钮组，提供自动求和、插入表格等功能按钮
字体、字号、字体粗细、背景色、前景色等按钮以垂直布局排列
查找、替换、设置筛选按钮位于同一组中
显示/隐藏垂直网格线和水平网格线按钮独立成组
所有按钮使用 SpreadJS 内置命令，点击即可执行相应功能
API 参考
GC.Spread.Sheets.Designer.DefaultConfig
获取 Designer 的默认配置对象，包含所有默认选项卡、命令和布局设置。
config.ribbon
Ribbon 配置数组，每个元素代表一个选项卡。选项卡对象包含以下属性：
id：选项卡的唯一标识符
text：选项卡的显示文本
buttonGroups：按钮组数组
buttonGroups 配置
按钮组对象包含以下属性：
label：按钮组的名称
thumbnailClass：缩略图样式类
commandGroup.children：命令布局配置数组
Designer 构造函数
host：DOM 元素，Designer 的容器
config：可选，自定义配置对象
spread：可选，已有的 Workbook 实例
let spreadNS = GC.Spread.Sheets;
let config = GC.Spread.Sheets.Designer.DefaultConfig;
let designer, spread;
window.onload = function () {
// init
initRibbon();
};
function initRibbon() {
// clear ribbon
config.ribbon = [];
// add new ribbon tab
let newTab = {
id: 'operate',
text: '偏好',
buttonGroups: [],
};
config.ribbon.unshift(newTab);
// add new menu
let basicMenu = {
label: '常用操作',
thumbnailClass: 'Frequently used operations',
commandGroup: {
children: [
{
commands: ['formulaAutoSum'],
},
{
commands: ['insertTable'],
},
{
type: 'separator',
},
{
direction: 'vertical',
children: [
{
commands: ['fontFamily', 'fontSize', 'fontWeight', 'backColor', 'foreColor'],
},
{
commands: ['find', 'replace', 'setFilter'],
},
],
},
{
direction: 'vertical',
commands: ['showHideVGridLine', 'showHideHGridLine'],
},
],
},
};
config.ribbon[0].buttonGroups.unshift(basicMenu);
new spreadNS.Designer.Designer(document.getElementById('ribbonHost'), config);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-designer/styles/gc.spread.sheets.designer.light.min.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-barcode/dist/gc.spread.sheets.barcode.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-formula-panel/dist/gc.spread.sheets.formulapanel.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-io/dist/gc.spread.sheets.io.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-designer-resources-cn/dist/gc.spread.sheets.designer.resource.cn.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-designer/dist/gc.spread.sheets.designer.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/designer/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<div class="spreadSheet">
<div id="ribbonHost"></div>
<div id="ss"></div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.container {
height: 100%;
}
.spreadSheet {
height: 100%;
}
#ribbonHost {
height: 100%;
}
.description {
margin: 10px;
width: 40%;
}
