사용자가 서버에서 다음 json("Companies.json")을 가져오고
"fields" 열이 펼쳐지도록 지정하면
위의 중첩된 개체는 일반 개체로 변환됩니다.
ID
createdTime
Opportunities
Address
Employees
Name
Description
Type
Contacts
SumOpp
Field 11
rec0kxKqvmMIFTmnF
2013-04-17T02:38:00.000Z
recZgmDrnvRTxTvpI
8340 Clarington Avenue, Suite 2500, Culver City, CA 90232
4000
Liberty Pictures
할리우드 황금기의 마이너 스튜디오 중 하나였던 Liberty Pictures는 1989년 일본 다국적 미디어 기업인 Cony가 결국 인수했습니다.
영화 스튜디오
rec1cpyvgqTEzXxjK, recYjwxDhkRIzVvqO
50000
4000
/*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 getDataSource() {
return [
{
"id": "rec0kxKqvmMIFTmnF",
"createdTime": "2013-04-17T02:38:00.000Z",
"fields": {
"Opportunities": [
"recZgmDrnvRTxTvpI"
],
"Address": "8340 Clarington Avenue, Suite 2500, Culver City, CA 90232",
"Employees": 4000,
"Name": "Liberty Pictures",
"Description": "One of the minor studios of Hollywood's Golden Age, Liberty Pictures was ultimately acquired by Japanese multinational media conglomerate Cony in 1989.",
"Type": "Film Studio",
"Contacts": [
"rec1cpyvgqTEzXxjK",
"recYjwxDhkRIzVvqO"
],
"SumOpp": 50000,
"Field 11": 4000
}
},
{
"id": "rec2lmCylyUPG1wjL",
"createdTime": "2013-04-17T02:38:06.000Z",
"fields": {
"Opportunities": [
"rec0fzGCrvIRC4ivL"
],
"Address": "5577 Linnington Ave., Suite 420, Los Angeles, CA 90064\n",
"Employees": 350,
"Name": "Wolf Searchlight Pictures",
"Description": "Wolf Searchlight Pictures is a U.S. film distribution company specializing in independent and foreign films. It exists within the larger Wolf Entertainment Group (which also includes the larger film studio 20th Century Wolf), which is a subsidiary of the American multinational mass media conglomerate 21st Century Wolf, which is a subsidiary of the even larger multinational mass media conglomerate News Group.",
"Type": "Film Studio",
"Contacts": [
"recNiyDyulWLzUxrD"
],
"SumOpp": 225000,
"Field 11": 350
}
},
{
"id": "recZ9wHAmoKOy4viO",
"createdTime": "2013-04-17T02:38:13.000Z",
"fields": {
"Opportunities": [
"recZmvwvrnXNA3xwL"
],
"Address": "7000 N. Bronson Avenue, Los Angeles, CA 90004\n",
"Employees": 5000,
"Name": "Tantamount Studios",
"Description": "Tantamount Studios is the fourth largest major film studio in the world, and a subsidiary of the U.S. media conglomerate Avicom. Tantamount was founded in 1912 by the Polish immigrant Mordecai M. Meyers and is one the oldest surviving film studios in the U.S.\nRecent Films:\n\"Homeless Dad\"\n\"Almost Cousins\"\n\"Love, Indubitably\"",
"Type": "Film Studio",
"SumOpp": 65000,
"Field 11": 5000
}
}
];
}
function initSpread(spread) {
spread.suspendPaint();
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
var dataManager = spread.dataManager();
// add table
var myTable = dataManager.addTable("myTable", {
data: getDataSource(),
schema: {
columns: {
fields: { spread: true }
}
}
});
// add view
myTable.fetch().then(function () {
var myView = myTable.addView("myView", undefined, undefined, {
defaultColumnWidth: "*"
});
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
sheet.options.allowAddNew = false; //hide new row
sheet.setDataView(myView);
});
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">
<!-- 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;
}