シートレベルバインディング

SpreadJSでは、シートにデータソースを連結できます。データの連結は、シートレベルでもセルレベルでも行えます。

<p>データソースを設定するには<strong>setDataSource</strong>メソッドを、取得するには<strong>getDataSource</strong>メソッドを使用します。setDataSourceを使用する場合は、事前に<strong>autoGenerateColumns</strong>メソッドを使用して、データ連結時に列を自動生成するかどうかを定義します。次に、例を示します。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> customers = [ { <span class="hljs-attr">ID</span>:<span class="hljs-number">0</span>, <span class="hljs-attr">Name</span>:<span class="hljs-string">'A'</span>, <span class="hljs-attr">Info1</span>:<span class="hljs-string">'Info0'</span> }, { <span class="hljs-attr">ID</span>:<span class="hljs-number">1</span>, <span class="hljs-attr">Name</span>:<span class="hljs-string">'B'</span>, <span class="hljs-attr">Info1</span>:<span class="hljs-string">'Info1'</span> }, { <span class="hljs-attr">ID</span>:<span class="hljs-number">2</span>, <span class="hljs-attr">Name</span>:<span class="hljs-string">'C'</span>, <span class="hljs-attr">Info1</span>:<span class="hljs-string">'Info2'</span> }, ]; sheet.autoGenerateColumns = <span class="hljs-literal">true</span>; sheet.setDataSource(customers); </code></pre> <p>また、<strong>getDataItem</strong>メソッドを使用すると、指定した行のデータ項目を取得できます。</p> <p>次の例に示すように、指定のデータフィールドを使用して列を連結できます。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> datasource = [ { <span class="hljs-attr">name</span>: <span class="hljs-string">'Alice'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">27</span>, <span class="hljs-attr">birthday</span>: <span class="hljs-string">'1985/08/31'</span>, <span class="hljs-attr">position</span>: <span class="hljs-string">'PM'</span> } ]; <span class="hljs-comment">// bindColumnで個々にバインドする。</span> <span class="hljs-keyword">var</span> nameColInfo = { <span class="hljs-attr">name</span>: <span class="hljs-string">'name'</span>, <span class="hljs-attr">displayName</span>: <span class="hljs-string">'Display Name'</span>, <span class="hljs-attr">size</span>: <span class="hljs-number">70</span> }; <span class="hljs-keyword">var</span> ageColInfo = { <span class="hljs-attr">name</span>: <span class="hljs-string">'age'</span>, <span class="hljs-attr">displayName</span>: <span class="hljs-string">'Age'</span>, <span class="hljs-attr">size</span>: <span class="hljs-number">40</span>, <span class="hljs-attr">resizable</span>: <span class="hljs-literal">false</span> }; <span class="hljs-keyword">var</span> birthdayColInfo = { <span class="hljs-attr">name</span>: <span class="hljs-string">'birthday'</span>, <span class="hljs-attr">displayName</span>: <span class="hljs-string">'Birthday'</span>, <span class="hljs-attr">formatter</span>: <span class="hljs-string">'d/M/yy'</span>, <span class="hljs-attr">size</span>: <span class="hljs-number">120</span> }; <span class="hljs-keyword">var</span> positionColInfo = { <span class="hljs-attr">name</span>: <span class="hljs-string">'position'</span>, <span class="hljs-attr">displayName</span>: <span class="hljs-string">'Position'</span>, <span class="hljs-attr">size</span>: <span class="hljs-number">50</span>, <span class="hljs-attr">visible</span>: <span class="hljs-literal">false</span> }; sheet.autoGenerateColumns = <span class="hljs-literal">false</span>; sheet.setDataSource(datasource); sheet.bindColumn(<span class="hljs-number">0</span>, nameColInfo); sheet.bindColumn(<span class="hljs-number">1</span>, birthdayColInfo); sheet.bindColumn(<span class="hljs-number">2</span>, ageColInfo); sheet.bindColumn(<span class="hljs-number">3</span>, positionColInfo); <span class="hljs-comment">// または、bindColumnsですべてのカスタム列をバインドする。</span> <span class="hljs-keyword">var</span> colInfos = [ { <span class="hljs-attr">name</span>: <span class="hljs-string">'position'</span>, <span class="hljs-attr">displayName</span>: <span class="hljs-string">'Position'</span>, <span class="hljs-attr">size</span>: <span class="hljs-number">50</span>, <span class="hljs-attr">visible</span>: <span class="hljs-literal">false</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'name'</span>, <span class="hljs-attr">displayName</span>: <span class="hljs-string">'Display Name'</span>, <span class="hljs-attr">size</span>: <span class="hljs-number">70</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'birthday'</span>, <span class="hljs-attr">displayName</span>: <span class="hljs-string">'Birthday'</span>, <span class="hljs-attr">formatter</span>: <span class="hljs-string">'d/M/yy'</span>, <span class="hljs-attr">size</span>: <span class="hljs-number">120</span> }, { <span class="hljs-attr">name</span>: <span class="hljs-string">'age'</span>, <span class="hljs-attr">displayName</span>: <span class="hljs-string">'Age'</span>, <span class="hljs-attr">size</span>: <span class="hljs-number">40</span>, <span class="hljs-attr">resizable</span>: <span class="hljs-literal">false</span> }, ]; sheet.autoGenerateColumns = <span class="hljs-literal">false</span>; sheet.setDataSource(datasource); sheet.bindColumns(colInfos); </code></pre>
var _lines = ["Computers", "Washers", "Stoves"]; var _colors = ["Red", "Green", "Blue", "White"]; var _ratings = ["Terrible", "Bad", "Average", "Good", "Great", "Epic"]; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 }); initSpread(spread); }; function Product(id, line, color, name, price, cost, weight, discontinued, rating) { this.id = id; this.line = line; this.color = color; this.name = name; this.price = price; this.cost = cost; this.weight = weight; this.discontinued = discontinued; this.rating = rating; } function getProducts(count) { var dataList = []; for (var i = 1; i <= count; i++) { var line = _lines[parseInt(Math.random() * 3)]; dataList[i - 1] = new Product(i, line, _colors[parseInt(Math.random() * 4)], line + " " + line.charAt(0) + i, parseInt(Math.random() * 5001) / 10.0 + 500, parseInt(Math.random() * 6001) / 10.0, parseInt(Math.random() * 10001) / 100.0, !!(Math.random() > 0.5), _ratings[parseInt(Math.random() * 6)]); } return dataList; } function initSpread(spread) { spread.suspendPaint(); spread.options.tabStripRatio = 0.8; var products = getProducts(100); var sheet = spread.getSheet(0); sheet.name("Default binding"); sheet.setDataSource(products); var sheet2 = spread.getSheet(1); sheet2.name("Custom binding"); sheet2.autoGenerateColumns = false; sheet2.setDataSource(products); var colInfos = [ { name: "id", displayName: "ID" }, { name: "name", displayName: "Name", size: 100 }, { name: "line", displayName: "Line", size: 80 }, { name: "color", displayName: "Color" }, { name: "price", displayName: "Price", formatter: "0.00", size: 80 }, { name: "cost", displayName: "Cost", formatter: "0.00", size: 80 }, { name: "weight", displayName: "Weight", formatter: "0.00", size: 80 }, { name: "discontinued", displayName: "Discontinued", cellType: new GC.Spread.Sheets.CellTypes.CheckBox(), size: 100 }, { name: "rating", displayName: "Rating" } ]; sheet2.bindColumns(colInfos); 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; }