单元格状态介绍

单元格状态提供有关单元格如何响应用户不同操作的信息,例如在编辑,悬停,只读,以及其他方法,具体取决于单元格状态,将不同的样式应用于指定的区域。 下面的简单示例将鼠标悬停在使用预定义样式的单元格上时,将背景颜色自动更改为白色。

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, "Add to inventory"); 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("PRODUCT NAME"); 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("TAGS"); 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 = ["Select a vendor", "ted", "Magna Phasellus Dolor Incorporated", "Fames Ac Turpis Inc.", "Eu Eros Institute", "Suspendisse Sagittis Associates", "Tempor Lorem PC", "Nulla Facilisi Sed PC", "Dignissim Corp.", "Blandit Ltd", "Dapibus Gravida Aliquam LLP", "Cursus A Inc.", "Tellus PC", "Fusce Mi Foundation", "Dictum Sapien Aenean Associates", "In Tincidunt PC", "Sapien Aenean Ltd", "Libero Foundation", "Egestas Rhoncus Proin Corp.", "Feugiat Nec Diam Institute", "Turpis Foundation", "Pede Malesuada Vel Associates", "Eget Venenatis A PC", "Mollis Vitae Corporation", "Gravida Mauris Incorporated", "Tortor Consulting", "Habitant Morbi Tristique Corporation", "Enim Corp.", "Sed Turpis Nec LLC", "Enim Foundation", "Tincidunt Orci Quis Institute", "Lectus Pede LLC", "Class Corporation", "Erat Volutpat Nulla LLP", "Sed LLC", "Justo Faucibus Associates", "Vel Turpis Foundation", "Tellus Aenean Limited", "Tempus Scelerisque Corporation", "Eleifend LLP", "A Felis Ullamcorper Company", "Neque Non LLC", "Nibh Donec Est PC"]; vendorCombo.items(vendorList); vendorCombo.maxDropDownItems(10); vendorCombo.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text); sheet.getCell(2, 0, GC.Spread.Sheets.SheetArea.viewport).watermark("VENDOR").cellType(vendorCombo).value("Select a vendor").font("15px Segoe UI").textIndent(1.25); sheet.addSpan(2, 0, 1, 5); var productList = ["Select a product type", "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("PRODUCT TYPE").cellType(vendorCombo).value("Select a vendor").font("15px Segoe UI").textIndent(1.25); sheet.addSpan(2, 5, 1, 5); sheet.addSpan(3, 0, 1, 10); sheet.getCell(3, 0).watermark("PRODUCT DESCRIPTION"); 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("INITIAL STOCK LEVEL"); 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("COST PRICE"); sheet.getCell(4, 6).watermark("WHOLESALE PRICE"); sheet.getCell(4, 8).watermark("RETAIL PRICE"); sheet.getRange(5, 0, 1, 5).borderRight(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin)); sheet.getCell(5, 0).watermark("COUNTRY"); sheet.addSpan(5, 0, 1, 5); sheet.getCell(5, 5).watermark("CITY"); 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; }