削除
削除ボタン（tablesheet.removeRow(rowIndex)を使用）をクリックして、行を削除できます。
保存
セルをダブルクリックするか、キーボードからデータを直接入力し、それから保存ボタン（tableSheet.saveRow(rowIndex)を使用）をクリックして、セルを編集できます。
リセット
リセットボタン（tableSheet.resetRow(rowIndex)を使用）をクリックして、行をリセットします。これは、変更前の行のデータを復元します。
追加
テンプレートの行データを編集するには、フィールドの編集ボタンをクリックしてから、追加ボタン（tableSheet.addRow(rowData)を使用）をクリックします。
追加されたrowDataは、{ "first_name": "Michael", "last_name": "Lu", country: "China" } のように、データソースのデータと同じ構造である必要があります。
すべて保存
多くの変更を保存する必要があるときは、すべて保存ボタンをクリックするか、Ctrl+Shift+Sで一度にすべての変更を保存できます。
エラーの応答
サーバー接続エラー（HTTP 404、HTTP 500 など）や、データベースエラー（主キーの重複、更新の失敗など）がある場合、テーブルシートは行ヘッダーに赤いアラームアイコンを表示し、それらにカーソルを合わせるとエラーのヒントを表示します。
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
var tablesheetName = 'MyTableSheet';
var spread, sheet, view, data, selections;
window.onload = function() {
spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
initSpread(spread);
bindEvents();
};
function initSpread(spread) {
spread.suspendPaint();
spread.clearSheets();
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
//init a data manager
var dataManager = spread.dataManager();
var myTable = dataManager.addTable("myTable", {
data: employees
});
//init a table sheet
sheet = spread.addSheetTab(0, tablesheetName, GC.Spread.Sheets.SheetType.tableSheet);
sheet.options.allowAddNew = false;
//bind a view to the table sheet
myTable.fetch().then(function() {
view = myTable.addView("myView", [
//{ value: "Id", width: 50 },
{ value: "FirstName", width: 100 },
{ value: "LastName", width: 100 },
{ value: "Title", width: 150 },
{ value: "HomePhone", width: 120 },
{ value: "Address", width: 160 },
{ value: "City", width: 100 },
{ value: "State", width: 100 },
{ value: "PostalCode", width: 100 },
{ value: "Region", width: 100 }
]);
sheet.setDataView(view);
data = {
"FirstName": "",
"LastName": "",
"Title": "",
"HomePhone": "",
"Address": "",
"City": "",
"State": "",
"PostalCode": "",
"Region": ""
};
generateFieldsElement(data);
});
spread.bind(GC.Spread.Sheets.Events.SelectionChanged, function(e, args) {
selections = args.newSelections;
});
spread.resumePaint();
}
function generateFieldsElement(sampleData) {
var fieldsContainer = document.getElementById('fields');
var fragment = '';
for (var field in sampleData) {
var isContinue = field === 'Id';
if (isContinue) {
continue;
}
var isRequired = field === 'FirstName' || field === 'LastName';
fragment +=
'<div class="field-line">' +
' <label class="field-inline" for="field_' + field + '">' + field + '<span class="required">' + (isRequired ? "(*)" : "") + '</span></label>' +
' <input class="field-inline" id="field_' + field + '" type="text" value="' + sampleData[field] + '">' +
'</div>';
}
fieldsContainer.innerHTML = fragment;
}
function bindEvents() {
var fieldsContainer = document.getElementById('fields');
var toggleButton = document.getElementById('toggle');
toggleButton.addEventListener('click', function() {
if (fieldsContainer.classList.contains('show')) {
toggleButton.value = 'フィールドの編集';
fieldsContainer.classList.remove('show');
} else {
toggleButton.value = 'フィールドを隠す';
fieldsContainer.classList.add('show');
}
});
var removeButton = document.getElementById('remove');
removeButton.addEventListener('click', function() {
traverseSelectionsRowsWithOperation(function(row) {
sheet.removeRow(row);
});
});
var saveButton = document.getElementById('save');
saveButton.addEventListener('click', function() {
traverseSelectionsRowsWithOperation(function(row) {
sheet.saveRow(row);
});
});
var resetButton = document.getElementById('reset');
resetButton.addEventListener('click', function() {
traverseSelectionsRowsWithOperation(function(row) {
sheet.resetRow(row);
});
});
var saveAllButton = document.getElementById('save-all');
saveAllButton.addEventListener('click', function() {
spread.commandManager().SaveAll.execute(spread, { sheetName: tablesheetName });
});
var addButton = document.getElementById('add');
addButton.addEventListener('click', function() {
var data = getNewData();
sheet.addRow(data);
});
}
function traverseSelectionsRowsWithOperation(operation) {
if (selections) {
selections.sort(function(a, b) { return b.row - a.row; });
for (var i = 0; i < selections.length; i++) {
var selection = selections[i];
var row = selection.row;
var rowCount = selection.rowCount;
for (var r = row + rowCount - 1; r >= row; r--) {
operation(r);
}
}
}
}
function getNewData() {
var newData = {};
for (var key in data) {
var newValue = key === 'Id' ? null : getProperty('field_' + key, 'value');
newData[key] = newValue;
}
return newData;
}
function getProperty(domId, prop) {
return document.getElementById(domId)[prop];
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="ja-jp" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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="$DEMOROOT$/spread/source/data/employees.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="options-container" class="options-container">
<div class="option-row"><label>これらのボタンを使って、行の操作を行います。</label>
</div>
<hr />
<fieldset>
<legend>アクティブな行の操作</legend>
<div class="field-line">
<input id="remove" type="button" value="削除">
</div>
<div class="field-line">
<input id="save" type="button" value="保存">
</div>
<div class="field-line">
<input id="reset" type="button" value="リセット">
</div>
</fieldset>
<fieldset>
<legend>すべての行の保存</legend>
<div class="field-line">
<input id="save-all" type="button" value="すべて保存">
</div>
</fieldset>
<fieldset>
<legend>新しい行の追加</legend>
<div class="field-line">
<input type="button" value="フィールドの編集" id="toggle">
</div>
<div class="field-line" id="fields"></div>
<div class="field-line">
<input type="button" value="追加" id="add">
</div>
</fieldset>
</div>
</div>
</body>
</html>
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
fieldset {
padding: 6px;
margin: 0;
margin-top: 10px;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
fieldset span,
fieldset input,
fieldset select {
display: inline-block;
text-align: left;
}
fieldset input[type=text] {
width: calc(100% - 58px);
}
fieldset input[type=button] {
width: 100%;
text-align: center;
}
fieldset select {
width: calc(100% - 50px);
}
.field-line {
margin-top: 4px;
}
.field-inline {
display: inline-block;
vertical-align: middle;
}
fieldset label.field-inline {
width: 100px;
}
fieldset input.field-inline {
width: calc(100% - 100px - 12px);
}
.required {
color: red;
font-weight: bold;
}
#fields {
display: none;
}
#fields.show {
display: block;
}
