闪亮的数据表行组按钮动作R到JavaScript

pn9klfpd  于 2022-12-25  发布在  Java
关注(0)|答案(1)|浏览(117)

这是我之前写的一个thread的后续。
我有一个简单的Shiny应用程序,它依赖于DT::renderDataTable来生成基于mtcars数据集的表。
我包含了一个操作按钮,按下该按钮时可以展开所有行(基于rowGroup扩展)。
由于用作rowGroup = list(dataSrc = ColNum)参数的列索引是以编程方式定义的(即ColNum <- 3),因此我希望将这个整数值作为action = JS(function())的参数从R传递到javascript。
由于我对javascript的理解非常有限,我试着遵循这个thread,但没有成功。
下面是我可以重复的例子:

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)
  })

但没有效果。

wfveoks0

wfveoks01#

您可以将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();
}

相关问题