如何以编程方式折叠闪亮仪表板中的框

Question

我正在尝试在输入更改时以编程方式折叠框。看来我只需要将 class "collapsed-box" 添加到框中，我尝试使用 shinyjs 函数 addClass，但我不知道该怎么做，因为一个框没有'有一个 id。这里是简单的基本代码，可用于测试可能的解决方案：

library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
      box(collapsible = TRUE,p("Test")),
      actionButton("bt1", "Collapse")
  )
)

server <- function(input, output) {
  observeEvent(input$bt1, {
    # collapse the box
  })
}

shinyApp(ui, server)

Answer 1

我以前从未尝试过使用盒子，所以请记住，我的回答可能非常狭隘。但我快速看了一下，看起来只是在盒子上设置 "collapsed-box" class 并不能真正使盒子折叠。因此，我的下一个想法是以编程方式实际单击折叠按钮。

正如您所说，没有与盒子关联的标识符，所以我的解决方案是向 box 添加一个 id 参数。我最初希望它是框的 id，但它看起来像是将 id 赋予了框内的元素。没问题 - 这只是意味着为了 select 折叠按钮，我们需要获取 id，查找 DOM 树以找到框元素，然后回头查看 DOM树找到按钮。

我希望我说的一切都是有道理的。即使没有，这段代码应该仍然有效，并希望能让事情变得更清楚:)

library(shiny)
library(shinydashboard)
library(shinyjs)

jscode <- "
shinyjs.collapse = function(boxid) {
$('#' + boxid).closest('.box').find('[data-widget=collapse]').click();
}
"

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    useShinyjs(),
    extendShinyjs(text = jscode),
    actionButton("bt1", "Collapse box1"),
    actionButton("bt2", "Collapse box2"),
    br(), br(),
    box(id = "box1", collapsible = TRUE, p("Box 1")),
    box(id = "box2", collapsible = TRUE, p("Box 2"))
  )
)

server <- function(input, output) {
  observeEvent(input$bt1, {
    js$collapse("box1")
  })
  observeEvent(input$bt2, {
    js$collapse("box2")
  })
}

shinyApp(ui, server)

如何以编程方式折叠闪亮仪表板中的框

How to programmatically collapse a box in shiny dashboard

shiny

shinydashboard

shinyjs