Shiny/DT：在初始加载时显示子行

Posted 2023-03-24

【中文标题】Shiny/DT：在初始加载时显示子行

【英文标题】：Shiny/DT: Show Child Rows Upon Initial Load

【发布时间】：2021-12-27 01:39:10

【问题描述】：

问题：我在一个使用子行的 Shiny 应用程序中有一个 DataTable 对象，可以单击并展开以显示有关该行的其他信息。但是，我不知道如何在表格最初加载时让子行可见/展开。

当应用最初加载时，子行被隐藏/关闭，数据表如下所示：

但是，我希望表格的初始加载能够模仿当我单击每一行的“+”号（展开/显示子行）时的样子...例如：

这是一个带有一些虚拟数据的示例：

# Load packages
library(shiny)
library(DT)

# Set up dummy data frame.
df = data.frame(
  expand_child_row = "⊕",
  col1 = c(1, 2, 3),
  col2 = c("a", "b", "c"),
  child_row_col = "additional_info"
)

# Define app UI
ui = shiny::fluidPage(
  
  DT::DTOutput(outputId = "example_table")
  
)

# Define app server
server = function(input, output) 
  
  output$example_table = DT::renderDataTable(
    
    dt = DT::datatable(
      data = df,
      options = list(
        dom = "t",
        columnDefs = list(
          list(visible = FALSE, targets = 3),
          # Define options for child row column
          list(orderable = FALSE, className = 'details-control', targets = 0)
        )
      ),
      rownames = FALSE,
      escape = FALSE,
      callback = DT::JS("
      
        // Change mouse to pointer when hovering over expand plus sign
        table.column(0).nodes().to$().css(cursor: 'pointer');
        
        // Function to format the child row text
        var format = function(d) 
          return '<div style=\"background-color:#f9f7fe; padding: .5em;\"> ' + d[3] + '</div>';
        ;
        
        // Function to toggle (show/hide) child row visibility upon click.
        table.on('click', 'td.details-control', function() 
          var td = $(this), row = table.row(td.closest('tr'));
          if (row.child.isShown()) 
            row.child.hide();
            td.html('&oplus;');
           else 
            row.child(format(row.data())).show();
            td.html('&CircleMinus;');
          
        );
        
      ")
    )
    
    return(dt)
    
  )
  


shiny::shinyApp(ui = ui, server = server)

谁能帮我弄清楚如何获取它，以便显示数据表的初始加载并显示所有子行（如第二张图片中所示）？

谢谢！

【参考方案1】：

我在下面加了一点js，实现了你想要的。

确保$("#example_table") 中的单词example_table 与DToutput ID 匹配。

# Load packages
library(shiny)
library(DT)

# Set up dummy data frame.
df = data.frame(
    expand_child_row = "⊕",
    col1 = c(1, 2, 3),
    col2 = c("a", "b", "c"),
    child_row_col = "additional_info"
)

# Define app UI
ui = shiny::fluidPage(
    DT::DTOutput(outputId = "example_table"),
    tags$script(
        '
        $("#example_table").on("draw.dt", function()
            $(this).find("tbody tr td:first-child").trigger("click");
        )
        '
    )

)

# Define app server
server = function(input, output) 

    output$example_table = DT::renderDataTable(

        dt = DT::datatable(
            data = df,
            options = list(
                dom = "t",
                columnDefs = list(
                    list(visible = FALSE, targets = 3),
                    # Define options for child row column
                    list(orderable = FALSE, className = 'details-control', targets = 0)
                )
            ),
            rownames = FALSE,
            escape = FALSE,
            callback = DT::JS("

        // Change mouse to pointer when hovering over expand plus sign
        table.column(0).nodes().to$().css(cursor: 'pointer');

        // Function to format the child row text
        var format = function(d) 
          return '<div style=\"background-color:#f9f7fe; padding: .5em;\"> ' + d[3] + '</div>';
        ;

        // Function to toggle (show/hide) child row visibility upon click.
        table.on('click', 'td.details-control', function() 
          var td = $(this), row = table.row(td.closest('tr'));
          if (row.child.isShown()) 
            row.child.hide();
            td.html('&oplus;');
           else 
            row.child(format(row.data())).show();
            td.html('&CircleMinus;');
          
        );
      ")
        )

        return(dt)

    )



shiny::shinyApp(ui = ui, server = server)

【讨论】：

这绝对是完美的，非常感谢。