Shinydashboard：在服务器端知道盒子是否折叠

Question

我想根据盒子是否折叠在服务器端进行一些操作。是否可以在服务器端知道闪亮仪表板中的框是否折叠？

[编辑]：

在浏览了warmoverflow提供的链接并通过以下link后，我想出了以下代码：

ui.R

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


ui <- shinyUI( dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(  

    useShinyjs(),
    extendShinyjs(text = jscode),

    box(id="box1", title = "BOX 1", collapsible = TRUE, collapsed = TRUE ),
    box(id="box2", title = "BOX2",  collapsible = TRUE, collapsed = TRUE),
    # a shiny element to display unformatted text
    verbatimTextOutput("results"),
    verbatimTextOutput("results1"),

    # # javascript code to send data to shiny server
    tags$script("
                document.getElementsByClassName('btn btn-box-tool')[0].onclick = function() {
                var number = document.getElementsByClassName('box-body')[0].style.display;
                Shiny.onInputChange('mydata', number);
                };
                "),

    tags$script("
                document.getElementsByClassName('btn btn-box-tool')[1].onclick = function() {
                var number = document.getElementsByClassName('box-body')[1].style.display;
                Shiny.onInputChange('mydata1', number);
                };
                "),

    actionButton("Collapse", "CollapseAll")

    )


    ))

server.R

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

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


server <- shinyServer(function(input, output, session) {

  output$results = renderPrint({
    input$mydata
  })

  output$results1 = renderPrint({
    input$mydata1
  })

  observeEvent(input$Collapse,{

    if(input$mydata == "none" || input$mydata == "")
    {
      js$collapse("box1")
    }


    if(input$mydata1 == "none" || input$mydata == "")
    {
      js$collapse("box2")
    }




  })

})

我想知道是否有更好的方法来做到这一点。而不是为每个框添加标签$ script是否可以更改代码，以便我们可以找到所有未折叠的框？

Answer 1

根据您的问题，我不确定您是要折叠所有展开的框还是要执行其他操作。您可以使用JS代码中的条件语句来解决第一个问题。同样，您可以实现一个按钮，以使用否定（if (!.....)）展开所有框。

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

jscode <- "
shinyjs.collapse = function(boxid) {
if (document.getElementById(boxid).parentElement.className.includes('collapsed-box')) {
$('#' + boxid).closest('.box').find('[data-widget=collapse]').click();
}
}"

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(  
    useShinyjs(),
    extendShinyjs(text = jscode),
    box(id="box1", title = "BOX1", collapsible = TRUE, collapsed = FALSE ),
    box(id="box2", title = "BOX2",  collapsible = TRUE, collapsed = FALSE),
    # a shiny element to display unformatted text
    actionButton("Collapse", "CollapseAll")
  ))

server <- shinyServer(function(input, output, session) {
  observeEvent(input$Collapse,{
    for (i in 1:2) {
      js$collapse(paste0('box',i))
    }
  })
})

shinyApp(ui = ui, server = server)