閃亮的數據表行組按鈕操作 R 到 JavaScript

Question

這是我之前寫的一個線程的跟進。

我有一個簡單的 Shiny App 依賴DT::renderDataTable來生成一個基於mtcars數據集的表。

我包含了一個操作按鈕，可以在按下時展開所有行（基於rowGroup擴展名）。

由於用作rowGroup = list(dataSrc = ColNum)參數的列索引是以編程方式定義的（即ColNum <- 3 ），因此我想將此整數值從 R 傳遞給 javascript 作為action = JS(function()) 。

由於我對 javascript 的理解非常有限，我試圖關注這個 線程但沒有成功......

這是我的可重現示例：

library(shiny)
library(DT)
ui <- fluidPage(# Application title
  titlePanel("Collapse/Expand table"),
  mainPanel(
    tabsetPanel(
      tabPanel("table1",
               # actionButton("expandButton", "Expand/Collapse"),
               dataTableOutput("my_table"))
    )
  ))

# Column corresponding to the rowGroup argument
ColNum <- 3

server <- function(input, output, session) {

  # Send ColNum to the browser
  observe({
    session$sendCustomMessage("column-integer", jsonlite::toJSON(ColNum))
  })

  # Generate the table
  output$my_table <- DT::renderDataTable({
    datatable(
      mtcars[1:15, 1:5],
      extensions = c('RowGroup',"Buttons"),
      options = list(rowGroup = list(dataSrc = ColNum),
                     pageLength = 20,
                     dom = 'tB',
                     buttons = list(
                       list(extend = "",
                            text = "Expand rows",
                            action = JS("Shiny.addCustomMessageHandler('column-integer', function (e, dt, node, config, ColNum) {dt.rowGroup().dataSrc(ColNum).draw();})")))),
      callback = JS(
        "table.on('click', 'tr.dtrg-group', function () {",
        "  var rowsCollapse = $(this).nextUntil('.dtrg-group');",
        "  $(rowsCollapse).toggleClass('hidden');",
        "});",
        "table.one('init', () => $('#my_table .dtrg-group').trigger('click'))"
      ),
      selection = 'none'
    )
  })
}

# Run the application
shinyApp(ui = ui, server = server)

感謝您的支持，

C。

我試着修改

  observe({
    session$sendCustomMessage("column-integer", jsonlite::toJSON(ColNum))
  })

作為

  observe({
    session$sendCustomMessage("column-integer", ColNum)
  })

但它沒有效果。

Answer 1

您可以將ColNum設置為全局 JavaScript 變量並使用 Shiny 消息處理程序更改其值：

js <- "
var ColNum = 3;
$(document).ready(function() {
  Shiny.addCustomMessageHandler('column-integer', function(x) {
    ColNum = x;
  });
});
"

tags$head(tags$script(HTML(js)))

由於ColNum是一個全局變量，它將在自定義按鈕的操作中找到：

function(e, dt, node, config) {
  dt.rowGroup().dataSrc(ColNum).draw();
}