Question

我在使用Costum js函数时遇到了问题，因为我对js的了解很少，所以我可以使用一些帮助。

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

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

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

<size android:width="40dp" />

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

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

1 个答案: