常用事件

以下部分提供了 SpreadJS 中各种可用事件的代码示例。

单击单元格

在 SpreadJS 工作表中，你可以为单击单元格的操作配置事件。

以下代码示例展示了如何使用 CellClick 事件。

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 3 });

var activeSheet = spread.getActiveSheet();
activeSheet.bind(
    GC.Spread.Sheets.Events.CellClick,

    function (sender, args) {
        if (args.sheetArea === GC.Spread.Sheets.SheetArea.colHeader) {
            console.log('列标题被单击了。');
        }
        if (args.sheetArea === GC.Spread.Sheets.SheetArea.rowHeader) {
            console.log('行标题被单击了。');
        }
        if (args.sheetArea === GC.Spread.Sheets.SheetArea.corner) {
            console.log('角落标题被单击了。');
        }
        console.log('单击的列索引: ' + args.col);
        console.log('单击的行索引: ' + args.row);
    }
);

双击单元格

在 SpreadJS 工作表中，你可以为双击单元格的操作配置事件。

以下代码示例展示了如何使用 CellDoubleClick 事件。

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 3 });

var activeSheet = spread.getActiveSheet();

activeSheet.bind(GC.Spread.Sheets.Events.CellDoubleClick, function (sender, args) {
    if (args.sheetArea === GC.Spread.Sheets.SheetArea.colHeader) {
        console.log('列标题被双击了。');
    }
    if (args.sheetArea === GC.Spread.Sheets.SheetArea.rowHeader) {
        console.log('行标题被双击了。');
    }
    if (args.sheetArea === GC.Spread.Sheets.SheetArea.corner) {
        console.log('角落标题被双击了。');
    }
    console.log('双击的列索引: ' + args.col);
    console.log('双击的行索引: ' + args.row);
});

移动单元格

在移动单元格时，你可以使用相关事件。

以下代码示例展示了如何使用 LeaveCell 事件。

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 3 });
var activeSheet = spread.getActiveSheet();

activeSheet.bind(GC.Spread.Sheets.Events.LeaveCell, function (sender, args) {
    console.log('移动前的列索引: ' + args.col);
    console.log('移动前的行索引: ' + args.row);
});

开始或停止编辑模式

在编辑模式开始或停止时，你可以使用相关事件。

以下代码示例展示了如何使用 EditStarting 和 EditEnded 事件。

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 3 });

var activeSheet = spread.getActiveSheet();
activeSheet.bind(GC.Spread.Sheets.Events.EditStarting, function (sender, args) {
    console.log('开始单元格编辑。');
});

activeSheet.bind(GC.Spread.Sheets.Events.EditEnded, function (sender, args) {
    console.log('完成单元格编辑。');
});

数据变更

在单元格中的数据发生变化时，你可以使用相关事件。

以下代码示例展示了如何使用 EditChange 事件。

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 3 });
var activeSheet = spread.getActiveSheet();
activeSheet.bind(GC.Spread.Sheets.Events.EditChange, function (sender, args) {
    console.log('单元格 (' + args.row + ', ' + args.col + ') 的数据已被更改。');
});

顶部行或左侧列的变更

在滚动时顶部行或左侧列发生变化时，你可以使用相关事件。

当 scrollByPixel 设置为 true 时，此事件会根据 oldOffset 和 newOffset 之间的差异记录滚动状态，其中 offset 是指从 topRow 的顶部或 leftColumn 的底部到当前滚动位置的距离。

以下代码示例展示了当 scrollByPixel 设置为 true 时，如何使用 TopRowChanged 和 LeftColumnChanged 事件。

var wb1 = new GC.Spread.Sheets.Workbook(document.getElementById('ss1'));
var wb2 = new GC.Spread.Sheets.Workbook(document.getElementById('ss2'));
wb1.options.scrollByPixel = true;
wb2.options.scrollByPixel = true;
wb1.bind(GC.Spread.Sheets.Events.TopRowChanged, (e, info) => {
    wb2.getActiveSheet().showRow(info.newTopRow);
    wb2.getActiveSheet().scroll(info.newOffset - info.oldOffset, 0);
});
wb1.bind(GC.Spread.Sheets.Events.LeftColumnChanged, (e, info) => {
    wb2.getActiveSheet().showColumn(info.newLeftCol);
    wb2.getActiveSheet().scroll(0, info.newOffset - info.oldOffset);
});

