Javascript 折叠行组

我有一个相当简单的应用程序（如下），我尝试使用DataTable输出分组表，并能够折叠组。我找到了在jQuery中实现的解决方案，但我不知道如何将如此复杂的实现转移到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的评论，我才能够把问题归结起来。事件必须在用户单击正文

$（“#DataTables_Table_0 tbody”）

时发生，并且仅在组标识符为

的行上发生

必须对最终回调进行调整，以将这两个条件都考虑在内

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

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)

库（闪亮）
图书馆（DT）
图书馆（shinyjs）
ui多亏了AEF的评论，我才能够把问题归结起来。事件必须在用户单击正文
$（“#DataTables_Table_0 tbody”）
时发生，并且仅在组标识符为
的行上发生

必须对最终回调进行调整，以将这两个条件都考虑在内

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

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)

库（闪亮）
图书馆（DT）
图书馆（shinyjs）
ui正如@David Joequera在评论中提到的，这是一个JavaScript错误，其中Datatable的一个默认事件处理程序抛出一个错误，因为组行中不存在行porperty

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

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

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

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

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

请注意，要删除的数据表的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)

库（闪亮）
图书馆（DT）
图书馆（shinyjs）
ui正如@David Joequera在评论中提到的，这是一个JavaScript错误，其中Datatable的一个默认事件处理程序抛出一个错误，因为组行中不存在行porperty

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

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

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

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

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

请注意，要删除的数据表的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)

库（闪亮）
图书馆（DT）
图书馆（shinyjs）
ui它原来是DT的javascript代码的一个bug。有一个点击事件监听器，它将记录点击单元格的所有信息。但是，RowGroup扩展创建了一个不属于原始数据集的新行，并导致错误此错误将停止进一步的javascript执行。

在您的情况下，
tr.group
事件无法工作，因为上一个单元格单击事件引发了错误

我们已修复此错误，DT的开发版本应使用以下代码：

库（闪亮）
图书馆（DT）
ui它原来是DT的javascript代码的一个bug。有一个点击事件监听器，它将记录点击单元格的所有信息。但是，RowGroup扩展创建了一个不属于原始数据集的新行，并导致错误此错误将停止进一步的javascript执行。

在您的情况下，
tr.group
事件无法工作，因为上一个单元格单击事件引发了错误

我们已修复此错误，DT的开发版本应使用以下代码：

库（闪亮）
图书馆（DT）
ui关于这一点，还有一点需要注意。
我注意到在一个标准的fluidPage等中，这一点与预期一样有效。
然而，当我开始在htmlTemplate中使用它时，它停止了工作

在某个地方，它丢失了
.hidden
类，我不得不手动添加它

.hidden {
  display: none !important;
}

然后它就如预期的那样工作了。
关于这一点，还有一点需要注意。
我注意到在一个标准的fluidPage等中，这一点与预期一样有效。
然而，当我开始在htmlTemplate中使用它时，它停止了工作

在某个地方，它丢失了
.hidden
类，我不得不手动添加它

.hidden {
  display: none !important;
}

然后，它按预期工作。
我对javascript了解不多，所以我还没有弄明白，所以我将告诉您我认为问题出在哪里：当您单击datatable的分组行时，如果您查看浏览器控制台，将显示一条错误消息：Uncaught TypeError:无法读取undefined的属性“row”。我建议在您的问题中添加
javascript
标记，以查看是否可以获得额外的帮助，可能是关于的问题？问题似乎是事件处理程序附加到表本身，而不是行。这似乎是你的第二个论点