我希望多個表具有頂部和底部水平滾動。我在應用程式中找到了使用 jQuery 的解決方案，但是，它僅適用于第一個表。當我指定（如圖所示并分別使用每個函式）時，它不適用于 table2 或 table3，僅適用于 table1。
我對 jQuery 不熟悉，所以我不知道 jQuery 腳本是否存在問題或其他問題。我還注意到這些表不尊重指定的結構，并假設這兩個問題之間存在聯系。有什么建議么？
library(formattable)
library(shiny)
js <- "
$(document).ready(function(){
$('#table1, #table2, #table3').on('shiny:value', function(e){
setTimeout(function(){
$('#table1 table, #table2 table, #table3 table').wrap('<div id=\"scrolldiv\"></div>');
$('#scrolldiv').doubleScroll({
contentElement: $('table'),
scrollCss: {
'overflow-x': 'scroll',
'overflow-y': 'hidden'
},
contentCss: {
'overflow-x': 'scroll',
'overflow-y': 'hidden'
},
resetOnWindowResize: true
});
setTimeout(function(){$(window).resize();}, 100);
}, 0);
});
});
"
CSS <- "
.doubleScroll-scroll-wrapper {
clear: both;
}
"
ui <- fluidPage(
tags$head(
tags$script(src = "jquery.doubleScroll.js"),
tags$script(HTML(js)),
tags$style(HTML(CSS))
),
fluidRow(column(2,formattableOutput("table1"))),
fluidRow(column(2,formattableOutput("table2"))),
fluidRow(column(2,formattableOutput("table3")))
)
server <- function(input, output) {
output$table1 <- renderFormattable({
formattable(mtcars)
})
output$table2 <- renderFormattable({
formattable(mtcars)
})
output$table3 <- renderFormattable({
formattable(mtcars)
})
}
shinyApp(ui = ui, server = server)
uj5u.com熱心網友回復：
這僅適用于第一個表，因為您使用相同的 id scrolldiv。HTML 中不允許有重復的 ID。使用這個 JS 代碼：
js <- "
$(document).ready(function(){
$('#table1, #table2, #table3').on('shiny:value', function(e){
var id = this.id;
var scrolldiv = 'scrolldiv' id;
var div = '<div id=\"' scrolldiv '\"></div>';
var $this = $(this);
setTimeout(function(){
$this.find('table').wrap(div);
$('#' scrolldiv).doubleScroll({
contentElement: $('table'),
scrollCss: {
'overflow-x': 'scroll',
'overflow-y': 'hidden'
},
contentCss: {
'overflow-x': 'scroll',
'overflow-y': 'hidden'
},
resetOnWindowResize: true
});
setTimeout(function(){$(window).resize();}, 100);
}, 0);
});
});
"
在下面的 GIF 中，我使用：
fluidRow(
column(4, formattableOutput("table1")),
column(4, formattableOutput("table2")),
column(4, formattableOutput("table3"))
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/493537.html