折叠/展开 框 在闪亮的仪表板中通过单击操作链接

Question

我在shiny中使用costum js函数有问题，由于我对js知之甚少，所以我可以使用一些帮助。

我喜欢使用带有 actionLink 的框来折叠一个框并展开另一个框。我已经从@DeanAttali中找到了一个有用的代码片段 如何手动折叠闪亮仪表板中的框，但这会导致切换，因为折叠/展开按钮是"以编程方式"单击的。

下面是一个小例子，其中@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)

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)