SpreadJS支持以下单元格状态：
类型
含义
hover
鼠标悬停在单元格上方
invalid
数据验证失败
readonly
单元格被锁定
edit
单元格正在编辑中。
active
单元格具有焦点
selected
单元格（可为多个）在已选择的范围内。
dirty
单元格值被改变过。
invalid formula
单元格的值是一个非法公式串
这是设置样式的示例:
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
spread.suspendPaint();
initSpread(spread);
spread.resumePaint();
};
function initSpread(spread) {
spread.options.backColor = "#fefce3";
spread.options.grayAreaBackColor = "#fefce3";
var sheet = spread.getSheet(0);
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.gridline.showVerticalGridline = false;
sheet.options.selectionBorderColor = "transparent";
sheet.defaults.rowHeight = 60;
sheet.defaults.colWidth = 90;
sheet.setColumnCount(10);
sheet.options.rowHeaderVisible = false;
sheet.options.colHeaderVisible = false;
var style = sheet.getDefaultStyle();
style.font = "20px Segoe UI";
style.vAlign = GC.Spread.Sheets.VerticalAlign.top;
style.labelOptions = {
alignment: GC.Spread.Sheets.LabelAlignment.leftTop,
visibility: GC.Spread.Sheets.LabelVisibility.visible,
font: 'normal 14px/normal "nimbus-sans"',
foreColor: "#333333",
margin: "3px 0px 0px 10px"
};
style.cellPadding = "25px 0px 0px 0px";
sheet.setValue(0, 0, "添加到库存");
sheet.getCell(0, 0).font("bold normal 25px normal");
sheet.getRange(0, 0, 1, 10).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thick), { bottom: true });
sheet.getRange(1, 0, 5, 10).borderBottom(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin));
sheet.getCell(1, 0).watermark("产品名称");
sheet.getRange(1, 0, 1, 7).borderRight(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin));
sheet.addSpan(1, 0, 1, 7);
sheet.addSpan(1, 7, 1, 3);
sheet.getCell(1, 7).watermark("标签");
sheet.getRange(2, 0, 1, 5).borderRight(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin));
var vendorCombo = new GC.Spread.Sheets.CellTypes.ComboBox();
var vendorList = ["选择供应商", "ted", "Magna Phasellus Dolor 公司", "Fames Ac Turpis 公司", "Eu Eros 研究所", "Suspendisse Sagittis 联合公司", "Tempor Lorem 电脑公司", "Nulla Facilisi Sed 电脑公司", "Dignissim 公司", "Blandit 有限公司", "Dapibus Gravida Aliquam 有限责任合伙公司", "Cursus A 公司", "Tellus 电脑公司", "Fusce Mi 基金会", "Dictum Sapien Aenean 联合公司", "In Tincidunt 电脑公司", "Sapien Aenean 有限公司", "Libero 基金会", "Egestas Rhoncus Proin 公司", "Feugiat Nec Diam 研究所", "Turpis 基金会", "Pede Malesuada Vel 联合公司", "Eget Venenatis A 电脑公司", "Mollis Vitae 公司", "Gravida Mauris 公司", "Tortor 咨询公司", "Habitant Morbi Tristique 公司", "Enim 公司", "Sed Turpis Nec 有限责任公司", "Enim 基金会", "Tincidunt Orci Quis 研究所", "Lectus Pede 有限责任公司", "Class 公司", "Erat Volutpat Nulla 有限责任合伙公司", "Sed 有限责任公司", "Justo Faucibus 联合公司", "Vel Turpis 基金会", "Tellus Aenean 有限公司", "Tempus Scelerisque 公司", "Eleifend 有限责任合伙公司", "A Felis Ullamcorper 公司", "Neque Non 有限责任公司", "Nibh Donec Est 电脑公司"];
vendorCombo.items(vendorList);
vendorCombo.maxDropDownItems(10);
vendorCombo.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text);
sheet.getCell(2, 0, GC.Spread.Sheets.SheetArea.viewport).watermark("供应商").cellType(vendorCombo).value("选择供应商").font("15px Segoe UI").textIndent(1.25);
sheet.addSpan(2, 0, 1, 5);
var productList = ["选择产品类型", "et magnis", "Vivamus rhoncus.", "egestas ligula.", "nulla. Cras", "Proin mi.", "turpis non", "ante ipsum", "arcu. Curabitur", "ante. Maecenas", "magna. Phasellus", "Suspendisse aliquet,", "purus gravida", "ac risus.", "mollis non,"]
var productCombo = new GC.Spread.Sheets.CellTypes.ComboBox();
productCombo.items(productList);
productCombo.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text);
sheet.getCell(2, 5).watermark("产品类型").cellType(vendorCombo).value("选择供应商").font("15px Segoe UI").textIndent(1.25);
sheet.addSpan(2, 5, 1, 5);
sheet.addSpan(3, 0, 1, 10);
sheet.getCell(3, 0).watermark("产品描述");
sheet.getRange(4, 0, 1, 8).borderRight(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin));
sheet.getCell(4, 0).watermark("SKU");
sheet.addSpan(4, 0, 1, 2);
sheet.getCell(4, 2).watermark("初始库存水平");
sheet.addSpan(4, 2, 1, 2);
sheet.addSpan(4, 4, 1, 2);
sheet.addSpan(4, 6, 1, 2);
sheet.addSpan(4, 8, 1, 2);
sheet.getCell(4, 4).watermark("成本价");
sheet.getCell(4, 6).watermark("批发价");
sheet.getCell(4, 8).watermark("零售价");
sheet.getRange(5, 0, 1, 5).borderRight(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin));
sheet.getCell(5, 0).watermark("国家");
sheet.addSpan(5, 0, 1, 5);
sheet.getCell(5, 5).watermark("城市");
sheet.addSpan(5, 5, 1, 5);
var hoverStyle = new GC.Spread.Sheets.Style();
hoverStyle.backColor = 'white';
var range = new GC.Spread.Sheets.Range(1, 0, 5, 10);
sheet.cellStates.add(range, GC.Spread.Sheets.CellStatesType.hover, hoverStyle)
}
<!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">
<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" class="sample-spreadsheets"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
overflow: auto;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
}
.option-row {
padding-bottom: 8px;
}
label {
padding-bottom: 4px;
display: block;
}
input {
width: 100%;
padding: 4px 8px;
box-sizing: border-box;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
