表单级别绑定

SpreadJS 支持绑定数据源到表单(绑定类型有表单级别绑定和单元格级别绑定。)

<p>你可以使用 <strong>setDataSource</strong> 和 <strong>getDataSource</strong> 方法来设置获取数据源。 在设置数据源之前, 你可以使用 <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 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 name="spreadjs culture" content="zh-cn" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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; }