shiny - 如何使用 shinyjs 修改多个元素的类

Question

我有一个 Shiny 的仪表板，显示各种元素(highchart 和 ggplot 图、数据表)。用户可以按一些变量进行过滤以创建数据的“groupA”和“groupB”。GroupA 最初是所有数据，GroupB 最初是空的。当用户打开仪表板时，他们将看到 GroupA 的单列元素。通过过滤他们能够将一些数据移动到 groupB，这应该显示在新的第二列中。因此，A 组和 B 组中的每一个在页面上都有相同的元素，只是应用了不同的过滤器。如果 groupB 变空， View 将再次切换到 groupA 元素的单列。GroupA 的列应根据需要调整大小以覆盖整个宽度或宽度的一半。我很难让它以一种在代码上经济的方式工作。

答案here使用元素 ID 来显示和隐藏特定元素。这可行，但仪表板有很多页面，每页有很多元素。因此，这将涉及大量额外的代码。

我认为只需将每个元素放入一个 div 中，并将其类与组相对应，我就可以应用相同的想法，除了使用 CSS 选择器并一次性捕获所有元素。但这是行不通的。 CSS 选择器似乎没问题，例如当我在控制台的 jQuery 语句中使用它时，我得到了预期的元素。

为了简单起见，下面的代码只是用按钮来显示/隐藏 groupB 的问题的代表，而不是依赖于数据。

library(shiny)
library(shinyjs)
library(highcharter)

ui <- fluidPage(
  useShinyjs(),
  actionButton("hide","Hide Group B"),
  actionButton("show","Show Group B"),
  fluidRow(
    div(class = "groupA col-sm-12", highchartOutput("plot1A")),
    div(class = "groupB hidden",    highchartOutput("plot1B"))
  ),
  fluidRow(
    div(class = "groupA col-sm-12", highchartOutput("plot2A")),
    div(class = "groupB hidden",    highchartOutput("plot2B"))
  )
)

server <- function(input, output, session) {
  output$plot1A <- output$plot2A <- renderHighchart({hchart(iris$Sepal.Length)})
  output$plot1B <- output$plot2B <- renderHighchart({hchart(iris$Petal.Length)})
  observeEvent(input$show, {
    removeClass(selector = "div.groupA", "col-sm-12")
    addClass(   selector = "div.groupA", "col-sm-6")
    removeClass(selector = "div.groupB", "hidden")
    addClass(   selector = "div.groupB", "col-sm-6")
  })
  observeEvent(input$hide, {
    removeClass(selector = "div.groupA", "col-sm-6")
    addClass(   selector = "div.groupA", "col-sm-12")
    removeClass(selector = "div.groupB", "col-sm-6")
    addClass(   selector = "div.groupB", "hidden")
  })
}

shinyApp(ui, server)

任何人都可以建议如何使这项工作有效，或者甚至是可以有效地满足我需要的不同方法吗？

Answer 1

问题出在 removeClass 和 addClass 上，第一个位置参数是 id，而不是 class。

要让它作为你要添加/删除的类，你需要写出参数名class = xxx:

removeClass(selector = ".groupA", class = "col-sm-12")

添加所有 class 参数后，您会看到它正常工作，但仍未显示绘图。这是因为输出图在开始时没有高度。

1. 默认情况下，shiny 不会渲染隐藏(高度为 0)的元素。您需要告诉 shiny 在 block 显示 后渲染它。要触发它，您需要通过 javascript 触发 element“显示”事件，但我们可以从 shinyjs 中完成。

2. 隐藏元素后，您会看到 groupB 被隐藏，但 groupA 不会扩展该区域以覆盖整个宽度。这是因为 highcharter 不知道您进行了更改。您需要通过 window“resize”事件告诉它。

完整代码如下:

library(shiny)
library(shinyjs)
library(highcharter)

ui <- fluidPage(
    useShinyjs(),
    actionButton("hide","Hide Group B"),
    actionButton("show","Show Group B"),
    fluidRow(
        div(class = "groupA col-sm-12", highchartOutput("plot1A")),
        div(class = "groupB hidden",    highchartOutput("plot1B"))
    ),
    fluidRow(
        div(class = "groupA col-sm-12", highchartOutput("plot2A")),
        div(class = "groupB hidden",    highchartOutput("plot2B"))
    )
)

server <- function(input, output, session) {
    output$plot1A <- output$plot2A <- renderHighchart({hchart(iris$Sepal.Length)})
    output$plot1B <- output$plot2B <- renderHighchart({hchart(iris$Petal.Length)})
    observeEvent(input$show, {
        removeClass(selector = ".groupA", class = "col-sm-12")
        addClass(   selector = ".groupA", class = "col-sm-6")
        removeClass(selector = ".groupB", class = "hidden")
        addClass(   selector = ".groupB", class = "col-sm-6")
        show(selector = ".groupB")
    })
    observeEvent(input$hide, {
        removeClass(selector = ".groupA", class = "col-sm-6")
        addClass(   selector = ".groupA", class = "col-sm-12")
        removeClass(selector = ".groupB", class = "col-sm-6")
        addClass(   selector = ".groupB", class = "hidden")
        runjs("$(window).trigger('resize')")
    })
}

shinyApp(ui, server)