Remove
You can click the Remove button (which uses tablesheet.removeRow(rowIndex)
) to remove a row.
Save
You can edit a cell by double-clicking a cell or inputting data directly from your keyboard, and then clicking the Save button (which uses tableSheet.saveRow(rowIndex)
) to save a row.
Reset
You can click the Reset button (which uses tableSheet.resetRow(rowIndex)
) to reset a row. This will restore the row data.
Add
You can edit the template row data by clicking the Edit Fields button, and then clicking the Add button (which uses tableSheet.addRow(rowData)
to add a row.
The added rowData must have the same structure as the data in the data source, such as { "first_name": "Michael", "last_name": "Lu", country: "China" }.
Save All
If you have large changes that need to be saved, you can click the Save All button or use Ctrl+Shift+S to save all of the changes at one time.
Response Error
When there is a server connection error (i.e. HTTP 404, HTTP 500) or a server database error (i.e. duplicated primary key, update failed), TableSheet will show a red alarm icon in the row header and show error tips when you hover over them.
<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>Use these buttons to perform row operations.</label>
</div>
<hr />
<fieldset>
<legend>Active Row Operations</legend>
<div class="field-line">
<input id="remove" type="button" value="Remove" @click="removeRow()">
</div>
<div class="field-line">
<input id="save" type="button" value="Save" @click="saveRow()">
</div>
<div class="field-line">
<input id="reset" type="button" value="Reset" @click="resetRow()">
</div>
</fieldset>
<fieldset>
<legend>Save All Rows</legend>
<div class="field-line">
<input id="save-all" type="button" value="Save All" @click="saveAllRows()">
</div>
</fieldset>
<fieldset>
<legend>Add New Row</legend>
<div class="field-line">
<input type="button" :value="isEditRef ? 'Hide Fields' : 'Edit Fields'" 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="Add" 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-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 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$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/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$/en/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-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);
