如何手动折叠闪亮仪表板中的框

时间:2015-08-19 20:19:48

标签: shiny shinydashboard shinyjs

我正在尝试在发生某些事情时手动折叠一个方框。似乎我只需要将类"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)

1 个答案:

答案 0 :(得分:12)

我之前从未尝试过使用过盒子,所以请记住,我的回答可能非常狭隘。但我快速浏览一下,看起来简单地设置盒子上的“折叠盒子”类并不会让盒子崩溃。所以我的下一步想法是以编程方式实际点击折叠按钮。

正如您所说,没有与该框相关联的标识符,因此我的解决方案是向id添加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)