You can use the setDataSource and getDataSource methods to set and get the data source. Before you use setDataSource, use the autoGenerateColumns method to control whether to generate columns automatically while binding data. For example:
In addition to binding an array directly, sheet-level binding also supports binding a Data Manager table. This allows a worksheet to use a table created by spread.dataManager() as its data source. For example:
Also you can use the getDataItem method to get the data item of the specified row.
You can bind the columns using the specified data fields, as shown in the following example:
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: 3 });
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);
var sheet3 = spread.getSheet(2);
sheet3.name("Data manager binding");
var dataManagerTable = spread.dataManager().addTable('sheet', { data: products });
sheet3.setDataSource(dataManagerTable);
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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/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;
}
