概要と基本的な使い方

関連するデータをグループ化し、簡単に管理および分析できるように、Spread.Sheetsにはテーブルという機能があります。特定のセル範囲をテーブルとして定義できます。

<p>テーブルの追加には、2つの方法があります。1つは、<strong>add</strong>メソッドを使用して空白のテーブルを追加する方法です。次に、例を示します。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> spread = GC.Spread.Sheets.findControl(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'ss'</span>)); <span class="hljs-keyword">var</span> sheet = spread.getActiveSheet(); <span class="hljs-keyword">var</span> tableStyle = GC.Spread.Sheets.Tables.TableThemes.light1; <span class="hljs-keyword">var</span> table = sheet.tables.add(<span class="hljs-string">'table1'</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">4</span>, <span class="hljs-number">4</span>, tableStyle); <span class="hljs-comment">// 値をテーブルに設定する。</span> sheet.setArray([ [<span class="hljs-string">'Id'</span>, <span class="hljs-string">'Name'</span>, <span class="hljs-string">'Age'</span>, <span class="hljs-string">'Grade'</span>], [<span class="hljs-number">1000</span>, <span class="hljs-string">'Tom'</span>, <span class="hljs-number">23</span>, <span class="hljs-number">98</span>], [<span class="hljs-number">1001</span>, <span class="hljs-string">'Bob'</span>, <span class="hljs-number">22</span>, <span class="hljs-number">80</span>], [<span class="hljs-number">1002</span>, <span class="hljs-string">'Tony'</span>, <span class="hljs-number">23</span>, <span class="hljs-number">99</span>] ]); </code></pre> <p>もう1つは、データソースを指定し、<strong>addFromDataSource</strong>を使用してテーブルを追加する方法です。次に、例を示します。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> source = [ { <span class="hljs-attr">LastName</span>: <span class="hljs-string">'Jone'</span>, <span class="hljs-attr">FirstName</span>: <span class="hljs-string">'Nancy'</span>,<span class="hljs-attr">Phone</span>: <span class="hljs-string">'(123)555-0100'</span>}, { <span class="hljs-attr">LastName</span>: <span class="hljs-string">'Tom'</span>, <span class="hljs-attr">FirstName</span>: <span class="hljs-string">'Andrew'</span>,<span class="hljs-attr">Phone</span>: <span class="hljs-string">'(123)555-0100'</span>}, { <span class="hljs-attr">LastName</span>: <span class="hljs-string">'Kotas'</span>, <span class="hljs-attr">FirstName</span>: <span class="hljs-string">'Jan'</span>, <span class="hljs-attr">Phone</span>: <span class="hljs-string">'(123)555-0100'</span>} ] <span class="hljs-keyword">var</span> table = sheet.tables.addFromDataSource(<span class="hljs-string">'table2'</span>, <span class="hljs-number">1</span>, <span class="hljs-number">1</span>, source); </code></pre> <p>2番目の方法では、テーブルの一部のデータを初期化できます。</p>
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function initSpread(spread) { var spreadNS = GC.Spread.Sheets; var sheet = spread.getSheet(0); var source = [ { Course: "Calculus", Term: 1, Credit: 5, Score: 80, Teacher: "Nancy.Feehafer" }, { Course: "P.E.", Term: 1, Credit: 3.5, Score: 85, Teacher: "Andrew.Cencini" }, { Course: "Political Economics", Term: 1, Credit: 3.5, Score: 95, Teacher: "Jan.Kotas" }, { Course: "Basic of Computer", Term: 1, Credit: 2, Score: 85, Teacher: "Steven.Thorpe" }, { Course: "Micro-Economics", Term: 1, Credit: 4, Score: 62, Teacher: "Jan.Kotas" }, { Course: "Linear Algebra", Term: 2, Credit: 5, Score: 73, Teacher: "Nancy.Feehafer" }, { Course: "Accounting", Term: 2, Credit: 3.5, Score: 86, Teacher: "Nancy.Feehafer" }, { Course: "Statistics", Term: 2, Credit: 5, Score: 85, Teacher: "Robert.Zare" }, { Course: "Marketing", Term: 2, Credit: 4, Score: 70, Teacher: "Laura.Giussani" } ]; spread.suspendPaint(); var table = sheet.tables.addFromDataSource("Table1", 2, 1, source, spreadNS.Tables.TableThemes.medium2); table.showFooter(true); table.showHeader(true); table.highlightFirstColumn(true); table.highlightLastColumn(false); table.setColumnFormula(2, "=SUBTOTAL(109,[Credit])"); table.setColumnFormula(3, "=SUBTOTAL(109,[Score])"); table.setColumnValue(0, "Total"); sheet.setColumnWidth(0, 20); sheet.setColumnWidth(1, 130); sheet.setColumnWidth(2, 70); sheet.setColumnWidth(3, 70); sheet.setColumnWidth(4, 70); sheet.setColumnWidth(5, 100); spread.resumePaint(); }
<!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" 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; }