Sheet

SpreadJS supports binding data sources to the sheet. Binding can be sheet-level binding.

<p>You can use the <strong>setDataSource</strong> and <strong>getDataSource</strong> methods to set and get the data source. Before you use setDataSource, use the <strong>autoGenerateColumns</strong> method to control whether to generate columns automatically while binding data. For example:</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>Also you can use the <strong>getDataItem</strong> method to get the data item of the specified row.</p> <p>You can bind the columns using the specified data fields, as shown in the following example:</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 one by one </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">// or use bindColumns to bind all custom columns</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 charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.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; }