将数据表放入 shinyjs 模式答案

【问题标题】：Putting a datatable in a shinyjs modal将数据表放入 shinyjs 模式
【发布时间】：2018-10-11 09:46:54
【问题描述】：

我将 Shiny 与 Shiny Semantic 库一起使用，以使应用看起来更漂亮。使用 showModal(modalDialog()) 的标准 Shiny 弹出消息不适用于语义 UI，所以我求助于 shinyjs 来使用一些 javascript 来允许模态。使用全局定义的 js 模态，如何将数据表集成到模态中？这是一个最小的例子：

library(shiny)
library(shinyjs)
library(shiny.semantic)
library(DT)

modal.js = "$('.ui.modal')
.modal('show')
;"

server <- function(input, output, session) {
  output$my_table = DT::renderDataTable({
    head(iris)
  })
  observeEvent(input$open_modal, {
    runjs(modal.js)
  })
}

ui <- semanticPage(
  suppressDependencies("bootstrap"),
  useShinyjs(),
  div(class = "ui modal",
      div(class="header", 'Modal header'),
      p('Placing DT::dataTableOutput("my_table") here fails.
         If it was displayed, I would select a row and return the value to a reactiveValue.')
  ),
  div(class = "ui basic button action-button", id = "open_modal", "Open modal ui"),
  div(class = "ui raised segment", DT::dataTableOutput("my_table"))
)

shinyApp(ui, server, options = list(launch.browser = TRUE))

【问题讨论】：

标签： r shiny shinyjs

【解决方案1】：

我今天遇到了同样的问题，并设法找到解决此问题的方法。当模式在shiny.semantic 中打开时，数据表输出仍被归类为不可见。要解决此问题，您只需在 JavaScript 中添加额外的一行：

$('#my_table').show().trigger('shown');

如果您想在关闭时再次隐藏它，则需要添加更多 JS，但在 UI 中使用 tags$script() 而不是在服务器中可能会更好。

更新的应用程序：

library(shiny)
library(shinyjs)
library(shiny.semantic)
library(DT)

modal.js <- "$('.ui.modal').modal('show');
             $('#my_table').show().trigger('shown');"

server <- function(input, output, session) {
  output$my_table = DT::renderDataTable(head(iris))
  observeEvent(input$open_modal, runjs(modal.js))
}

ui <- semanticPage(
  suppressDependencies("bootstrap"),
  useShinyjs(),
  div(
    class = "ui modal",
    div(class = "header", "Modal header"),
    div(class = "content", div(class = "ui raised segment", DT::dataTableOutput("my_table")))
  ),
  div(class = "ui basic button action-button", id = "open_modal", "Open modal ui")
)

shinyApp(ui, server, options = list(launch.browser = TRUE))

【讨论】：

【解决方案2】：

放入你的dataTableOutput

output$my_table = DT::renderDataTable({
    datatable(head(iris), class = "compact", escape = FALSE)   })

【讨论】：