如何点击外部按钮验证Syncfusion JavaScript Spreadsheet并高亮无效行？

我当前使用Syncfusion JavaScript Spreadsheet组件，代码如下：

var sheet = [
  {
    ranges: [{
      dataSource: tradeData
    }],
    fieldAsColumnHeader: true,
    columns: [
      { width: 70 }, { width: 80 }, { width: 100 }, { width: 100 },
      { width: 70 }, { width: 120 }, { width: 80 }, { width: 120 },
      { width: 140 }, { width: 80 }, { width: 120 }, { width: 120 }
    ],
    rows: [{
      index: 1,
      cells: [
        {
          index: 3,
          value: '',
          validation: {
            type: 'List',
            value1: trade_types.toString()
          }
        },
        {
          index: 8,
          value: '',
          validation: {
            type: 'List',
            value1: counter_parties.toString()
          }
        },
        {
          index: 10,
          value: '',
          validation: {
            type: 'List',
            value1: settlement_methods.toString()
          }
        }
      ]
    }]
  }
];

var spreadsheet = new ej.spreadsheet.Spreadsheet({
  showRibbon: false,
  showFormulaBar: false,
  showSheetTabs: false,
  sheets: sheet,
  created: () => {
    //Add Data validation to range.
  }
});

spreadsheet.appendTo('#spreadsheet');

页面上有一个外部按钮，点击事件代码如下：

document.getElementById("btn").onclick = () => {
  // Get the data of the spreadsheet.
  //Validate data like if the cell value is null or empty, if the value is Invalid, 
  //the highlight the cell with Yellow color(Default is yellow color)
};

需求：点击该按钮时，对表格数据进行验证（检查单元格值是否为空或无效），并将无效单元格高亮为黄色。

修改后的按钮点击事件代码 #

document.getElementById("btn").onclick = () => {
  // 获取当前活动工作表
  const activeSheet = spreadsheet.getActiveSheet();
  // 清除之前的高亮样式，避免残留
  spreadsheet.cellFormat({ backgroundColor: '' }, 'A1:' + activeSheet.usedRange.end);

  // 定义需要验证的列规则：对应列索引和允许的选项集合
  const validationRules = [
    { columnIndex: 3, allowedValues: trade_types },
    { columnIndex: 8, allowedValues: counter_parties },
    { columnIndex: 10, allowedValues: settlement_methods }
  ];

  // 数据从第2行开始（第1行是表头），到已使用区域的最后一行结束
  const startRow = 2;
  const endRow = activeSheet.usedRange.end.rowIndex;

  // 遍历每一行，检查指定列的单元格
  for (let row = startRow; row <= endRow; row++) {
    validationRules.forEach(rule => {
      const cell = spreadsheet.getCell(row, rule.columnIndex);
      const cellValue = cell.value?.trim() || '';
      // 验证：值为空 或 不在允许的选项列表中
      const isInvalid = !cellValue || !rule.allowedValues.includes(cellValue);
      
      if (isInvalid) {
        // 给无效单元格设置黄色背景
        const cellAddr = ej.spreadsheet.getCellAddress(row, rule.columnIndex);
        spreadsheet.cellFormat({ backgroundColor: '#FFFF00' }, cellAddr);
      }
    });
  }
};

代码说明 #

• 清除旧样式：先重置所有单元格背景，避免之前的高亮标记残留
• 集中管理验证规则：用validationRules数组统一维护需要验证的列和对应的允许值，后续修改更方便
• 遍历数据行：从第2行（表头行之后）开始，到工作表已使用的最后一行，覆盖所有数据行
• 验证逻辑：同时检查单元格值是否为空，以及是否符合下拉列表的选项要求
• 应用高亮：使用Syncfusion的cellFormat方法，给无效单元格设置黄色背景（#FFFF00）

注意事项 #

如果你的数据起始行不是第2行，调整startRow的值即可匹配实际数据位置。

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