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

Question

问题： 我在 Shiny 应用程序中有一个 DataTable 对象，它使用子行，可以单击并展开以显示有关该行的其他信息。但是，当 table 最初加载时，我无法弄清楚如何拥有子行 visible/expanded。

应用最初加载时，子行为 hidden/closed，数据 table 如下所示：

但是，我希望 table 的初始加载能够模仿当我单击每一行（expands/displays 子行）的“+”符号时的样子。 . 例如：

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

# Load packages
library(shiny)
library(DT)

# Set up dummy data frame.
df = data.frame(
  expand_child_row = "&oplus;",
  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)

任何人都可以帮我弄清楚如何获取它，以便数据 table 的初始加载显示 all 子行（如第 2 行）图片)?

谢谢！

Answer 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 = "&oplus;",
    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)

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

Shiny/DT: Show Child Rows Upon Initial Load

javascript

r

datatables

shiny

dt