此示例展示了以下内容：
隐藏Ribbon和上下文菜单中的选项卡和按钮，仅显示所需的项目。
更改主页选项卡上插入和删除按钮以及格式对话框上的确认和取消按钮的文本。
禁用缩进和方向下拉列表。
查看代码时，您可以看到执行了以下步骤：
创建一个新的Designer配置。
隐藏特定的选项卡。
隐藏每个选项卡中的特定按钮组。
禁用Ribbon中的按钮。
使用Designer.getResources()方法更改按钮和选项卡的文本来自定义本地化。
从上下文菜单中删除某些命令。
使用刚刚创建的Designer配置替换当前的配置。
window.onload = function () {
initRibbon();
};
function initRibbon() {
var config = GC.Spread.Sheets.Designer.DefaultConfig,
commandNames = GC.Spread.Sheets.Designer.CommandNames;
// Hide tabs except "Insert", "Page Layout", "Formula" and "Settings"
config.ribbon = config.ribbon.filter(
(rb) => rb.id !== 'insert' && rb.id !== 'pageLayout' && rb.id !== 'formulas' && rb.id !== 'settings'
);
// Hide button except groups "Number", "Style" and "Edit" on Home tab
let homeTab = config.ribbon.find((r) => r.id === 'home');
homeTab.buttonGroups = homeTab.buttonGroups.filter(
(bg) => bg.label !== '数字' && bg.label !== '样式' && bg.label !== '编辑'
);
// Hide button except groups "Data Binding", "Query and Connection", "Outline" in Data tab
let dataTab = config.ribbon.find((r) => r.id === 'data');
dataTab.buttonGroups = dataTab.buttonGroups.filter(
(bg) => bg.label !== '数据绑定' && bg.label !== '查询和连接' && bg.label !== '分级显示'
);
// Hide button except groups "Zoom", "Viewport" and "Pane" in View tab
let viewTab = config.ribbon.find((r) => r.id === 'view');
viewTab.buttonGroups = viewTab.buttonGroups.filter(
(bg) => bg.label !== '显示比例' && bg.label !== '窗口' && bg.label !== '窗格'
);
// Hide "Format" except button in cell button group
let cellButtonGroup = homeTab.buttonGroups.find((bg) => bg.label === 'Cells');
if (cellButtonGroup) {
cellButtonGroup.commandGroup.children = cellButtonGroup.commandGroup.children.filter(
(cg) => cg.command !== 'cellsFormat'
);
}
// Disable some buttons
config.commandMap = {
// disable decreaseIndent
decreaseIndent: {
enableContext: 'false',
},
// disable increaseIndent
increaseIndent: {
enableContext: 'false',
},
// Disable orientationList
orientationList: {
enableContext: 'false',
},
};
// Customizing the localization of the ribbon container
var resources = GC.Spread.Sheets.Designer.getResources();
resources.ribbon.home.home = 'HOME';
resources.ribbon.data.data = 'DATA';
resources.ribbon.view.view = 'VIEW';
resources.ok = 'OK';
resources.cancel = 'CANCEL';
resources.formatDialog.title = 'FORMAT DIALOG';
resources.ribbon.home.wrapText = 'WRAP TEXT';
resources.ribbon.home.insert = 'INSERT';
resources.ribbon.home.Delete = 'DELETE';
GC.Spread.Sheets.Designer.setResources(resources);
// Remove unnecessary context menu
if (config.contextMenu) {
const deleteMenu = [
commandNames.RichText, // RichText
commandNames.InsertComment, // InsertComment
commandNames.DefineName, // DefineName
commandNames.CellTag, // CellTag
commandNames.RowTag, // RowTag
commandNames.ContextMenuOutlineColumn, // ContextMenuOutlineColumn
commandNames.DesignerPasteFormulaFormatting, // DesignerPasteFormulaFormatting
];
for (let i = 0; i < config.contextMenu.length; i++) {
var item = config.contextMenu[i];
if (deleteMenu.includes(item)) {
config.contextMenu.splice(i, 1);
}
}
}
new GC.Spread.Sheets.Designer.Designer('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.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-languagepackages/dist/gc.spread.calcengine.languagepackages.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-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-excelio/dist/gc.spread.excelio.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="sample-tutorial">
<div id="ribbonHost"></div>
<div id="ss"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 97vh;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#ribbonHost {
height: 100%;
}
.description {
margin: 10px;
width: 40%;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
background-color: #dcdcdc;
}
tr:nth-child(even) {
background-color: #f5f5f5;
}
