削除
削除ボタン（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 など）や、データベースエラー（主キーの重複、更新の失敗など）がある場合、テーブルシートは行ヘッダーに赤いアラームアイコンを表示し、それらにカーソルを合わせるとエラーのヒントを表示します。
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
</gc-spread-sheets>
<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="削除" @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="isEditRef ? 'フィールドを隠す' : 'フィールドの編集'" id="toggle" @click="editRow()">
</div>
<div class="field-line" id="fields" :style="{ 'display': isEditRef ? 'block' : 'none' }">
<div class="field-line" v-for="(value, field) in fieldsRef" :key="field">
<label class="field-inline" :for="'field_' + field">{{ field }}<span class="required">{{ field ===
"FirstName"
|| field === "LastName" ? "(*)" : "" }}</span></label>
<input class="field-inline" :id="'field_' + field" type="text" v-model="fieldsRef[field]">
</div>
</div>
<div class="field-line">
<input type="button" value="追加" id="add" @click="addRow()">
</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";
const spreadRef = ref(null);
const tablesheetRef = ref(null);
const fieldsRef = ref({});
const selectionsRef = ref(null);
const isEditRef = ref(false);
var tablesheetName = 'MyTableSheet';
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", {
data: employees
});
//init a table sheet
var tablesheet = spread.addSheetTab(0, tablesheetName, GC.Spread.Sheets.SheetType.tableSheet);
tablesheet.options.allowAddNew = false;
tablesheetRef.value = tablesheet;
//bind a view to the table sheet
myTable.fetch().then((data) => {
var 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 }
]);
tablesheet.setDataView(view);
generateFields(clone({
"FirstName": "",
"LastName": "",
"Title": "",
"HomePhone": "",
"Address": "",
"City": "",
"State": "",
"PostalCode": "",
"Region": ""
}));
});
spread.bind(GC.Spread.Sheets.Events.SelectionChanged, (e, args) => {
selectionsRef.value = args.newSelections;
});
spread.resumePaint();
}
function removeRow() {
traverseSelectionsRowsWithOperation((row) => {
tablesheetRef.value.removeRow(row);
});
}
function saveRow() {
traverseSelectionsRowsWithOperation((row) => {
tablesheetRef.value.saveRow(row);
});
}
function resetRow() {
traverseSelectionsRowsWithOperation((row) => {
tablesheetRef.value.resetRow(row);
});
}
function saveAllRows() {
spreadRef.value.commandManager().SaveAll.execute(spreadRef.value, { sheetName: tablesheetName });
}
function editRow() {
isEditRef.value = !isEditRef.value;
}
function addRow() {
tablesheetRef.value.addRow(fieldsRef.value);
}
function generateFields(data) {
fieldsRef.value = data;
}
function traverseSelectionsRowsWithOperation(operation) {
var selections = selectionsRef.value;
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 clone(source) {
var result = {};
for (var key in source) {
result[key] = source[key];
}
return result;
}
</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;
}
</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="$DEMOROOT$/spread/source/data/employees.js" type="text/javascript"></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);
