Shiny/DT：在初始加載時顯示子行

Question

問題：我在使用子行的 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)

誰能幫我弄清楚如何獲取它，以便數據表的初始加載顯示所有子行（如第二張圖片）？

謝謝！

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 = "⊕",
    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)