3

我正在尝试使用 SweetAlert2 弹出窗口而不是传统的 JS 弹出窗口。期待一个示例来实现与我是 JS 概念的新手一样的效果。访问 - https://sweetalert2.github.io/ 在实际场景中，我想在双击数据表行时使用这些 SweetAlert2 而不是 JS Alerts。

带有 JS 弹出窗口的代码：

library(shiny)
library(shinydashboard)
library(DT)

ui <- shinyUI(

dashboardPage (
    dashboardHeader(title="Report"),
    dashboardSidebar(sidebarMenu(menuItem("Table",tabName="Table"))),
    dashboardBody(      
        tabItems(
        tabItem(tabName = "Table",
            DT::dataTableOutput("DataTable")    
        )
   ))

))

server <- shinyServer(function(input, output) {
     output$DataTable <- DT::renderDataTable({
          datatable(iris,rownames=FALSE,selection = 'single',
                    options = list(
                              searching = FALSE,ordering=FALSE,
                              dom = 'Bfrtip',
                              buttons = c('copy','excel', 'pdf', 'print', 'colvis'),
                              columnDefs = list(list(visible=FALSE, targets=c(2))
          ),
     rowCallback = JS(
          "function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {",
          "var full_text = aData[2]",
          # Tooltip for the rows
          "$('td:eq(1)', nRow).attr('title', full_text);",
          # Showing a hand as a cursor
          "$('td:eq(1)', nRow).css('cursor','pointer');",
          "$('td:eq(1)', nRow).css('font-weight','bold');",
          "}")
      ),
      #On double Click show Alert Message
     callback = JS('
          table.on("dblclick.dt","tr", function() {
          var data=table.row(this).data();
          alert("You clicked on "+data[4]+"\'s row");})
          '))
})
})

shinyApp(ui,server)
4

1 回答 1

1

我不熟悉那个 JS 库，无论如何这是我认为应该工作的。

用户界面

首先，您必须将 js 脚本添加到您的页面（注意路径，它应该是文件夹CDN内的文件或/www/文件：

tags$head(HTML("<script type='text/javascript' src='path/to/sweetAlert2.js'></script>"))

服务器.R

然后在你的回调中你可以调用库函数：

callback = JS('
    table.on("dblclick.dt","tr", function() {
        var data=table.row(this).data();
        swal({
            title: "Click!",
            text: "You clicked on "+data[4]+"\'s row",
            type: "success",
            confirmButtonText: "Cool"
        })
    )')

希望这可以帮助

于 2017-02-13T13:14:39.113 回答