【问题标题】:How to see if a shiny dashboard box is collapsed from the server side如何查看闪亮的仪表板框是否从服务器端折叠
【发布时间】:2018-01-09 18:48:59
【问题描述】:

我正在尝试寻找一种方法来检查 Shiny Dashboard Box 是折叠还是展开。

通过阅读@daattali 在How to manually collapse a box in shiny dashboard 中的精彩回复,我知道可以使用shinyjs 包从服务器端折叠盒子,如下面的代码所示

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)  

通过检查 UI HTML,我发现我的问题的答案可以通过访问图标类来解决(查看它是 fa fa-plus 还是 fa fa-minus),但我不知道该怎么做。

任何帮助将不胜感激。

干杯

【问题讨论】:

    标签: r shiny shinydashboard shinyjs


    【解决方案1】:

    您可以创建一个新输入,在用户折叠框时触发,如下所示:

    collapseInput <- function(inputId, boxId) {
      tags$script(
        sprintf(
          "$('#%s').closest('.box').on('hidden.bs.collapse', function () {Shiny.onInputChange('%s', true);})",
          boxId, inputId
        ),
        sprintf(
          "$('#%s').closest('.box').on('shown.bs.collapse', function () {Shiny.onInputChange('%s', false);})",
          boxId, inputId
        )
      )
    }
    

    以你为例:

    library(shiny)
    library(shinydashboard)
    library(shinyjs)
    
    jscode <- "
    shinyjs.collapse = function(boxid) {
    $('#' + boxid).closest('.box').find('[data-widget=collapse]').click();
    }
    "
    collapseInput <- function(inputId, boxId) {
      tags$script(
        sprintf(
          "$('#%s').closest('.box').on('hidden.bs.collapse', function () {Shiny.onInputChange('%s', true);})",
          boxId, inputId
        ),
        sprintf(
          "$('#%s').closest('.box').on('shown.bs.collapse', function () {Shiny.onInputChange('%s', false);})",
          boxId, inputId
        )
      )
    }
    
    
    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")),
        collapseInput(inputId = "iscollapsebox1", boxId = "box1"),
        verbatimTextOutput(outputId = "res")
      )
    )
    
    server <- function(input, output) {
      observeEvent(input$bt1, {
        js$collapse("box1")
      })
      observeEvent(input$bt2, {
        js$collapse("box2")
      })
    
      output$res <- renderPrint({
        input$iscollapsebox1
      })
    }
    
    shinyApp(ui, server)  
    

    如果你愿意,你可以在函数collapseInput 调用Shiny.onInputChange 时将true/false 更改为'collapse'/'expanded'

    【讨论】:

    • 非常感谢@Victorp,我永远也想不通!
    猜你喜欢
    • 2021-09-05
    • 2015-11-13
    • 1970-01-01
    • 2020-05-10
    • 2018-09-25
    • 1970-01-01
    • 2016-01-11
    • 2018-05-30
    • 2015-04-22
    相关资源
    最近更新 更多