撤销重做
你可以使用 TableSheet 的撤销和重做功能来逆转和重新应用对数据所做的更改。
本页介绍了支持的操作范围、撤销和重做行为的具体区域以及与数据同步有关的重要注意事项。
支持的撤销和重做操作
TableSheet 的撤销和重做功能支持多种即时操作，包括：
配置更改：筛选、排序等配置设置
运行时 UI 操作：类似于工作表操作，如编辑单元格、添加/删除行或列、粘贴数据、拖动/移动行或列等
TableSheet API：包括除
setDataView方法外的大多数更改数据或设置的 API 操作。支持的 API 包括Options、setDefaultRowHeight、rowActionOptions、togglePinnedRows、togglePinnedColumns、groupBy等。API 以与工作表命令相同的方式启用撤销功能。您只需根据需要自定义命令SpreadJS 设计器支持：撤销和重做功能支持 SpreadJS 设计器中的大多数 TableSheet 操作，如下图所示：
TableSheet 设计功能区：对主要的 TableSheet 功能区选项卡操作执行撤销/重做，如调整行高、堆叠行高、管理状态规则、格式化主题颜色等
TableSheet 列功能区：执行与列配置相关的撤销/重做操作
TableSheet 设计模式：在配置 TableSheet 布局时使用撤销/重做功能
撤销/重做列表：查看和管理您的撤销和重做操作列表。点击列表中的操作项以恢复到选定的操作阶段
不同操作的撤销行为
下表显示了在不同同步模式下，不同操作的具体撤销行为：
操作 | 静态 | autoSync | 批量 |
|---|---|---|---|
添加 | 撤销将删除记录。 | 已保存到服务器：将删除服务器和本地的记录。未保存到服务器：将删除本地记录。 | 撤销将删除记录。本地记录将被删除。 |
更新 | 撤销将还原数据。 | 已保存到服务器：撤销将使其变为脏数据。未保存到服务器：撤销将使状态恢复正常。 | 撤销将还原数据。 |
删除 | 撤销将重新添加记录。 | 状态被添加。 | 撤销将重新添加记录。已保存到服务器：状态被添加。未保存到服务器：状态恢复正常。 |
type=warning
注意事项
数据源标签配置不支持撤销和重做功能。
某些操作会清除撤销堆栈，重置您撤销之前更改的能力。这些操作因运行时环境和设计器模式而异。
运行时：
setDataViewAPI 将清除撤销堆栈。从服务器重新获取数据将清除撤销堆栈。
tableSheet.reset()将清除撤销堆栈。设计器：
重置设计器中的表将清除撤销堆栈。
如果表从空状态设置，撤销堆栈不会清除。
重新获取数据将清除撤销堆栈。
数据源更改的特殊考虑
每个撤销操作仅修改本地数据，除了在 autoSync 模式下对应于添加行的撤销操作。在此模式下，删除行会直接与服务器同步，撤销此操作会将该行重新添加到列表末尾。
另一种常见方法是使用标志指示删除，允许更灵活的处理。如果希望利用撤销恢复已删除的列，服务器必须支持使用删除标志表示删除。否则，撤销删除行将在前端将其恢复到原始位置。但刷新页面或数据会将该条目移到列表末尾。
以下代码示例展示了添加删除标志的简单例子。运行代码并进行任何更改，然后按 Ctrl + Z 查看撤销操作行为。
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
initSpreadJS(spread);
};
const jsonData = [
{
"Id": 1,
"CompanyName": "Exotic Liquids",
"ContactName": "Grace Campbell",
"ContactTitle": "Purchasing Manager",
"Address": "248 Jac And Mac St",
"City": "Raven",
"Region": "Southeast",
"PostalCode": "24639",
"State": "Virginia",
"Phone": "(276) 964-4382",
"Fax": null,
"HomePage": null
},
{
"Id": 2,
"CompanyName": "New Orleans Delights",
"ContactName": "Bert Garrett",
"ContactTitle": "Order Administrator",
"Address": "5291 Collins Rd",
"City": "Middleburg",
"Region": "Southeast",
"PostalCode": "32068",
"State": "Florida",
"Phone": "(904) 264-9720",
"Fax": null,
"HomePage": null
},
{
"Id": 3,
"CompanyName": "Grandma Kellys Homestead",
"ContactName": "Doris Schultz",
"ContactTitle": "Sales Representative",
"Address": "488 W Loyola Ave",
"City": "Clovis",
"Region": "West",
"PostalCode": "93619",
"State": "California",
"Phone": "(559) 451-0210",
"Fax": null,
"HomePage": null
},
{
"Id": 4,
"CompanyName": "Tokyo Traders",
"ContactName": "Judy Gill",
"ContactTitle": "Marketing Manager",
"Address": "664 N Holden St",
"City": "Port Washington",
"Region": "Midwest",
"PostalCode": "53074",
"State": "Wisconsin",
"Phone": "(262) 284-5862",
"Fax": null,
"HomePage": null
}
]
function initSpreadJS(spread) {
spread.suspendPaint();
spread.clearSheets();
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
// Initialize a data manager
var dataManager = spread.dataManager();
var myTable = dataManager.addTable("myTable", {
autoSync: true, // Enable the autoSync mode
// This is only for demo. In a real environment, these logics need to be implemented on the server.
remote: {
read: async function () {
return jsonData.filter(item => item._isDelete !== true);
},
delete: async function (item) {
const sourceIndex = deleteItem(item[0]);
return jsonData[sourceIndex]
},
create: async function (changes) {
return createItem(changes);
}
}
});
function deleteItem(dataItem) {
const sourceIndex = jsonData.findIndex(item => item.Id === dataItem.Id);
jsonData[sourceIndex]._isDelete = true;
return sourceIndex;
}
function createItem(dataItem) {
const index = jsonData.findIndex(item => item.Id === dataItem.Id);
if (index > -1 && jsonData[index]) {
jsonData[index]._isDelete = false;
return jsonData[index];
} else {
jsonData.push({ ...dataItem, Id: createID() });
return jsonData[jsonData.length - 1];
}
}
function createID() {
return `${Math.random() * 1000}`;
}
// Initialize a tablesheet
const sheet = spread.addSheetTab(0, 'tablesheet', 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 tablesheet
myTable.fetch().then(function () {
const view = myTable.addView("myView", [
{ value: "Id", width: 50, caption: "Id" },
{ value: "CompanyName", width: 100, caption: "CompanyName" },
{ value: "ContactTitle", width: 100, caption: "ContactTitle" },
{ value: "Phone", width: 100, caption: "Phone" },
{ value: "State", width: 100, caption: "State" }
]);
sheet.setDataView(view);
});
spread.resumePaint();
}