概要

SpreadJSでは、編集時、ホバー時、読み取り専用時など、ユーザーからのさまざまなアクションにセルがどのように応答するかという情報を提供します。また、セルの状態に応じて指定された範囲に異なるスタイルを適用します。次の簡単な例では、定義済みのスタイルを使用してセルの上にマウスカーソルを移動すると、背景色が自動的に白に変更されます。

<p>SpreadJSは、次のセル状態をサポートしています:</p> <table border="1" style="border-collapse: collapse;width:80%;"> <tbody> <tr> <th style="width: 150px;">種類</th> <th >内容</th> </tr> <tr> <td>ホバー</td> <td>マウスカーソルがセル上に移動する</td> </tr> <tr> <td>無効</td> <td>データ検証に失敗する</td> </tr> <tr> <td>読み取り専用</td> <td>セルがロックされる</td> </tr> <tr> <td>編集</td> <td>セルを編集する</td> </tr> <tr> <td>アクティブ</td> <td>セルにフォーカスがある</td> </tr> <tr> <td>選択</td> <td>セルが選択範囲内にある</td> </tr> <tr> <td>dirty</td> <td>セルの値が変更された</td> </tr> </tbody> </table> <p>スタイルを設定する例を次に示します:</p> <pre><code class="hljs js language-js"> <span class="hljs-comment">/** * <span class="hljs-doctag">@description </span>セル範囲の状態インスタンスを追加します。これは、セル範囲の状態が一致したときにcellStateのスタイルを適用します。 * <span class="hljs-doctag">@param </span>range {GC.Spread.Sheets.Range} このスタイルを適用するセル範囲 * <span class="hljs-doctag">@param </span>state {GC.Spread.Sheets.CellStatesType} 判別するセル状態 * <span class="hljs-doctag">@param </span>style {GC.Spread.Sheets.Style} 適用するスタイル * <span class="hljs-doctag">@param </span>[sheetArea] {GC.Spread.Sheets.SheetArea} シート領域。指定されていない場合は、デフォルト(viewport)になります */</span> <span class="hljs-keyword">var</span> style = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Style(); style.backColor = <span class="hljs-string">'blue'</span>; style.foreColor = <span class="hljs-string">'red'</span>; <span class="hljs-keyword">var</span> range = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Range(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">3</span>); sheet.cellStates.add(range,GC.Spread.Sheets.CellStatesType.hover,style); </code></pre>
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="ja-jp" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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; }