setDataSource와 getDataSource 메서드를 사용하여 데이터 원본을 설정하고 가져올 수 있습니다. setDataSource를 사용하기 전에 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="ko-kr"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.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;
}