概要と基本的な使い方

テーブルは、関連するスプレッドシートのデータの管理と分析を容易にします。Excelと同様に、SpreadJSは、自動拡張、条件付き書式、データ検証、組み込みのコンテキストメニュー、固定スクロールヘッダー、テーブルのサイズ変更とナビゲーション、合計のサマリー行などのサポートを備えたテーブルを提供します。

テーブルの追加には、2つの方法があります。1つは、addメソッドを使用して空白のテーブルを追加する方法です。次に、例を示します。 もう1つは、データソースを指定し、addFromDataSourceを使用してテーブルを追加する方法です。次に、例を示します。 2番目の方法では、テーブルの一部のデータを初期化できます。
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.medium7); 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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/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; }