存储对表单的变更

下面的部分描述了在表格中存储变更以及通过刷新表格删除所有变更的步骤。

步骤 1: 修改表格并保护它

• 修改在数据绑定部分中创建的 refresh 函数。调用 loadTable 函数后，执行 suspendDirty 和 resumeDirty 方法，这样就不会存储对列F所做的变更。
• 为表格的单元格F1设置值、背景颜色和水平方向。
• 设置 isProtected 选项为true以保护表格。
• 将 locked 方法设为false，防止表格中的单元格被锁定.

function refresh() {
    var ss = GC.Spread.Sheets.findControl(document.getElementById("ss"));
    // 1. 获取活动表单
    var sheet = ss.getActiveSheet();
    // Reset the sheet and set the column count
    sheet.reset();
    sheet.setColumnCount(7);
    // 使用样本数据加载spread实例的表
    var data = createSampleData();
    loadTable(ss, data);
    
    // 暂停脏单元格
    sheet.suspendDirty();
    // 设置F1单元格的值、背景颜色和halign
    sheet
        .getCell(0, 5)
        .backColor("yellow")
        .value("Changes")
        .hAlign(GC.Spread.Sheets.HorizontalAlign.center);
    // 恢复脏单元格
    sheet.resumeDirty();
    
    // 保护表单并锁定F列
    sheet.options.isProtected = true;
    // 4.1) 将表单默认样式设置为不锁定单元格
    var s = sheet.getDefaultStyle();
    s.locked = false;
    sheet.setDefaultStyle(s);
    // 4.1) 指定锁定列F以显示新值和旧值(列索引5)
    sheet.getRange(-1, 5, -1, 1).locked(true);

• 创建一个HTML输入按钮'Refresh'，它将执行刷新功能。

<!--Create a refresh button-->
<input type="button" value="Refresh" onclick="refresh()" />

步骤 2: 获取脏单元格信息

• 创建 showChanges 函数，使用 getDirtyCells 和 hasPendingChanges 方法来获取脏单元格的信息。
• 创建一个数据数组， dirtyDataArray 来存储关于row、col、rowCount和colCount的脏单元格信息。
• 使用 setValue 方法来设置F列中单元格的值，这样它就会显示其中脏单元格的新旧值。

// Step 2: 创建 showChanges()
function showChanges(ss, row, col, rowCount, colCount) {
    // 获取活动表单
    var sheet = ss.getActiveSheet();
    // 如果activesheet有挂起的变更
    if (sheet.hasPendingChanges()) {
        // 暂停绘制，事件，脏
        ss.suspendPaint();
        ss.suspendEvent();
        sheet.suspendDirty();
        // 将脏单元集合存储在名为dirtyDataArray的数据数组中
        var dirtyDataArray = sheet.getDirtyCells(row, col, rowCount, colCount);

        // 跳过“F”列的脏变更
        for (var i = 0; i < dirtyDataArray.length; i++) {
            // 将脏单元格数据存储在脏数据数组中
            var dirtyCell = dirtyDataArray[i];

            // 显示dirtyDataArray值中的旧值和新值
            // row index --> dirtyCell.row 返回进行变更的行的行索引
            // column index -->5是F列的行索引
            sheet.setValue(
                dirtyCell.row,
                5,
                "old: " + dirtyCell.oldValue + ", new: " + dirtyCell.newValue
            );
        }
        // 恢复绘制，事件，脏
        sheet.resumeDirty();
        ss.resumeEvent();
        ss.resumePaint();
    }
}

步骤 3: 显示脏单元格值

将 CellChanged 和 RangeChanged 事件绑定到活动的表单，以在每次表格被修改时执行 showChange 函数。

// 步骤 3: 将CellChanged和RangeChanged事件绑定到表单
$(document).ready(function () {
    //初始化spread
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    // 调用refresh函数
    refresh();
    // 绑定 CellChanged
    spread.bind(GC.Spread.Sheets.Events.CellChanged, function (event, data) {
        var row = data.row,
            col = data.col;
        if (
            data.propertyName !== "value" ||
            row === undefined ||
            col === undefined
        ) {
            return;
        }
        // 执行showChanged函数
        showChanges(spread, row, col);
    });
    // 绑定 RangeChanged
    spread.bind(GC.Spread.Sheets.Events.RangeChanged, function (event, data) {
        var row = data.row,
            col = data.col,
            rowCount = data.rowCount,
            colCount = data.colCount;
        if (
            row === undefined ||
            col === undefined ||
            rowCount === undefined ||
            colCount === undefined
        ) {
            return;
        }
        // 执行showChanged函数
        showChanges(spread, row, col, rowCount, colCount);
    });
});

F列中会出现旧值和新值，并且F列被锁定，不能修改其内容。您还可以使用refresh按钮刷新spread实例，以删除所有变更。以上代码的输出如下所示: