如何以编程方式折叠闪亮仪表板中的框 [英] How to programmatically collapse a box in shiny dashboard

问题描述

我尝试在输入更改时以编程方式折叠一个框。似乎我只需要将类"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)

推荐答案

我以前从未尝试过使用方框，因此请记住，我的答案可能非常狭隘。但我快速查看了一下，看起来简单地在框上设置"折叠框"类实际上并不会使框折叠。因此，我的下一个想法是通过编程实际单击折叠按钮。

正如您所说，没有与框相关联的标识符，所以我的解决方案是向box添加一个id参数。我最初预计它是框的id，但实际上它看起来像是给了框内的一个元素。没问题-这只是意味着为了选择折叠按钮，我们需要获取id，查找DOM树以找到box元素，然后向下查找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)

这篇关于如何以编程方式折叠闪亮仪表板中的框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！