折叠 rowGroup 闪亮

Question

我有一个相当简单的应用程序（如下），我尝试使用 DataTable 输出分组表，并能够折叠组。我找到了在 jQuery here 中实现的解决方案，但我不知道如何将如此复杂的实现移到 R 中。

目前，我可以在一个组内折叠，但不能在整个组内折叠。有什么提示可以在 Shiny 中实现吗？

我的申请：

library(shiny)
library(DT)
library(shinyjs)

ui <- fluidPage(

   # Application title
   titlePanel("Collapse/Expand table"),

            mainPanel(
          DTOutput("my_table")

      )
   )


server <- function(input, output) {

    output$my_table<-DT::renderDataTable({

        datatable(mtcars[1:15,1:5],
                  extensions = 'RowGroup', 
                  options = list(rowGroup = list(dataSrc=c(3)),
                                 pageLength = 20),
                  callback = JS("
                                table.on('click', 'tr', function () {
                                    var rowsCollapse = $(this).nextUntil('.group');
                                    $(rowsCollapse).toggleClass('hidden');
                                 });"))
    })
}

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

编辑

给定 AEF 注释，可以调整代码以指定即使在单击表 body 后也必须发生。这确实会折叠任何行，直到下一组。剩下的部分是将点击限制在组行上。 回调应该是现在：

callback = JS("$('#DataTables_Table_0 tbody').on('click', 'tr', function () {
 $(this).nextUntil('.group').toggleClass('hidden');});"))

Answer 1

原来是DT的javascript代码的一个bug。有一个单击事件侦听器将记录单击单元格的所有信息。但是，RowGroup 扩展会创建不属于原始数据集的新行并导致错误。 此错误会停止进一步的 javascript 执行。

在您的情况下，tr.group 事件不起作用，因为之前的单元格单击事件引发了错误。

我们已经修复了这个错误，DT 的开发版本应该可以使用以下代码：

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

callback_js <- JS(
  "table.on('click', 'tr.dtrg-group', function () {",
  "  var rowsCollapse = $(this).nextUntil('.dtrg-group');",
  "  $(rowsCollapse).toggleClass('hidden');",
  "});"
)

server <- function(input, output) {
  output$my_table <- DT::renderDT({
    datatable(
      mtcars[1:15, 1:5],
      extensions = 'RowGroup',
      options = list(rowGroup = list(dataSrc = 3), pageLength = 20),
      callback = callback_js,
      selection = 'none'
    )
  })
}

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

再次感谢您的报告！

DT 的 Github issue 代码：https://github.com/rstudio/DT/issues/759

Answer 2

关于这一点的另一个说明。 我注意到在标准的流体页面等中，这按预期工作。 但是，当我开始在 htmlTemplate 中使用它时，它就停止工作了。

在此过程中，它丢失了 .hidden 类，我不得不手动添加它。

.hidden {
  display: none !important;
}

然后它按预期工作。

Answer 3

感谢 AEF 的评论，我能够归结为问题。该事件必须由一个用户点击正文 $('#DataTables_Table_0 tbody') 并且仅在具有组标识符 'tr.group' 的行上发生。

必须调整最终回调以将这两个条件都考虑在内。

因此，具有可折叠行的应用程序如下所示：

library(shiny)
library(DT)
library(shinyjs)

ui <- fluidPage(

   # Application title
   titlePanel("Collapse/Expand table"),

            mainPanel(
          DTOutput("my_table")

      )
   )


server <- function(input, output) {

    output$my_table<-DT::renderDataTable({

        datatable(mtcars[1:15,1:5],
                  extensions = 'RowGroup', 
                  options = list(rowGroup = list(dataSrc=c(3)),
                                 pageLength = 20),
                  callback = JS("
                                $('#DataTables_Table_0 tbody').on('click', 'tr.group', function () {
                                    var rowsCollapse = $(this).nextUntil('.group');
                                    $(rowsCollapse).toggleClass('hidden');
                                 });"))
    })
}

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

Answer 4

正如@David Joequera 在 cmets 中所提到的，这是一个 JavaScript 错误，其中 Datatable 的默认事件处理程序之一会引发错误，因为 Group 行中不存在行属性。

作为一种解决方法，我们可以删除此事件处理程序，以便隐藏的事件处理程序可以工作。

另外，我建议您仅使用事件处理程序来定位组行，以便您只能完全关闭和打开组，而不能半隐藏组。您可以通过简单地将“.group”添加到您的事件侦听器目标来实现此目的。 导致这段代码：

table.on('click', 'tr.group', function () {
   var rowsCollapse = $(this).nextUntil('.group');
   $(rowsCollapse).toggleClass('hidden');
})

为了删除事件处理程序，我们需要等到表被正确加载并且有问题的事件处理程序被附加，所以我建议使用一个小的超时。 1000 毫秒对我来说效果很好，不应该带来任何可用性问题。 所以将此代码添加到回调应该可以解决问题：

setTimeout(function(){$('#DataTables_Table_0').off('click.dt','tbody td')},1000);

请注意，要删除的 DataTable 的 ID 可能会在您的最终/实际解决方案中发生变化

生成此演示代码：

library(shiny)
library(DT)
library(shinyjs)

ui <- fluidPage(

  # Application title
  titlePanel("Collapse/Expand table"),

  mainPanel(
    DTOutput("my_table")

  ),
)


server <- function(input, output) {

output$my_table<-DT::renderDataTable({

datatable(mtcars[1:15,1:5],
          extensions = 'RowGroup', 
          options = list(rowGroup = list(dataSrc=c(3)),
                         pageLength = 20),
          callback = JS("
                           setTimeout(function(){$('#DataTables_Table_0').off('click.dt','tbody td')},1000);
                           table.on('click', 'tr.group', function () {
                                var rowsCollapse = $(this).nextUntil('.group');
                                $(rowsCollapse).toggleClass('hidden');
                             });"))
})



}

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