デフォルトでは、TableSheet はローカル データ マネージャーと対話するだけです。変更されたデータをリモート データベースと同期する場合は、最初にAutoSyncまたはBatchモードを有効にします。
このデモはBatchモードを使用します。
AutoSyncモード
このモードは主に、使用頻度の低いデータ操作のシナリオに適しています。行アクションのボタンやAPIを使って行を操作すると、対応する変更を伴うリクエストが開始され、直ちにサーバーに送信されます。
テーブルの初期化でAutoSyncモードを有効にするには：
Batchモード
このモードは主に、データを頻繁に操作するシナリオに適しています。これは、各行の操作を順番に保存し、すべての変更をコレクションにパッケージして、ネットワークリソースを節約するために一度にサーバに送信します。
テーブルの初期化でBatchモードを有効にして、BatchApiUrlを指定するには：
その後、すべての変更内容を送信または破棄できます：
変更の取得
サーバーに保存する前に変更を取得することもできます。
要求と応答
操作
要求の種類
要求データ
応答データ
更新
POST
更新されたデータ
更新されたデータ
読み込み
GET
データなし
レコード配列
削除
DELETE
削除されたデータまたはデータ配列
制限なし
作成
POST
挿入されたデータ
挿入されたデータ
一括更新
POST
各オブジェクトに'type'プロパティが含まれるオブジェクトの配列。
この操作タイプは'update'、'insert'または'delete'のいずれかです。
'dataItem'プロパティは、現在のレコードを表します。
'sourceIndex'プロパティは、レコードのインデックスです。
オプションの'oldDataItem'プロパティは、元のレコードです。
例えば：
[ {"type":"delete","dataItem":{...}, "sourceIndex":5},
{"type":"insert","dataItem":{...}, "sourceIndex":3},
{"type":"update","dataItem":{...}, "oldDataItem":{...}, "oldDataItem":{...}, "sourceIndex":1}]
各オブジェクトに、操作の成功または失敗を表す'succeed'プロパティと、現在のレコードで'insert'操作にのみ使用する、オプションの'data'プロパティを含むオブジェクトの配列。
例えば：
[{"succeed":true}, {"succeed":false}, {"succeed": true}]
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
var tableName = "Employee";
var baseApiUrl = getBaseApiUrl();
var apiUrl = baseApiUrl + "/" + tableName;
var batchApiUrl = baseApiUrl + "/" + tableName + 'Collection';
var tablesheetName = 'MyTableSheet';
var spread, sheet, view, selections, table;
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();
myTable = dataManager.addTable("myTable", {
remote: {
read: {
url: apiUrl
},
update: {
url: apiUrl,
method: 'PUT'
},
create: {
url: apiUrl
},
delete: {
url: apiUrl
},
batch: {
url: batchApiUrl
}
},
batch: true,
schema: {
columns: {
"Id": { dataType: "number" },
"LastName": { dataType: "string" },
"FirstName": { dataType: "string" },
"HomePhone": { dataType: "string" },
"Notes": { dataType: "string" }
}
}
});
table = myTable;
//init a table sheet
sheet = spread.addSheetTab(0, tablesheetName, GC.Spread.Sheets.SheetType.tableSheet);
var rowActions = GC.Spread.Sheets.TableSheet.BuiltInRowActions;
var options = sheet.rowActionOptions();
options.push(
rowActions.removeRow,
rowActions.saveRow,
rowActions.resetRow,
);
sheet.rowActionOptions(options);
//bind a view to the table sheet
myTable.fetch().then(function () {
view = myTable.addView("myView", [
{ value: "Id", width: 50, caption: "ID" },
{ value: "FirstName", width: 100, caption: "First Name" },
{ value: "LastName", width: 100, caption: "Last Name" },
{ value: "HomePhone", width: 120, caption: "Home Phone" },
{ value: "Title", width: 150, caption: "Title" }
]);
sheet.setDataView(view);
});
selections = [{row: 0, rowCount: 1, col: 0, colCount: 1}];
spread.bind(GC.Spread.Sheets.Events.SelectionChanged, function (e, args) {
selections = args.newSelections;
});
spread.resumePaint();
}
function bindEvents() {
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 submitButton = document.getElementById('submit');
submitButton.addEventListener('click', function () {
sheet.submitChanges();
});
var discardButton = document.getElementById('discard');
discardButton.addEventListener('click', function () {
sheet.cancelChanges();
});
var getChangesButton = document.getElementById("getChanges");
getChangesButton.addEventListener('click', function () {
var changesPanel = document.getElementById("changesPanel");
var changes = formatChanges(sheet.getChanges());
changesPanel.innerHTML = changes;
});
}
function traverseSelectionsRowsWithOperation(operation) {
if (selections) {
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 getBaseApiUrl() {
return window.location.href.match(/http.+spreadjs\/demos\//)[0] + 'server/api';
}
function formatChanges(changes) {
var json = JSON.stringify(changes, function (k, v) {
if (k === "dataItem" || k === "oldDataItem") {
return {
Id: v.Id,
FirstName: v.FirstName,
LastName: v.LastName,
HomePhone: v.HomePhone,
Title: v.Title
};
}
return v;
}, 2);
return json;
}
<!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="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">
<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="submit">
</div>
<div class="field-line">
<input type="button" value="破棄する" id="discard">
</div>
</fieldset>
<fieldset>
<legend>変更の取得</legend>
<div class="field-line">
<input type="button" value="変更を取得する" id="getChanges">
</div>
<div class="field-line">
<textarea id="changesPanel"></textarea>
</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;
}
#changesPanel {
width: 100%;
height: 300px;
}
