Shiny中的动态列数答案

【问题标题】：Dynamic number of columns in ShinyShiny中的动态列数
【发布时间】：2020-05-01 16:29:43
【问题描述】：

我正在使用fluidRows 编写一个闪亮的应用程序，我想在应用程序中创建动态数量的列。我可以使列正确显示和消失，但我不知道如何使它们相应地调整大小。期望的结果是，如果有 3 个列，则所有列的宽度为 4，如果有 2 个，则宽度为 6。可能的列数为 2、3 或 4，因此我不需要考虑更多的可变性。

我知道我可以通过renderUI 传递整个列集来实现。但是，这需要我在 server.R 中定义列的内容，我宁愿避免这样做。

以下是我的应用的最小代码示例：

library(shiny)
ui <- fluidPage(
    titlePanel("Dynamic Columns"),
    sidebarLayout(
        sidebarPanel(
            selectInput("column_count", "Number of Columns", 2:4, 2),
            submitButton("Go")
        ),
        mainPanel(
           fluidRow(
               column(3, "This is column 1"),
               column(3, "This is column 2"),
               conditionalPanel(
                   condition = "input.column_count >= 3",
                   column(3, "This is column 3")
               ),
               conditionalPanel(
                   condition = "input.column_count == 4",
                   column(3, "This is column 4")
               )
           )
        )
    )
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

【问题讨论】：

标签： r shiny

【解决方案1】：

一种方法可能是使用 javascript 更改 css 类。我编写了一个简短的 js 脚本，它使用选定的值（即 2、3、4）和最大 bootstrap.js 列（即 12）计算宽度：12 / value，然后使用新的宽度更新类： col-sm-*。我通过添加类target-column 明确命名了应该调整哪些列的大小。（您可以使用任何您喜欢的名称。确保它在 js 函数中更新。）。该事件由提交按钮触发。

这是您使用 javascript 的示例。（我将应用程序封装在 tagList 中）。

library(shiny)
ui <- tagList(
    fluidPage(
    titlePanel("Dynamic Columns"),
    sidebarLayout(
        sidebarPanel(
            selectInput("column_count", "Number of Columns", 2:4, 2),
            submitButton("Go")
        ),
        mainPanel(
           fluidRow(
               column(3, "This is column 1", class = "target-column"),
               column(3, "This is column 2", class = "target-column"),
               conditionalPanel(
                   condition = "input.column_count >= 3",
                   column(3, class = "target-column", "This is column 3")
               ),
               conditionalPanel(
                   condition = "input.column_count == 4",
                   column(3, class = "target-column", "This is column 4")
               )
           )
        )
    ),
    tags$script(
        type = "text/javascript",
            "
            const btn = document.querySelector('button[type=submit]');
            const input = document.getElementById('column_count');
            btn.addEventListener('click', function(event) {
                // calculate new width
                w = 12 / input.options[input.selectedIndex].value;
                console.log('new width', w);

                // update classes
                const columns = document.querySelectorAll('.target-column');
                columns.forEach(function(column) {
                    column.className = 'col-sm-' + w + ' target-column';
                });
            })
            "
        )
    )
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

【讨论】：