스키마에는 다음 속성이 포함됩니다.
속성
유형
설명
type
string
'json', 'csv', 'xml' 또는 'columnJson'.
countPath
string
데이터 판독기는 이것을 사용하여 데이터 소스 컬렉션 길이를 가져옵니다.
dataPath
string
데이터 판독기는 이것을 사용하여 구문 분석 후 데이터 소스 컬렉션을 가져옵니다.
columns
GC.Data.IColumnCollection
데이터 소스 표의 열 정의. 키는 열 이름이며, 값은 열 정보로서 dataType, dataPattern, dataMap, dataName을 포함합니다.
dataType은 "string", "number", "boolean", "object", "array" 또는 "date"일 수 있습니다. 원래 값의 실제 데이터 유형이며, 날짜는 JSON 데이터의 문자열이고 변환이 필요하므로 날짜에 유용합니다.
dataPattern은 날짜 문자열의 경우 "dd/MM/yyyy", 부울 문자열의 경우 "Yes|No", 숫자 문자열의 경우 소수 구분 기호 "," 등과 같이 문자열을 값으로 구문 분석하기 위한 문자열입니다.
dataMap은 원래 값을 더 의미 있는 방법으로 표시하기 위한 간단한 맵입니다. 키는 숫자 또는 문자열일 수 있고, 값은 숫자, 문자열 또는 날짜일 수 있습니다.
dataName은 데이터 소스에서 나오는 원래 데이터 필드의 이름을 나타내며 이 속성을 사용하면 원래 필드 이름을 데이터 관리자의 새 필드 이름으로 매핑할 수 있습니다.
이것은 type, dataPath 및 countPath의 샘플 코드입니다.
이것은 dataType 및 dataMap의 샘플 코드입니다.
이것은 dataPattern의 샘플 코드입니다.
이것은 dataName의 샘플 코드입니다. 속성 열의 키는 데이터 관리자에서 필드 이름을 나타내며 dataName은 원래 데이터 소스 필드 이름을 나타냅니다.
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
//init a data manager
var tableName = "Order";
var baseApiUrl = getBaseApiUrl();
var apiUrl = baseApiUrl + "/" + tableName;
var dataManager = spread.dataManager();
var myTable = dataManager.addTable("myTable", {
remote: {
read: {
url: apiUrl
}
},
schema: {
columns: {
OrderId: {dataName: "Id"},
OrderDate: {dataType: "date"},
RequiredDate: {dataType: "date"},
ShippedDate: {dataType: "date"},
ShipVia: {dataMap: {1: "Speedy Express", 2: "United Package", 3: "Federal Shipping"}}
}
}
});
//init a table sheet
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
sheet.options.allowAddNew = false; //hide new row
//bind a view to the table sheet
myTable.fetch().then(function() {
var style = { formatter: 'MM/dd/yyyy' };
var style2 = {
formatter: 'Ship To: {{=CONCAT(@."ShipAddress", ", ", @."ShipCity")}}'
};
var view = myTable.addView("myView", [
{ value: "OrderId", width: 60 },
{ value: "CustomerId",caption:"Customer", width: 100 },
{ value: "ShipName", width: 200 },
{ value: "OrderDate", width: 120, style: style },
{ value: "ShippedDate", width: 120, style: style },
{ value: "ShipVia", width: 120 },
{ value: "=[@]",caption:"Ship Address",style:style2, width: 350 },
]);
sheet.setDataView(view);
});
spread.resumePaint();
}
function getBaseApiUrl() {
return window.location.href.match(/http.+spreadjs\/learn-spreadjs\//)[0] + 'server/api';
}
<!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-tablesheet/dist/gc.spread.sheets.tablesheet.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" class="sample-spreadsheets"></div>
<div id="optionContainer" class="optionContainer">
</div>
</div>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}