通过单击 actionLink 在闪亮仪表板中折叠/展开框答案

【问题标题】：Collapse / Expand box in shinydashboard by clicking actionLink通过单击 actionLink 在闪亮仪表板中折叠/展开框
【发布时间】：2020-05-10 14:57:05
【问题描述】：

我对闪亮的 costum js-functions 有疑问，由于我对 js 知之甚少，所以我需要一点帮助。

我喜欢使用带有 actionLink 的框来折叠一个框并展开另一个框。我已经从@DeanAttali How to manually collapse a box in shiny dashboard 找到了一个有用的代码 sn-p，但这会导致切换，因为“以编程方式”单击了折叠/展开按钮。

下面是一个小例子，@DeanAttali 提供的功能也不能正常工作，我不知道为什么。

如果有人可以帮助我或给我提示，我会非常高兴。

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

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

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    useShinyjs(),
    extendShinyjs(text = jscode),
    actionLink("toggleBoxes", "Toggle boxes"),
    box(id="box1", title = "box 1", width = 2,
        collapsible = TRUE,
        actionLink("openBox2", "open box 2")),
    box(id="box2", title = "box 2", width = 2,
        collapsible = TRUE, collapsed = TRUE,
        actionLink("openBox1", "open box 1"))
  )
)

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

  observeEvent(input$openBox2, {
    js$collapseBox("box1")
    js$expandBox("box2")
  })
  observeEvent(input$openBox1, {
    js$expandBox("box1")
    js$collapseBox("box2")
  })
  observeEvent(input$toggleBoxes, {
    js$toggleBox("box1")
    js$toggleBox("box2")
  })
}

shinyApp(ui = ui, server = server)

【问题讨论】：

标签： javascript html r shiny shinyjs

【解决方案1】：

expandBox 的函数前面有一个 '$'，这就是为什么整个 JS 代码都不起作用的原因。当您删除“$”时，您可以切换这些框。下面的 JS 代码允许专门扩展/折叠框。我使用父类知道盒子是否折叠（折叠包括'collapsed-box'，展开不包括）。

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

jscode <- "
shinyjs.toggleBox = function(boxid) {
$('#' + boxid).closest('.box').find('[data-widget=collapse]').click();
};
shinyjs.expandBox = function(boxid) {
if (document.getElementById(boxid).parentElement.className.includes('collapsed-box')) {
$('#' + boxid).closest('.box').find('[data-widget=collapse]').click();
}};
shinyjs.collapseBox = 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),
    actionLink("toggleBoxes", "Toggle boxes"),
    box(id="box1", title = "box 1", width = 2,
        collapsible = TRUE,
        actionLink("openBox2", "open box 2")),
    box(id="box2", title = "box 2", width = 2,
        collapsible = TRUE, collapsed = TRUE,
        actionLink("openBox1", "open box 1"))
  )
)

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

  observeEvent(input$openBox2, {
    js$collapseBox("box1")
    js$expandBox("box2")
  })
  observeEvent(input$openBox1, {
    js$expandBox("box1")
    js$collapseBox("box2")
  })
  observeEvent(input$toggleBoxes, {
    js$toggleBox("box1")
    js$toggleBox("box2")
  })
}

shinyApp(ui = ui, server = server)

【讨论】：