Sheet

Theme:

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

    var customers = [
       { ID:0, Name:'A', Info1:'Info0' },
       { ID:1, Name:'B', Info1:'Info1' },
       { ID:2, Name:'C', Info1:'Info2' },
    ];
    sheet.autoGenerateColumns = true;
    sheet.setDataSource(customers);

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 datasource = [
       { name: 'Alice', age: 27, birthday: '1985/08/31', position: 'PM' }
    ];
    // bindColumn one by one 
    var nameColInfo = { name: 'name', displayName: 'Display Name', size: 70 };
    var ageColInfo = { name: 'age', displayName: 'Age', size: 40, resizable: false };
    var birthdayColInfo = { name: 'birthday', displayName: 'Birthday', formatter: 'd/M/yy', size: 120 };
    var positionColInfo = { name: 'position', displayName: 'Position', size: 50, visible: false };
    sheet.autoGenerateColumns = false;
    sheet.setDataSource(datasource);
    sheet.bindColumn(0, nameColInfo);
    sheet.bindColumn(1, birthdayColInfo);
    sheet.bindColumn(2, ageColInfo);
    sheet.bindColumn(3, positionColInfo);

    // or use bindColumns to bind all custom columns
    var colInfos = [
       { name: 'position', displayName: 'Position', size: 50, visible: false },
       { name: 'name', displayName: 'Display Name', size: 70 },
       { name: 'birthday', displayName: 'Birthday', formatter: 'd/M/yy', size: 120 },
       { name: 'age', displayName: 'Age', size: 40, resizable: false },
    ];
    sheet.autoGenerateColumns = false;
    sheet.setDataSource(datasource);
    sheet.bindColumns(colInfos);

Feedback

Submit and view feedback for

This Product This Page

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: 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: 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/@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;
}