概述
本 Demo 展示了如何为工作表标签设置不同状态下的样式。Demo 创建了四个工作表，每个工作表标签都有独特的正常状态和活动状态样式，并为受保护的工作表设置了保护状态图标。
实现思路
创建包含四个工作表的工作簿，并将第三、四个工作表设置为保护状态
为每个工作表标签设置正常状态样式，包括背景色、前景色和字体
为每个工作表标签设置活动状态样式，使用加粗字体以区分当前选中标签
为第四个工作表单独设置保护状态样式，添加锁形图标
为所有工作表标签设置默认的保护状态样式
代码解析
为单个工作表标签设置状态样式
通过 sheetTabStyles.add() 方法为指定工作表标签设置特定状态的样式。第一个参数指定状态类型（如 normal 或 active），第二个参数定义样式对象，第三个参数指定要应用该样式的工作表名称数组。
为受保护工作表设置图标样式
当工作表被设置为保护状态后，可以通过 protected 状态样式为其添加标识图标。
设置默认状态样式
通过 defaultSheetTabStyles 可以设置全局默认样式。如果某个工作表标签单独设置了状态样式，会覆盖默认样式。
运行效果
四个工作表标签显示不同的颜色主题，每个标签的正常状态和活动状态有不同的背景色
点击不同工作表标签时，标签样式会在正常和活动状态之间切换
Sheet3 和 Sheet4 被保护，标签右侧显示锁形图标
Sheet1 中的说明文字介绍了各项设置的作用
API 参考
sheetTabStyles.add() 方法
state：工作表标签状态，使用 GC.Spread.Sheets.SheetTabState 枚举值
style：样式对象，可包含以下属性：
backColor：背景色
foreColor：前景色（文本颜色）
font：字体样式
icons：图标数组，每个图标可指定 src 和 position
sheetNames：可选，要应用样式的工作表名称数组
SheetTabState 枚举
SpreadJS 支持以下工作表标签状态：
normal：工作表标签处于正常状态
hover：鼠标悬停在工作表标签上
protected：工作表已被保护
active：工作表标签处于焦点状态
selected：工作表标签在选中范围内
var spreadNS = GC.Spread.Sheets;
window.onload = function () {
const spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 4, font: '16px Calibri' });
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
const sheet1 = spread.getSheet(0);
const sheet2 = spread.getSheet(1);
const sheet3 = spread.getSheet(2);
const sheet4 = spread.getSheet(3);
sheet3.options.isProtected = true;
sheet4.options.isProtected = true;
// Set sheet tab state style
spread.sheetTabStyles.add(spreadNS.SheetTabState.normal, {
backColor: 'rgb(223, 181, 139)',
foreColor: 'rgb(68, 68, 68)',
font: '16px Calibri',
}, [sheet1.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.active, {
backColor: 'rgb(239, 218, 198)',
foreColor: 'rgb(68, 68, 68)',
font: 'bold 16px Calibri',
}, [sheet1.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.normal, {
backColor: 'rgb(125, 137, 37)',
foreColor: 'rgb(255, 255, 255)',
font: '16px Calibri',
}, [sheet2.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.active, {
backColor: 'rgb(190, 196, 149)',
foreColor: 'rgb(68, 68, 68)',
font: 'bold 16px Calibri',
}, [sheet2.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.normal, {
backColor: 'rgb(140, 36, 30)',
foreColor: 'rgb(255, 255, 255)',
font: '16px Calibri',
}, [sheet3.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.active, {
backColor: 'rgb(197, 147, 143)',
foreColor: 'rgb(68, 68, 68)',
font: 'bold 16px Calibri',
}, [sheet3.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.normal, {
backColor: 'rgb(243, 157, 0)',
foreColor: 'rgb(68, 68, 68)',
font: '16px Calibri',
}, [sheet4.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.active, {
backColor: 'rgb(249, 206, 140)',
foreColor: 'rgb(68, 68, 68)',
font: 'bold 16px Calibri',
}, [sheet4.name()]);
spread.sheetTabStyles.add(spreadNS.SheetTabState.protected, {
icons: [
{
src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAStJREFUWEftllFuwjAMhn/TiwSpkQKn4CbQkwAn6XaS7RZESiVyEJindGGqEImc8oA2JS99qJ3/yx/HMuHFi16sjwrw9xwwbbtZEG0Z2ABQsYY+w5ebprPW+pK6KnLAtO2eiA4TgVE4gowwzHyww3CUQogBwsmJ6AOAZ+bODsNNfNSK//sAw0BnnXuTQIgBVlpztHmZstkYo+h6DZDq5Jxob1FQ3PgssXetdc/AjpsmCTp1Rgag9Y6AXgJgbrHCaygDEGz6TwGMUbhc1H3lP6ryUC/S2JCfvYL4tPaS5/QohgD/xfyeA88CrLQ+T7rdXA5/cm6ZSk4CTBrPXOHfvFxPqADVgepAdSDtwM9wETrh02tWI4pj1v0MWArjGTjmxjPRPFCqWhJfAaoD3xM7riFdKnShAAAAAElFTkSuQmCC',
position: GC.Spread.Sheets.IconPosition.right
}
]
}, [sheet4.name()]);
// Set default sheet tab state styles
spread.options.defaultSheetTabStyles = {
[spreadNS.SheetTabState.protected]: {
icons: [{ src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAStJREFUWEftllFuwjAMhn/TiwSpkQKn4CbQkwAn6XaS7RZESiVyEJindGGqEImc8oA2JS99qJ3/yx/HMuHFi16sjwrw9xwwbbtZEG0Z2ABQsYY+w5ebprPW+pK6KnLAtO2eiA4TgVE4gowwzHyww3CUQogBwsmJ6AOAZ+bODsNNfNSK//sAw0BnnXuTQIgBVlpztHmZstkYo+h6DZDq5Jxob1FQ3PgssXetdc/AjpsmCTp1Rgag9Y6AXgJgbrHCaygDEGz6TwGMUbhc1H3lP6ryUC/S2JCfvYL4tPaS5/QohgD/xfyeA88CrLQ+T7rdXA5/cm6ZSk4CTBrPXOHfvFxPqADVgepAdSDtwM9wETrh02tWI4pj1v0MWArjGTjmxjPRPFCqWhJfAaoD3xM7riFdKnShAAAAAElFTkSuQmCC' }]
}
};
// Description
sheet1.setColumnWidth(0, 500);
sheet1.setRowHeight(0, 50);
sheet1.setRowHeight(1, 50);
sheet1.setRowHeight(2, 50);
sheet1.setRowHeight(3, 50);
sheet1.setDefaultValue(0, 0, '为前四个工作表选项卡设置正常状态样式和活动状态样式。');
sheet1.setDefaultValue(1, 0, '为 Sheet3 和 Sheet4 设置保护状态。');
sheet1.setDefaultValue(2, 0, '为 Sheet4 设置了单独的保护状态样式。');
sheet1.setDefaultValue(3, 0, '为所有工作表选项卡设置了受保护状态和活动状态的默认样式。');
const style = new spreadNS.Style();
style.font = '18px Calibri';
style.vAlign = spreadNS.VerticalAlign.center;
sheet1.getRange(-1, 0, -1, 1).setStyle(style);
spread.resumePaint();
};
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="zh-cn" />
<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">
<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-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/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="ss" style="width:100%; height: 100%"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sjs-tab-strip-bottom-tab {
border-radius: 4px;
}
.sjs-tab-strip-left-tab {
border-radius: 4px;
}
.sjs-tab-strip-top-tab {
border-radius: 4px;
}
.sjs-tab-strip-right-tab {
border-radius: 4px;
}
