2017-08-02 2 views
0

Ich versuche eine Möglichkeit zu finden, zu überprüfen, ob eine Shiny Dashboard Box minimiert oder erweitert ist.So sehen Sie, ob eine glänzende Dashboard-Box von der Serverseite aus kollabiert

Durch die große Antwort von @daattali in How to manually collapse a box in shiny dashboard Lese Ich weiß, es möglich ist, die Box von der Serverseite zu reduzieren, indem das shinyjs Paket verwenden, wie in dem Code unten dargestellt

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) 

Durch die Benutzeroberfläche Inspektion HTML Ich sehe, dass die Antwort auf mein Problem durch den Zugriff auf die Icon-Klasse (um zu sehen, ob es Fa-Plus oder Fa-Fa-Minus ist) gelöst werden kann, aber ich habe keine Ahnung, wie das geht.

Jede Hilfe würde sehr geschätzt werden.

Prost

Antwort

0

Sie einen neuen Eingang anlegen können, dann ausgelöst, wenn der Benutzer das Feld zusammenbrechen, mit so etwas wie folgt aus:

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 
    ) 
) 
} 

Mit Ihnen Beispiel:

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) 

Sie ändern können true/false von 'collapse'/'expanded' in Funktion collapseInput wenn esaufrufenwenn du willst.

+0

Vielen Dank @Victorp, ich hätte das nie herausgefunden! –

Verwandte Themen