javascript - 如果在 Rhandsontable 中编辑了单元格，则突出显示该行并跟踪所有更改

Question

我正在开发一个 Shiny 的应用程序，它从 SQL 数据库读取数据并将其呈现在 rhandsontable 中，并允许用户编辑数据。在将更改提交回数据库之前，我想添加一些功能:

1. 如果 rhandsontable 中的一个单元格，我如何突出显示该行行被编辑了？
2. 有没有办法收集表格上的所有更改/编辑，因为 input$myTable$changes$changes 只显示最后一个变化!

这是我的最小示例代码:

df <- structure(list(NumberOfWEC = c(3, 4, 54, 19, 10, 6, 8, 11, 140, 
                               11, 34), Source = c("SRP", "SRP", "SRP", "SRP", "SRP", "RBP", 
                                                   "SRP", "SRP", "SRP", "SRP", "SRP"), Status = structure(c(3L, 
                                                                                                            3L, 2L, 3L, 2L, 1L, 2L, 1L, 2L, 2L, 2L), .Label = c("CANDIDATE", 
                                                                                                                                                                "APPROVED", "EXISTING"), class = c("ordered", "factor"))), row.names = c(NA, 
                                                                                                                                                                                                                                         11L), class = "data.frame")



ui <- fluidPage(
  rHandsontableOutput("myTable")
)

server <- function(input, output, session) {
  
  ColNames <- (colnames(df))
  ColNames <- ColNames[!ColNames %in% "Status"]
  
  
  output$myTable <- renderRHandsontable({rhandsontable(df) %>% hot_col(ColNames, readOnly = TRUE)})
  
  observeEvent(input$myTable$changes$changes, {

    changedRow = 1 + as.numeric(input$myTable$changes$changes[[1]][[1]])
    changedColl = 1 + as.numeric(input$myTable$changes$changes[[1]][[2]])
    OldValue = input$myTable$changes$changes[[1]][[3]]
    NewValue = input$myTable$changes$changes[[1]][[4]]
    print(paste0("changedRow = ",changedRow, " changedColl = ", changedColl, " OldValue = ", OldValue, " NewValue = ", NewValue, " by = ",session$user))
    
  })
  
}

shinyApp(ui, server)

Answer 1

我自己遇到了这个问题，不久前在这里找到了解决方案 Change cell background of rHandsontable with afterChange event on client side所以提供的代码不是我自己生成的:

代码的主要变化:

1. 在顶部添加 change_hook 函数。
2. 服务器部分的这段代码:

  output$myTable <- renderRHandsontable({rht = rhandsontable(df) %>% hot_col(ColNames, readOnly = TRUE)
  htmlwidgets::onRender(rht,change_hook)
  })

library(shiny)
library(rhandsontable)

change_hook <- "function(el,x) {
var hot = this.hot;  
var cellChanges = [];

var changefn = function(changes,source) { 
if (source === 'edit' || source === 'undo' || source === 'autofill' || source === 'paste') {
row = changes[0][0];
col = changes[0][1];
oldval = changes[0][2];
newval = changes[0][3];

if (oldval !== newval) {
  var cell = hot.getCell(row, col);
  cell.style.background = 'pink';
  cellChanges.push({'rowid':row, 'colid':col});
}
}
}

var renderfn = function(isForced) {

for(i = 0; i < cellChanges.length; i++)
{

var rowIndex = cellChanges[i]['rowid'];
var columnIndex = cellChanges[i]['colid'];

var cell = hot.getCell(rowIndex, columnIndex);
cell.style.background = 'yellow';

}


}

var loadfn = function(initialLoad) {

for(i = 0; i < cellChanges.length; i++)
    {
      var rowIndex = cellChanges[i]['rowid'];
      var columnIndex = cellChanges[i]['colid'];

      var cell = hot.getCell(rowIndex, columnIndex);

      cell.style.background = 'white';

    }
cellChanges = []

}


hot.addHook('afterChange', changefn);
hot.addHook('afterRender', renderfn);
hot.addHook('afterLoadData', loadfn);


}"

df <- structure(list(NumberOfWEC = c(3, 4, 54, 19, 10, 6, 8, 11, 140, 
11, 34), Source = c("SRP", "SRP", "SRP", "SRP", "SRP", "RBP", 
"SRP", "SRP", "SRP", "SRP", "SRP"), Status = structure(c(3L, 
3L, 2L, 3L, 2L, 1L, 2L, 1L, 2L, 2L, 2L), .Label = c("CANDIDATE", 
"APPROVED", "EXISTING"), class = c("ordered", "factor"))), row.names = c(NA, 
11L), class = "data.frame")



ui <- fluidPage(
  rHandsontableOutput("myTable")
)

server <- function(input, output, session) {
  
  ColNames <- (colnames(df))
  ColNames <- ColNames[!ColNames %in% "Status"]
  
  
  output$myTable <- renderRHandsontable({rht = rhandsontable(df) %>% hot_col(ColNames, readOnly = TRUE)
  htmlwidgets::onRender(rht,change_hook)
  })
  
  observeEvent(input$myTable$changes$changes, {
    
    changedRow = 1 + as.numeric(input$myTable$changes$changes[[1]][[1]])
    changedColl = 1 + as.numeric(input$myTable$changes$changes[[1]][[2]])
    OldValue = input$myTable$changes$changes[[1]][[3]]
    NewValue = input$myTable$changes$changes[[1]][[4]]
    print(paste0("changedRow = ",changedRow, " changedColl = ", changedColl, " OldValue = ", OldValue, " NewValue = ", NewValue, " by = ",session$user))
  })
  
}

shinyApp(ui, server)