이 샘플에서는 일반 열, 관련 열 및 계산된 열을 보여주고 SpreadJS에서 테이블 시트의 여러 유형을 만들 수 있습니다.
일반 열
테이블 필드 이름을 열 값으로 사용합니다(예: 직원 테이블의 "firstName").
필드 값이 개체이면 "."를 사용하여 하위 필드를 가져올 수 있습니다(예: 직원 테이블의 "address.city").
관련 열
두 테이블 간에 관계를 추가하면 관계형 테이블을 필드로 사용할 수 있습니다. 다음은 샘플 코드입니다.
필드가 배열이면 ".1"을 사용하여 첫 번째 항목을 가져올 수 있습니다(예: "orders.1.orderDate"). ".property"를 사용하여 모든 개체에서 속성을 가져오고 새 배열을 가져올 수 있습니다(예: "orders.orderDate").
계산된 열
"="로 시작하는 수식을 사용하여 열 값을 계산된 열로 설정할 수 있습니다. 아래 필드 참조 구문 규칙을 사용하면 테이블에서 데이터를 참조할 수 있습니다.
개체 유형
구문 예제
설명
샘플
현재 행 필드
=[@column1]
column1 필드의 현재 행에서 데이터를 가져옵니다.
=[@QtyAvailable] * [@UnitPrice] * 1.5
각 행의 RetailValue을 계산합니다.
전체 필드
=[column1]
column1에서 데이터를 모두 가져옵니다.
=SUM([column1])
column1의 총합을 가져옵니다.
개체 필드의 특성
=[@column1.abc]
column1 필드의 현재 행에서 "abc" 특성 값을 가져옵니다.
=[@name.first] & " " & [@name.last]
이름 문자열을 가져옵니다.
배열 필드의 항목
=[@column1.0]
column1 필드의 현재 행에서 첫 번째 값을 가져옵니다.
=[@awards.0.name]
첫 번째 수상 이름을 가져옵니다.
개체 배열 필드의 특성
=[@column1.abc]
워크시트
=SUM([@orderDetails.weight])
주문 무게를 가져옵니다.
현재 전체 행
=[@]
현재 행 데이터를 개체로 가져옵니다.
필드 이름에 공백 또는 마침표가 있는 경우에는 대괄호를 추가해야 합니다. 예를 들어 "=[@[column 1].[a.bc]]"는 'column 1' 필드의 현재 행에서 "a.bc" 특성 값을 가져옵니다.
전체 행 및 현재 행 이외에 지정된 행을 가져올 수도 있습니다.
샘플
설명
[#1[column1]]
첫 번째 행에서 column1 값을 가져옵니다.
[#1,#last[column1]]
첫 번째 행과 마지막 행에서 column1 값을 가져옵니다.
[#odd[column1]]
홀수 행에서 column1 값을 가져옵니다.
[#1,#even[column1]]
첫 번째 행과 짝수 행에서 column1 값을 가져옵니다.
[@+1[column1]]
다음 행에서 column1 값을 가져옵니다.
[@-1[column1]]
이전 행에서 column1 값을 가져옵니다.
[@+1:#last]
다음 행부터 마지막 행까지 행을 가져옵니다.
[@-1:@+1]
이전 행부터 다음 행까지 행을 가져옵니다.
[@:#last]
현재 행부터 마지막 행까지 행을 가져옵니다.
[#1,@-1:@+1,#last[column1]]
첫 번째 행, 이전 행의 column1 값을 다음 행과 마지막 행으로 가져옵니다.
[#1]
첫 번째 행을 가져옵니다.
샘플 코드는 다음과 같습니다.
"=SUM([#1:@[change]])"는 누적 변경 사항을 표시합니다.
var tables = {};
var selectedTable = "order";
window.onload = function () {
var mainSpread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var dataManager = mainSpread.dataManager();
// addTable
tables.product = dataManager.addTable("productTable", {
data: data.products
});
tables.supplier = dataManager.addTable("supplierTable", {
data: data.suppliers
});
tables.category = dataManager.addTable("categoryTable", {
data: data.categories
});
tables.order = dataManager.addTable("orderTable", {
data: data.orders
});
tables.detail = dataManager.addTable("orderDetailTable", {
data: data.orderDetails
});
tables.shipper = dataManager.addTable("shipperTable", {
data: data.shippers
});
tables.employee = dataManager.addTable("employeeTable", {
data: data.employees
});
tables.customer = dataManager.addTable("customerTable", {
data: data.customers
});
// addRelationship
dataManager.addRelationship(tables.product, "supplierId", "supplier", tables.supplier, "id", "products");
dataManager.addRelationship(tables.product, "categoryId", "category", tables.category, "id", "products");
dataManager.addRelationship(tables.order, "customerId", "customer", tables.customer, "id", "orders");
dataManager.addRelationship(tables.order, "shipVia", "shipper", tables.shipper, "id", "orders");
dataManager.addRelationship(tables.order, "id", "details", tables.detail, "orderId", "order");
dataManager.addRelationship(tables.order, "employeeId", "employee", tables.employee, "id", "orders");
dataManager.addRelationship(tables.product, "id", "soldDetail", tables.detail, "productId", "product");
dataManager.addRelationship(tables.employee, "reportsTo", "manager", tables.employee, "id", "subordinate");
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("sampleDiv2"));
spread.fromJSON(ssjson);
spread.options.scrollbarMaxAlign = true;
var columnsSpread = new GC.Spread.Sheets.Workbook(document.getElementById("sampleDiv3"));
var sheet = columnsSpread.getActiveSheet();
columnsSpread.options.tabStripVisible = false;
columnsSpread.options.showHorizontalScrollbar = false;
columnsSpread.options.scrollbarMaxAlign = true;
sheet.setColumnCount(2);
sheet.setRowCount(12);
sheet.setColumnWidth(1, "*");
sheet.setText(0,0,"Caption",1);
sheet.setText(0,1,"Value",1);
sheet.getRange(-1,1,-1,1).formatter("@");
document.getElementById("sampleDiv2").addEventListener("click", function (e) {
var x = e.offsetX;
var y = e.offsetY;
var target = spread.getActiveSheet().hitTest(x, y);
if (target.shapeHitInfo == null && x > 700) {
y = y - 300;
target = spread.getActiveSheet().hitTest(x, y);
}
if (target.shapeHitInfo) {
var shape = target.shapeHitInfo.shape;
var style = shape.style();
if (style.fill) { // skip the connect line
style.fill.color = '#'+Math.floor(Math.random()*0xA00000 + 0x100000).toString(16); //random color
shape.style(style);
var text = shape.text();
switchTable(text);
}
}
}, false);
document.getElementById("setButton").addEventListener("click", function (e) {
setView();
}, false);
switchTable("order");
};
function switchTable (tableName) {
selectedTable = tableName;
setTimeout(function() {
var json = JSON.stringify(tables[selectedTable].get(0),null , 2); // get is internal API
document.getElementById("datasample").innerHTML = selectedTable + ".0:\n" + json;
}, 0);
var spread = GC.Spread.Sheets.findControl( document.getElementById("sampleDiv3"));
var sheet = spread.getActiveSheet();
sheet.clear(0, 0, sheet.getRowCount(), sheet.getColumnCount(), GC.Spread.Sheets.SheetArea.viewport,GC.Spread.Sheets.StorageType.data);
sheet.setArray(0,0,dataColumns[tableName]);
sheet.autoFitColumn(0);
setView();
}
function setView () {
var spread = GC.Spread.Sheets.findControl( document.getElementById("sampleDiv3"));
var sheet = spread.getActiveSheet();
var rowCount = sheet.getRowCount();
var fields = [];
for (var i = 0; i < rowCount; i++) {
var value = sheet.getValue(i, 1);
if (value) {
fields.push({value: value, caption: sheet.getValue(i, 0), width: 200});
}
}
var view = tables[selectedTable].addView("selectedTable"+(new Date()).valueOf(), fields);
var spread = GC.Spread.Sheets.findControl( document.getElementById("ss"));
spread.clearSheets();
spread.clearSheetTabs();
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
sheet.options.allowAddNew = false;
sheet.actionColumn.options({ visible: false });
sheet.setDefaultRowHeight(40, GC.Spread.Sheets.SheetArea.colHeader);
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
view.fetch().then(function(args) {
sheet.suspendPaint();
sheet.setDataView(view);
sheet.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">
<!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<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-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.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/data/northwind-data.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/temple-shape.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" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="option-row">
<div class="inputContainer">
<p>You can click the table.</p>
<div id="sampleDiv2" style="height: 143px;"></div>
</div>
<div class="inputContainer">
<p>You can edit the columns then press the "Set" button.</p>
<div id="sampleDiv3" style="height: 200px;"></div>
<div class="col-xs-4">
<input id="setButton" class="button" type="button" value="Set"/>
</div>
</div>
<div class="inputContainer">
<p>First data in the data table</p>
<pre id="datasample">
</pre>
</div>
</div>
</div>
</div>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 500px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 500px;
padding: 3px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.sample-options {
z-index: 1000;
}
.inputContainer {
width: 100%;
height: auto;
border: 1px solid #eee;
padding: 6px 12px;
margin-bottom: 10px;
box-sizing: border-box;
}
.input {
font-size: 14px;
border: 0;
outline: none;
background: transparent;
}
.button {
height: 30px;
padding: 6px 6px;
width: 80px;
margin-top: 6px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