工作表选项卡的变更

在工作表选项卡发生变化时，你可以使用相关事件。

以下代码示例展示了如何取消选项卡的变更。

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 3 });
spread.addSheet();
spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanging, function (sender, args) {
    // 取消工作表切换。
    args.cancel = true;
});

spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanged, function (sender, args) {
    console.log('活动工作表已被切换。');
});

单元格块的拖放

在拖放单元格块时，你可以使用相关事件。

以下代码示例展示了如何使用 DragDropBlock 事件。

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 3 });

var sheet = spread.getActiveSheet();
sheet.bind(GC.Spread.Sheets.Events.DragDropBlock, function (e, args) {
    console.log('起始列:' + args.fromCol);
    console.log('起始行:' + args.fromRow);
    console.log('目标列:' + args.toCol);
    console.log('目标行:' + args.toRow);
});

工作表的变更

你可以在工作表变更之前或之后配置事件。

SheetChanging 事件会在工作表变更之前触发，而 SheetChanged 事件会在工作表变更之后触发。这里的工作表变更包括使用上下文菜单插入、删除、隐藏或取消隐藏工作表，或者单击工作表选项卡中的 “+” 按钮。

以下代码示例展示了如何使用 SheetChanged 和 SheetChanging 事件。

// 初始化 Spread
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

// 绑定 SheetChanged 事件
spread.bind(GC.Spread.Sheets.Events.SheetChanged, function (sender, args) {
    console.log('变更类型: ' + args.propertyName + ' & 工作表索引 : ' + args.sheetIndex);
});

// 绑定 SheetChanging 事件
spread.bind(GC.Spread.Sheets.Events.SheetChanging, function (sender, args) {
    console.log('正在变更的类型: ' + args.propertyName + ' & 工作表索引 : ' + args.sheetIndex);
});

单元格区域的变更

在表格区域的单元格区域发生变化时，你可以使用相关代码。

以下代码示例展示了如何使用 RangeChanged 事件。

// 初始化 Spread
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// 获取活动工作表
var activeSheet = spread.getSheet(0);
// 添加数据
for (var col = 1; col < 6; col++) {
    for (var row = 2; row < 11; row++) {
        activeSheet.setValue(row, col, row + col);
    }
}
for (var col = 7; col < 12; col++) {
    for (var row = 2; row < 5; row++) {
        activeSheet.setValue(row, col, row + col);
    }
}
// 添加表格
activeSheet.tables.add('Table1', 1, 1, 10, 5, GC.Spread.Sheets.Tables.TableThemes.dark1);
activeSheet.tables.add('Table2', 1, 7, 4, 5, GC.Spread.Sheets.Tables.TableThemes.dark1);

// 绑定 RangeChanged 事件
activeSheet.bind(GC.Spread.Sheets.Events.RangeChanged, function (sender, args) {
    if (args.tableNames) {
        console.log('Table : ' + args.tableNames + ' 的 RangeChanged 事件已触发。');
    }
});

单击按钮

你可以将 ButtonClicked 事件与按钮、复选框或超链接单元格一起使用。

当用户单击单元格中的按钮、复选框或超链接时，会触发 ButtonClicked 事件。

以下代码示例展示了在单击按钮单元格时如何显示一条消息。

var cellType = new GC.Spread.Sheets.CellTypes.Button();
cellType.buttonBackColor('#FFFF00');
cellType.text('这是一个按钮');
activeSheet.setCellType(1, 1, cellType);

spread.bind(GC.Spread.Sheets.Events.ButtonClicked, function (e, args) {
    var sheet = args.sheet,
        row = args.row,
        col = args.col;
    var cellType = activeSheet.getCellType(row, col);
    if (cellType instanceof GC.Spread.Sheets.CellTypes.Button) {
        alert('按钮被单击了');
    }
});