データソーススキーマで、オブジェクト型のフィールド列に {spread: true} を設定すると、オブジェクトのデータを最上位のフィールドに変換して、テーブルシートに直接展開することができます。
設定手順：
サーバーから次のjson("Companies.json")データを取得します。
オブジェクト型のfields列で、spreadプロパティをtrueに設定します。
オブジェクト列のデータがテーブルシートに展開されます。
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
One of the minor studios of Hollywood's Golden Age, Liberty Pictures was ultimately acquired by Japanese multinational media conglomerate Cony in 1989.
Film Studio
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 charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="spreadjs culture" content="ja-jp" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/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$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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;
}
