默认情况下，集算表将只是与本地数据管理器进行交互。如果你想将改变的数据与你的远程数据库同步，只要先启用 "AutoSync"（自动同步）或 "Batch"（批处理）模式。
本演示使用 "批处理"模式*。
自动同步模式
这种模式主要适用于低频的数据操作场景。一旦你使用行操作中的按钮或API与行进行交互，相应变化的请求将被启动并立即发送到服务器。
要在表的初始化中启用 "自动同步 "模式。
批量模式
这种模式主要适用于数据经常被操作的场景。它将按顺序存储每一行的操作，然后将所有的修改打包成一个集合，一次性发送到服务器，以节省网络资源。
要启用 "批处理 "模式，并在表的初始化中指定一个 "BatchApiUrl"。
然后你可以提交或丢弃所有的修改。
获取变化
你也可以在将修改保存到服务器之前获得修改。
请求和回应
操作
请求类型
请求数据
返回数据
update
POST
更新的数据
更新的数据
read
GET
无数据
数据项数组
delete
DELETE
删除的数据项或数组
没有限制
create
POST
插入的数据项
插入的数据项
batch
POST
一个对象数组，其中每个对象都包含一个 "类型 "属性。
这个操作类型可以是 "更新"、"插入 "或 "删除"。
"dataItem"属性是当前记录。
'sourceIndex'属性是记录的索引。'
可选的'oldDataItem'属性是原始记录。
例如:
[ {"type":"delete","dataItem":{...}, "sourceIndex":5},
{"type":"insert","dataItem":{...}, "sourceIndex":3},
{"type":"update","dataItem":{...}, "oldDataItem":{...}, "oldDataItem":{...}, "sourceIndex":1}]
一个对象数组，每个对象包含一个'success'属性，表示操作的成功或失败，还有一个可选的'data'属性，是当前的记录，只用于'插入'操作。
比如说
[{"succeed":true}, {"succeed":false}, {"succeed": true}]
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
var tableName = "DefineEmployee";
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\/SpreadJSTutorial\//)[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 name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/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$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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>Active Row Operations</legend>
<div class="field-line">
<input id="remove" type="button" value="Remove">
</div>
<div class="field-line">
<input id="save" type="button" value="Save">
</div>
<div class="field-line">
<input id="reset" type="button" value="Reset">
</div>
</fieldset>
<fieldset>
<legend>Save All Rows</legend>
<div class="field-line">
<input id="save-all" type="button" value="Save All">
</div>
</fieldset>
<fieldset>
<legend>Batch Operations</legend>
<div class="field-line">
<input type="button" value="Submit" id="submit">
</div>
<div class="field-line">
<input type="button" value="Discard" id="discard">
</div>
</fieldset>
<fieldset>
<legend>Get Changes</legend>
<div class="field-line">
<input type="button" value="Get Changes" id="getChanges">
</div>
<div class="field-line">
<textarea id="changesPanel"></textarea>
</div>
</fieldset>
</div>
</div>
</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;
}
