表单标签状态样式
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, 'Set normal state styles and active state styles for the first four sheet tabs.');
sheet1.setDefaultValue(1, 0, 'Set protection state for Sheet3 and Sheet4.');
sheet1.setDefaultValue(2, 0, 'A separate protection state style is set for Sheet4.');
sheet1.setDefaultValue(3, 0, 'The default styles of protected state and active state are set for all sheet tabs.');
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;
}
