R Shiny DT排序筛选后已编辑单元格背景色重置问题

原有实现直接通过当前DOM的显示行号、列号选择元素修改内联样式，当表格触发排序、筛选、翻页操作时，DT会重新渲染整个表格DOM，不仅临时添加的内联样式会被清空，行的排列顺序也会发生变化，原有的行列序号对应关系完全失效，因此设置的背景色会消失。

核心逻辑调整为两点：

• 不依赖临时的显示行列位置标记编辑单元格，改用原始数据的固定行索引+列索引作为已编辑单元格的唯一标识，持久化存储编辑记录
• 利用DT自带的rowCallback回调钩子，该钩子会在每次表格重绘（排序、筛选、翻页都会触发）时执行，自动检查当前渲染的单元格是否属于已编辑状态，重新应用背景色

完整可运行代码如下：

library(shiny)
library(DT)

ui <- fluidPage(
  tags$head(
    tags$script(HTML(
      "// 全局存储已编辑单元格记录，存储结构为 {rowId: 原始数据行标识, col: 列索引}
      let editedCells = [];
      
      // 监听单元格编辑事件，记录编辑信息
      $(document).on('dt:edit', '#dtable', function(e, info) {
        // dataIndex为原始数据的固定行索引，不随排序/筛选变化
        const rowId = `row_${info.settings.aoData[info.row]._DT_RowIndex}`;
        const colIdx = info.col;
        // 避免重复记录同一单元格的多次编辑
        const recordExists = editedCells.some(item => item.rowId === rowId && item.col === colIdx);
        if(!recordExists) {
          editedCells.push({rowId: rowId, col: colIdx});
        }
      });"
    ))
  ),
  br(),
  DTOutput("dtable")
)

dat <- iris[1:5, ]

server <- function(input, output, session){
  
  output[["dtable"]] <- renderDT({
    datatable(
      dat, 
      editable = TRUE, 
      selection = "none",
      rownames = FALSE,
      options = list(
        # 每次渲染行时执行，自动给已编辑单元格上色
        rowCallback = JS(
          "function(row, data, displayNum, displayIndex, dataIndex) {
            const currentRowId = `row_${dataIndex}`;
            // 遍历当前行所有单元格
            Array.from(row.cells).forEach((cell, colIdx) => {
              const isCellEdited = editedCells.some(item => item.rowId === currentRowId && item.col === colIdx);
              $(cell).css('background-color', isCellEdited ? 'yellow' : '');
            })
          }"
        )
      )
    )
  }, server = FALSE)
  
}

shinyApp(ui, server)

• 该实现不需要依赖shinyjs包，所有样式逻辑在前端完成，编辑后样式响应无延迟
• 用作唯一标识的dataIndex是原始数据集的固定行索引，不会因为排序、筛选、分页操作改变，从根源上避免了位置变化导致的样式匹配错误
• 如果需要持久化编辑记录（比如跨页面刷新、多用户同步），可以在编辑事件触发时把editedCells的内容同步到Shiny服务端存储，初始化表格时再回传给前端即可

内容的提问来源于stack exchange，提问作者m.yoshih