表单级别绑定

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

你可以使用 setDataSource 和 getDataSource 方法来设置获取数据源。 在设置数据源之前, 你可以使用 autoGenerateColumns 方法来控制是否自动生成绑定列。 例如: 你也可以使用 getDataItem 方法来获取指定行的数据信息。 你可以像这个例子版将数据字段绑定到指定的列:
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; }