[英]on row double click Image pop ups in a datatable in R Shiny
I am looking to have a Image pop up on row double click in a data table. 我希望在数据表中的行上双击弹出一个图像。 The current code I have written displays alert message on double clicking the row.
我编写的当前代码在双击该行时显示警告消息。 I would like to replace that alert message with a Image.
我想用图像替换该警报消息。 Suggestions to achieve the same.
建议实现相同。
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)
Used "SweetAlert" instead of Traditional JS Alert Pop ups to add Image on Data Table row click. 使用“ SweetAlert”代替传统的JS Alert弹出窗口在“数据表”行单击上添加图像。
Please download the Sweet Alert plugin JS and CSS file from this link- https://github.com/t4t5/sweetalert and place the two files in www folder. 请从此链接https://github.com/t4t5/sweetalert下载Sweet Alert插件JS和CSS文件,并将这两个文件放在www文件夹中。 File Location - sweetalert-master\\dist
文件位置-sweetalert-master \\ dist
Here is final code: 这是最终代码:
library(shiny)
library(shinydashboard)
library(DT)
ui <- shinyUI(
dashboardPage (
dashboardHeader(title="Report"),
dashboardSidebar(sidebarMenu(menuItem("Table",tabName="Table"))),
dashboardBody(
# JS Script and CSS for SweetAlert Plugin
tags$head(HTML("<script type='text/javascript' src='sweetalert.min.js'> </script>")),
tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "sweetalert.css")
),
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();
swal({
title: "Sweet!",
text: "Here a custom image.",
imageUrl: "http://wallpaper-gallery.net/images/high-resolution- image/high-resolution-image-2.jpg",
imageSize: "400x300"
});
}
)
'))
})
})
shinyApp(ui,server)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.