Excel Add-in(Office.js)：排序后如何唯一识别编辑行并跟踪变更

使用Office.js开发Excel插件时，需跟踪行变更事件，从DBMS获取的技术ID不能显示在工作表中，但排序后无法唯一识别编辑的行——原有的Range绑定、Table绑定方案在排序后会丢失原始ID的关联。

以下是两种可行的解决方案：

方案1：用隐藏列存储ID（最直观高效） #

实现思路 #

将技术ID存入单独的列，设置该列为隐藏状态。排序时ID会随对应行同步移动，触发变更事件时，读取编辑行对应的隐藏列单元格值即可获取原始ID。

代码示例 #

// 创建带隐藏ID列的数据集并绑定事件
async function initDataWithHiddenID() {
  await Excel.run(async (context) => {
    const activeSheet = context.workbook.worksheets.getActiveWorksheet();
    
    // 模拟从DB获取的数据（包含ID）
    const rawData = [
      ["ID", "名称"], 
      [1, "项目1"], 
      [5, "项目5"], 
      [3, "项目3"]
    ];
    
    // 写入数据到工作表
    const dataRange = activeSheet.getRange("A1").getResizedRange(rawData.length - 1, rawData[0].length - 1);
    dataRange.values = rawData;
    
    // 隐藏ID列（A列）
    activeSheet.columns.getItem("A").hidden = true;
    
    // 创建Table并绑定数据变更事件
    const table = activeSheet.tables.add(dataRange, true);
    table.onDataChanged.add(handleTableDataChange);
    
    await context.sync();
  });
}

// 处理Table数据变更事件
async function handleTableDataChange(event) {
  await Excel.run(async (context) => {
    const table = context.workbook.tables.getItem(event.tableId);
    const changedRange = context.workbook.getRange(event.address);
    
    // 获取编辑行对应的隐藏ID列单元格（假设ID列是Table的第一列）
    const idColumnOffset = 0 - changedRange.columnIndex;
    const idCell = changedRange.getOffsetRange(0, idColumnOffset);
    idCell.load("values");
    
    await context.sync();
    const editedRowId = idCell.values[0][0];
    console.log(`编辑的行对应DB ID: ${editedRowId}`);
    // 这里可添加后续业务逻辑，比如同步到DB
  });
}

方案2：用Table行的自定义属性存储ID（无需额外列） #

实现思路 #

不显示ID列，而是给Table的每一行添加自定义属性存储技术ID。排序后，行的自定义属性会随该行同步移动，事件触发时直接读取对应行的自定义属性即可获取ID。

代码示例 #

// 创建Table并为每行添加自定义ID属性
async function initTableWithCustomProps() {
  await Excel.run(async (context) => {
    const activeSheet = context.workbook.worksheets.getActiveWorksheet();
    
    // 模拟从DB获取的显示数据（不含ID）
    const displayData = [["名称"], ["项目1"], ["项目5"], ["项目3"]];
    // 对应DB的技术ID数组
    const dbIds = [1, 5, 3];
    
    // 写入显示数据
    const dataRange = activeSheet.getRange("A1").getResizedRange(displayData.length - 1, displayData[0].length - 1);
    dataRange.values = displayData;
    
    // 创建Table
    const table = activeSheet.tables.add(dataRange, true);
    const tableRows = table.rows;
    tableRows.load("items");
    
    await context.sync();
    
    // 为每行添加自定义属性存储DB ID
    tableRows.items.forEach((row, index) => {
      row.customProperties.add("dbId", dbIds[index]);
    });
    
    // 绑定数据变更事件
    table.onDataChanged.add(handleTableChangeWithCustomProps);
    
    await context.sync();
  });
}

// 处理带自定义属性的Table变更事件
async function handleTableChangeWithCustomProps(event) {
  await Excel.run(async (context) => {
    const table = context.workbook.tables.getItem(event.tableId);
    const changedAddress = event.address;
    
    // 解析变更地址的行号（减去表头行号）
    const rowNum = parseInt(changedAddress.match(/\d+/)[0]);
    const headerRowCount = table.headerRowRange.rowCount;
    const targetRow = table.rows.getItemAt(rowNum - headerRowCount - 1);
    
    // 加载该行的自定义属性
    targetRow.customProperties.load("items");
    await context.sync();
    
    // 获取DB ID
    const dbIdProp = targetRow.customProperties.items.find(prop => prop.key === "dbId");
    if (dbIdProp) {
      console.log(`编辑的行对应DB ID: ${dbIdProp.value}`);
      // 执行后续业务逻辑
    }
  });
}

为什么之前的方案失效？ #

• 逐行Range绑定：排序后，原Range引用的是旧位置的单元格，无法关联到排序后新位置的原始行数据。
• 普通Table绑定：未存储ID的关联信息，事件仅能获取变更的单元格位置，无法映射到原始DB ID。

内容的提问来源于stack exchange，提问作者Claudio