如何基于双击选中的数据表条目条件构建Shiny的conditionalPanel

实现方案 #

核心问题是conditionalPanel的JS判断逻辑无法直接访问R环境中的dt数据集，我们需要先把双击行对应的B列取值暴露为前端可读取的响应式输出，再调整判定条件即可，完整可运行代码如下：

library(shiny)
library(data.table)
library(DT)

set.seed(42)
A <- rep(0, 10)
for (i in seq_len(10)) {
  random_length <- sample(1:10, 1)
  random_letters <- sample(letters, random_length)
  A[i] <- paste0(random_letters, collapse = "")
}
B <- sample(c(TRUE, FALSE), 10, replace = TRUE)
dt <- data.table(A, B)

ui <- fluidPage(
  conditionalPanel(
    condition = "output.doubleClickOutput == 0", 
    dataTableOutput("tableId")
  ),
  conditionalPanel(
    # 新增B值为FALSE的判定
    condition = "output.doubleClickOutput == 1 && output.selectedB == false",
    actionButton("buttonId1",
                 label = "Back 1")
  ), 
  conditionalPanel(
    # 新增B值为TRUE的判定
    condition = "output.doubleClickOutput == 1 && output.selectedB == true",
    actionButton("buttonId2",
                 label = "Back 2")
  ), 
)

server <- function(input, output, session) {
  # 响应式变量新增存储B列值的属性
  doubleClickIndicator <- reactiveValues(doubleClick = 0, bValue = FALSE)
  
  observeEvent(input$doubleClickData, {
    doubleClickIndicator$doubleClick <- 1
    # DT返回的行索引从0开始，R取数要+1
    click_row <- input$doubleClickData$row + 1
    doubleClickIndicator$bValue <- dt[click_row, B]
  })
  
  observeEvent(input$buttonId1, {
    doubleClickIndicator$doubleClick <- 0
  })
  
  observeEvent(input$buttonId2, {
    doubleClickIndicator$doubleClick <- 0
  })
  
  output$doubleClickOutput <- reactive({
    doubleClickIndicator$doubleClick
  })
  outputOptions(output,
                name = "doubleClickOutput",
                suspendWhenHidden = FALSE)
  # 新增B值的响应式输出，暴露给前端
  output$selectedB <- reactive({
    doubleClickIndicator$bValue
  })
  outputOptions(output,
                name = "selectedB",
                suspendWhenHidden = FALSE)
  
  output$tableId <- renderDataTable(
    dt, 
    options = list(columnDefs = list(list(
      targets = 2, 
      render = JS(
        "function(data, type, row, meta) {",
        "  if(type === 'display'){",
        "    return data ? '<input type=\"checkbox\" disabled checked/>' : '<input type=\"checkbox\" disabled/>';", 
        "  }",
        "  return data;",
        "}"
      )
    ))), 
    callback = JS(
      "table.on('dblclick', 'td', ",
      "function() {",
      "var row = table.cell(this).index().row;",
      "Shiny.setInputValue('doubleClickData', {row});",
      "}",
      ");"
    )
  )
}

shinyApp(ui, server)

主要改动点 #

• 扩展响应式变量doubleClickIndicator，新增bValue字段存储双击行的B列布尔值
• 新增selectedB响应式输出，将B列值暴露给前端JS逻辑，同时设置suspendWhenHidden = FALSE保证隐藏状态下也能更新值
• 调整两个conditionalPanel的判定条件，新增对output.selectedB的布尔值判断即可实现需求

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