闪亮的数据表行组操作按钮折叠/展开

Question

我设计了一个基本的 Shiny App，包括一个带有

rowGroup

参数的数据表。

现在，我想添加一个

actionButton()

，它会在按下按钮时折叠/展开数据表的所有行。

目前，代码默认折叠基于

rowGroup

参数的所有行，并且每个

rowGroup

可以通过鼠标单击逐一打开（这很好），但我还想添加一个按钮同时展开/折叠所有行。

这是一个可重现的例子（灵感来自这个thread）：

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

server <- function(input, output) {
  output$my_table <- DT::renderDataTable({
    datatable(
      mtcars[1:15, 1:5],
      extensions = c('RowGroup',"Buttons"),
      options = list(rowGroup = list(dataSrc = 3), 
                 pageLength = 20, 
                 dom = 'tB',
                 buttons = list(list(extend = "",
                                text = "Collapse rowGroup",
                                action = JS("function (e, dt, node, config) {dt.rowGroup().dataSrc('').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)

你有什么建议吗（我对javascript的理解极其有限）？

谢谢，

C.

Answer 1

在DT中，除了最近，只有列数有效。

在回调中可以绑定展开按钮。

找到选项/按钮/操作的好工作 R Shiny DT 相当于纯 javascript 实现:)

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

server <- function(input, output) {
  output$my_table <- DT::renderDataTable({
    datatable(
      mtcars[1:15, 1:5],
      extensions = c('RowGroup',"Buttons"),
      options = list(rowGroup = 
                       list(
                         dataSrc = 3 # disp
                       ), 
                     pageLength = 20, 
                     dom = 'tB',
                     buttons = list(
                       list(extend = "",
                            text = "UnGroup rowGroup disp",
                            action = JS("function (e, dt, node, config) {dt.rowGroup().dataSrc('').draw();}")
                       ),
                       list(extend = "",
                            text = "Group rowGroup disp",
                            action = JS("function (e, dt, node, config) {dt.rowGroup().dataSrc(3).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'))",
        "$('#expandButton').on('click', function(){",
        "  $('#my_table').toggleClass('hidden')",
        "});"
      ),
      selection = 'none'
    )
  })
}

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

Answer 2

通过向行添加/删除

'hidden'

类，可以通过按钮展开/折叠所有组

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

server <- function(input, output) {
  output$my_table <- DT::renderDataTable({
    datatable(
      mtcars[1:15, 1:5],
      extensions = c('RowGroup',"Buttons"),
      options = list(rowGroup =
                       list(
                         dataSrc = 3 # disp
                       ),
                     pageLength = 20,
                     dom = 'tB',
                     buttons = list(
                       list(extend = "",
                            text = 'Expand <span class="glyphicon glyphicon-plus"></span>',
                            action = DT::JS("() => {
                                            var tbl = document.getElementById('DataTables_Table_0');
                                            // odds/evens change, so repeat x5 just to be sure
                                            for (var i = 0; i < 5; i++) {
                                            tbl.getElementsByClassName('hidden').forEach(x => {x.classList.remove('hidden')})
                             }
                             }")
                       ),
                       list(extend = "",
                            text = 'Collapse <span class="glyphicon glyphicon-minus"></span>',
                            action = DT::JS("() => {
                                            var tbl = document.getElementById('DataTables_Table_0');
                                            tbl.getElementsByClassName('even').forEach(x => {x.classList.add('hidden')});
                                            tbl.getElementsByClassName('odd').forEach(x => {x.classList.add('hidden')});
                             }")
                       )
                     )
      ),
      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'))",
        "$('#expandButton').on('click', function(){",
        "  $('#my_table').toggleClass('hidden')",
        "});"
      ),
      selection = 'none'
    )
  })
}

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

关键部分是按钮中的动作

buttons = list(
  list(extend = "",
       text = 'Expand <span class="glyphicon glyphicon-plus"></span>',
       action = DT::JS("() => {
                         var tbl = document.getElementById('DataTables_Table_0');
                         // odds/evens change, so repeat x5 just to be sure
                         for (var i = 0; i < 5; i++) {
                           tbl.getElementsByClassName('hidden').forEach(x => {x.classList.remove('hidden')})
                         }
                       }")
  ),
  list(extend = "",
       text = 'Collapse <span class="glyphicon glyphicon-minus"></span>',
       action = DT::JS("() => {
                        var tbl = document.getElementById('DataTables_Table_0');
                        tbl.getElementsByClassName('even').forEach(x => {x.classList.add('hidden')});
                        tbl.getElementsByClassName('odd').forEach(x => {x.classList.add('hidden')});
                       }")
  )
)

我不确定是否有一种简单的方法来获取表的 ID（在您的示例中为

DataTables_Table_0

），但是如果您只有一张表，则可以跳过该搜索并使用

document.getElementsByClassName()

。

更完整的例子：https://gist.github.com/jonocarroll/6de8d5b4b7dbe33001820ba1939ebac0