このサンプルでは、通常の列、関連する列、計算された列を表示しており、SpreadJSでさまざまな種類のテーブルシート列を作成できます。
通常の列
列の値として、従業員テーブルの「firstName」のように、単なるデータフィールド名を使用します。
フィールド値がオブジェクトの場合、従業員テーブルの「address.city」のように、"." を使ってサブフィールドを取得できます。
関連する列
2つのテーブルの間にリレーションシップを追加すると、関連するテーブルをフィールドとして使用できます。以下はサンプルコードです：
フィールドが配列の場合、「.1」を使用して最初の項目を取得できます (例："orders.1.orderDate")。また、「.property」を使用してすべてのオブジェクトのプロパティを取得し、新しい配列を作成します（例："orders.orderDate"）。
計算された列
「=」で始まる数式を使って、計算された列として列の値を設定できます。以下のフィールド参照構文ルールで、テーブル内のデータを参照できます。
オブジェクトの種類
構文の例
説明
サンプル
現在の行フィールド
=[@column1]
フィールドcolumn1の現在の行データを取得する
=[@QtyAvailable] * [@UnitPrice] * 1.5
は各行のRetailValueを計算します
すべてのフィールド
=[column1]
フィールドcolumn1のすべてのデータを取得する
=SUM([column1])
はcolumn1の合計を取得します
オブジェクトフィールドの属性
=[@column1.abc]
フィールドcolumn1の現在の行にある"abc"の属性値を取得する
=[@name.first] & " " & [@name.last]
はnameの文字列を取得します
配列フィールドの項目
=[@column1.0]
フィールドcolumn1の現在の行の最初の値を取得する
=[@awards.0.name]
は最初のawardの名前を取得します
オブジェクト配列フィールドの属性
=[@column1.abc]
ワークシート
=SUM([@orderDetails.weight])
は注文のweightを取得します
現在のすべての行
=[@]
現在の行データをオブジェクトとして取得する
フィールド名にスペースやドットがある場合、「=[@[column 1].[a.bc]]」のように角括弧を追加する必要があります。これはフィールドcolumn 1の現在の行にある「a.bc」という属性値を取得します。
すべての行と現在の行のほかに、指定した行を取得することができます：
サンプル
説明
[#1[column1]]
最初の行のcolumn1の値を取得します
[#1,#last[column1]]
最初と最後の行のcolumn1の値を取得します
[#odd[column1]]
奇数行のcolumn1の値を取得します
[#1,#even[column1]]
最初の行と偶数行のcolumn1の値を取得します
[@+1[column1]]
次の行のcolumn1の値を取得します
[@-1[column1]]
前の行のcolumn1の値を取得します
[@+1:#last]
次の行から最後の行までの行を取得します
[@-1:@+1]
前の行から次の行までの行を取得します
[@:#last]
現在の行から最後の行までの行を取得します
[#1,@-1:@+1,#last[column1]]
最初の行、前の行から次の行、最後の行のcolumn1の値を取得します
[#1]
最初の行を取得します
以下はそのサンプルです：
"=SUM([#1:@[change]])" はchangeの累積を表示します。
var tables = {};
var selectedTable = "order";
window.onload = function () {
var mainSpread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var dataManager = mainSpread.dataManager();
// addTable
tables.product = dataManager.addTable("productTable", {
data: data.products
});
tables.supplier = dataManager.addTable("supplierTable", {
data: data.suppliers
});
tables.category = dataManager.addTable("categoryTable", {
data: data.categories
});
tables.order = dataManager.addTable("orderTable", {
data: data.orders
});
tables.detail = dataManager.addTable("orderDetailTable", {
data: data.orderDetails
});
tables.shipper = dataManager.addTable("shipperTable", {
data: data.shippers
});
tables.employee = dataManager.addTable("employeeTable", {
data: data.employees
});
tables.customer = dataManager.addTable("customerTable", {
data: data.customers
});
// addRelationship
dataManager.addRelationship(tables.product, "supplierId", "supplier", tables.supplier, "id", "products");
dataManager.addRelationship(tables.product, "categoryId", "category", tables.category, "id", "products");
dataManager.addRelationship(tables.order, "customerId", "customer", tables.customer, "id", "orders");
dataManager.addRelationship(tables.order, "shipVia", "shipper", tables.shipper, "id", "orders");
dataManager.addRelationship(tables.order, "id", "details", tables.detail, "orderId", "order");
dataManager.addRelationship(tables.order, "employeeId", "employee", tables.employee, "id", "orders");
dataManager.addRelationship(tables.product, "id", "soldDetail", tables.detail, "productId", "product");
dataManager.addRelationship(tables.employee, "reportsTo", "manager", tables.employee, "id", "subordinate");
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("sampleDiv2"));
spread.fromJSON(ssjson);
spread.options.scrollbarMaxAlign = true;
var columnsSpread = new GC.Spread.Sheets.Workbook(document.getElementById("sampleDiv3"));
var sheet = columnsSpread.getActiveSheet();
columnsSpread.options.tabStripVisible = false;
columnsSpread.options.showHorizontalScrollbar = false;
columnsSpread.options.scrollbarMaxAlign = true;
sheet.setColumnCount(2);
sheet.setRowCount(12);
sheet.setColumnWidth(1, "*");
sheet.setText(0,0,"Caption",1);
sheet.setText(0,1,"Value",1);
sheet.getRange(-1,1,-1,1).formatter("@");
document.getElementById("sampleDiv2").addEventListener("click", function (e) {
var x = e.offsetX;
var y = e.offsetY;
var target = spread.getActiveSheet().hitTest(x, y);
if (target.shapeHitInfo == null && x > 700) {
y = y - 300;
target = spread.getActiveSheet().hitTest(x, y);
}
if (target.shapeHitInfo) {
var shape = target.shapeHitInfo.shape;
var style = shape.style();
if (style.fill) { // skip the connect line
style.fill.color = '#'+Math.floor(Math.random()*0xA00000 + 0x100000).toString(16); //random color
shape.style(style);
var text = shape.text();
switchTable(text);
}
}
}, false);
document.getElementById("setButton").addEventListener("click", function (e) {
setView();
}, false);
switchTable("order");
};
function switchTable (tableName) {
selectedTable = tableName;
setTimeout(function() {
var json = JSON.stringify(tables[selectedTable].get(0),null , 2); // get is internal API
document.getElementById("datasample").innerHTML = selectedTable + ".0:\n" + json;
}, 0);
var spread = GC.Spread.Sheets.findControl( document.getElementById("sampleDiv3"));
var sheet = spread.getActiveSheet();
sheet.clear(0, 0, sheet.getRowCount(), sheet.getColumnCount(), GC.Spread.Sheets.SheetArea.viewport,GC.Spread.Sheets.StorageType.data);
sheet.setArray(0,0,dataColumns[tableName]);
sheet.autoFitColumn(0);
setView();
}
function setView () {
var spread = GC.Spread.Sheets.findControl( document.getElementById("sampleDiv3"));
var sheet = spread.getActiveSheet();
var rowCount = sheet.getRowCount();
var fields = [];
for (var i = 0; i < rowCount; i++) {
var value = sheet.getValue(i, 1);
if (value) {
fields.push({value: value, caption: sheet.getValue(i, 0), width: 200});
}
}
var view = tables[selectedTable].addView("selectedTable"+(new Date()).valueOf(), fields);
var spread = GC.Spread.Sheets.findControl( document.getElementById("ss"));
spread.clearSheets();
spread.clearSheetTabs();
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
sheet.options.allowAddNew = false;
sheet.actionColumn.options({ visible: false });
sheet.setDefaultRowHeight(40, GC.Spread.Sheets.SheetArea.colHeader);
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
view.fetch().then(function(args) {
sheet.suspendPaint();
sheet.setDataView(view);
sheet.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">
<!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<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-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.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="$DEMOROOT$/spread/source/data/northwind-data.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/temple-shape.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 class="options-container">
<div class="option-row">
<div class="inputContainer">
<p>テーブルをクリックしてください。</p>
<div id="sampleDiv2" style="height: 143px;"></div>
</div>
<div class="inputContainer">
<p>列を編集して〈設定〉ボタンを押してください。</p>
<div id="sampleDiv3" style="height: 200px;"></div>
<div class="col-xs-4">
<input id="setButton" class="button" type="button" value="設定"/>
</div>
</div>
<div class="inputContainer">
<p>データテーブルの最初のデータ</p>
<pre id="datasample">
</pre>
</div>
</div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 500px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 500px;
padding: 3px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.sample-options {
z-index: 1000;
}
.inputContainer {
width: 100%;
height: auto;
border: 1px solid #eee;
padding: 6px 12px;
margin-bottom: 10px;
box-sizing: border-box;
}
.input {
font-size: 14px;
border: 0;
outline: none;
background: transparent;
}
.button {
height: 30px;
padding: 6px 6px;
width: 80px;
margin-top: 6px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
