デフォルトでは、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}]
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
</gc-spread-sheets>
<div id="options-container" class="options-container">
<fieldset>
<legend>アクティブな行の操作</legend>
<div class="field-line">
<input id="remove" type="button" value="削除" @click="removeRow()">
</div>
<div class="field-line">
<input id="save" type="button" value="保存" @click="saveRow()">
</div>
<div class="field-line">
<input id="reset" type="button" value="リセット" @click="resetRow()">
</div>
</fieldset>
<fieldset>
<legend>すべての行の保存</legend>
<div class="field-line">
<input id="save-all" type="button" value="すべての保存" @click="saveAllRows()">
</div>
</fieldset>
<fieldset>
<legend>一括操作</legend>
<div class="field-line">
<input type="button" value="実行する" id="submit" @click="submitChanges()">
</div>
<div class="field-line">
<input type="button" value="破棄する" id="discard" @click="discardChanges()">
</div>
</fieldset>
<fieldset>
<legend>変更の取得</legend>
<div class="field-line">
<input type="button" value="変更を取得する" id="getChanges" @click="getChanges()">
</div>
<div class="field-line">
<textarea id="changesPanel" v-model="changesPanel"></textarea>
</div>
</fieldset>
</div>
</div>
</template>
<script setup>
import GC from "@mescius/spread-sheets";
import { ref } from "vue";
import "@mescius/spread-sheets-tablesheet";
import '@mescius/spread-sheets-resources-ja';
GC.Spread.Common.CultureManager.culture("ja-jp");
import "@mescius/spread-sheets-vue";
var tableName = "Employee";
var baseApiUrl = getBaseApiUrl();
var apiUrl = baseApiUrl + "/" + tableName;
// var apiColumnUrl = baseApiUrl + "/tables/" + tableName + "/columns";
var batchApiUrl = baseApiUrl + "/" + tableName + 'Collection';
var tablesheetName = 'MyTableSheet';
const spreadRef = ref(null);
const tablesheet = ref(null);
const changesPanel = ref('');
const selections = ref([{ row: 0, rowCount: 1, col: 0, colCount: 1 }]);
function initSpread(spread) {
spreadRef.value = 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", {
remote: {
read: {
url: apiUrl
},
update: {
url: apiUrl,
method: 'PUT'
},
create: {
url: apiUrl
},
delete: {
url: apiUrl
},
// getColumns: {
// url: apiColumnUrl
// },
// addColumn: {
// url: apiColumnUrl,
// method: 'POST'
// },
// updateColumn: {
// url: apiColumnUrl,
// method: 'PUT'
// },
// removeColumn: {
// url: apiColumnUrl,
// method: 'DELETE'
// },
batch: {
url: batchApiUrl
}
},
batch: true,
schema: {
columns: {
"Id": {
dataType: "number"
},
"LastName": {
dataType: "string"
},
"FirstName": {
dataType: "string"
},
"HomePhone": {
dataType: "string"
},
"Notes": {
dataType: "string"
}
}
}
});
//init a table sheet
var sheet = spread.addSheetTab(0, tablesheetName, GC.Spread.Sheets.SheetType.tableSheet);
// sheet.options.enableDefineColumn = true;
tablesheet.value = sheet;
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 () {
var 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"
}
]); //the View has all default columns of the Table
sheet.setDataView(view);
});
spread.bind(GC.Spread.Sheets.Events.SelectionChanged, (e, args) => {
selections.value = args.newSelections;
});
spread.resumePaint();
}
function removeRow() {
traverseSelectionsRowsWithOperation((row) => {
tablesheet.value.removeRow(row);
});
}
function saveRow() {
traverseSelectionsRowsWithOperation((row) => {
tablesheet.value.saveRow(row);
});
}
function resetRow() {
traverseSelectionsRowsWithOperation((row) => {
tablesheet.value.resetRow(row);
});
}
function saveAllRows() {
spreadRef.value.commandManager().SaveAll.execute(spreadRef.value, {
sheetName: tablesheetName
});
}
function submitChanges() {
tablesheet.value.submitChanges();
}
function discardChanges() {
tablesheet.value.cancelChanges();
}
function getChanges() {
var changes = formatChanges(tablesheet.value.getChanges());
changesPanel.value = changes
}
function traverseSelectionsRowsWithOperation(operation) {
var selectionList = selections.value;
if (selectionList) {
for (var i = 0; i < selectionList.length; i++) {
var selection = selectionList[i];
var row = selection.row;
var rowCount = selection.rowCount;
for (var r = row + rowCount - 1; r >= row; r--) {
operation(r);
}
}
}
}
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;
}
function getBaseApiUrl() {
return window.location.href.match(/http.+spreadjs\/demos\//)[0] + 'server/api';
}
</script>
<style scoped>
#app {
height: 100%;
}
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;
}
</style>
<!DOCTYPE html>
<html lang="en" style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/ja/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ja/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/ja/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-ja': 'npm:@mescius/spread-sheets-resources-ja/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'@mescius/spread-sheets-tablesheet': 'npm:@mescius/spread-sheets-tablesheet/index.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
