同步Shiny中两个Handsontables的垂直滚动

huangapple go评论71阅读模式
英文:

Synchronize vertical scrolling of two handsontables in shiny

问题

I'd like to synchronize the vertical scroll of two handsontables through the shiny app (using the rhandsontable library). I'm aware that there might be some HTML and CSS code involved, but I'm not experienced in those two coding languages.

这段文本的中文翻译如下:

我想通过shiny应用程序(使用rhandsontable库)同步两个handsontable的垂直滚动。我知道可能涉及一些HTML和CSS代码,但我对这两种编程语言不熟悉。

英文:

I'd like to synchronize the vertical scroll of two handsontables through the shiny app (using the rhandsontable library). I'm aware that there might be some HTML and CSS code involved, but I'm not experienced in those two coding languages.

Here is an example of the code:

library(shiny)
library(shinydashboard)
library(rhandsontable)

ui = dashboardPage(skin="red",
                   dashboardHeader(title="App"),
                   dashboardSidebar(),
                   dashboardBody(
                     div(style="white-space:nowrap;overflow-x:auto;overflow-y:hidden",
                         div(style="display:inline-block",
                             rHandsontableOutput("A")
                         ),
                         div(style="display:inline-block;margin-left:35px",
                             rHandsontableOutput("B")
                         )
                     )
                   )
)

server = shinyServer(function(input, output, session){
  
  A = as.data.frame(matrix(rnorm(1600),40,40))
  B = as.data.frame(matrix(rnorm(1600),40,40))
  
  output$A <- renderRHandsontable({
    rhandsontable(A,
                  height = 500,
                  width = 1000,)
  })
  output$B <- renderRHandsontable({
    rhandsontable(B,
                  height = 500,
                  width = 1000,)
  })
  
})


runApp(list(ui=ui, server=server))

There is supposed to be a solution here for the horizontal scroll sync, but when I run the example code it doesn't work. Also, here is a solution for the horizontal scroll but using DataTables and not for handsontables. (I tried changing the code to get vertical scroll sync but without success).

答案1

得分: 1

以下是您提供的代码的翻译部分:

library(shiny)
library(shinydashboard)
library(rhandsontable)

ui = dashboardPage(skin="red",
                   dashboardHeader(title="App"),
                   dashboardSidebar(),
                   dashboardBody(
                     tags$div(
                       style = "max-height:500px; overflow-y: scroll; overflow-x: scroll;",
                       splitLayout(
                         rHandsontableOutput("A"),
                         rHandsontableOutput("B")
                       )
                     )
                   )
)

server = shinyServer(function(input, output, session){
  
  A = as.data.frame(matrix(rnorm(1600),40,40))
  B = as.data.frame(matrix(rnorm(1600),40,40))
  
  output$A <- renderRHandsontable({
    rhandsontable(A,
                  height = 500,
                  width = 1000)
  })
  output$B <- renderRHandsontable({
    rhandsontable(B,
                  height = 500,
                  width = 1000)
  })
  
})


runApp(list(ui=ui, server=server))
library(shiny)
library(shinydashboard)
library(rhandsontable)

js <- "
var myInterval = setInterval(function() {
  var containers = $('#A .ht_master .wtHolder, #B .ht_master .wtHolder');
  if (containers.length === 2) {
    clearInterval(myInterval);
    containers.scrollsync();
  }
}, 200);
"

css <- "
.ht_master .wtHolder {overflow: scroll !important}
"

ui = dashboardPage(skin="red",
                   dashboardHeader(title="App"),
                   dashboardSidebar(),
                   dashboardBody(
                     tags$head(
                       tags$script(src = "https://cdn.jsdelivr.net/gh/zjffun/jquery-ScrollSync/dist/jquery.scrollsync.js"),
                       tags$script(HTML(js)),
                       tags$style(HTML(css))
                     ),
                     div(#style="white-space:nowrap;overflow-x:auto;overflow-y:hidden",
                         div(style="display:inline-block", class = "ysync",
                             rHandsontableOutput("A")
                         ),
                         div(style="display:inline-block;margin-left:35px", class = "ysync",
                             rHandsontableOutput("B")
                         )
                     )
                   )
)

server = shinyServer(function(input, output, session){
  
  A = as.data.frame(matrix(rnorm(1600),40,40))
  B = as.data.frame(matrix(rnorm(1600),40,40))
  
  output$A <- renderRHandsontable({
    rhandsontable(A,
                  height = 500,
                  width = 1000)
  })
  output$B <- renderRHandsontable({
    rhandsontable(B,
                  height = 500,
                  width = 1000)
  })
  
})

runApp(list(ui=ui, server=server))

请注意,代码中的 HTML 实体已被转换为正常的文本。如果需要进一步的帮助或有其他问题,请随时提出。

英文:

Here is a way but the problem is that there are multiple horizontal scrollbars.

library(shiny)
library(shinydashboard)
library(rhandsontable)

ui = dashboardPage(skin=&quot;red&quot;,
                   dashboardHeader(title=&quot;App&quot;),
                   dashboardSidebar(),
                   dashboardBody(
                     tags$div(
                       style = &quot;max-height:500px; overflow-y: scroll; overflow-x: scroll;&quot;,
                       splitLayout(
                         rHandsontableOutput(&quot;A&quot;),
                         rHandsontableOutput(&quot;B&quot;)
                       )
                     )
                   )
)

server = shinyServer(function(input, output, session){
  
  A = as.data.frame(matrix(rnorm(1600),40,40))
  B = as.data.frame(matrix(rnorm(1600),40,40))
  
  output$A &lt;- renderRHandsontable({
    rhandsontable(A,
                  height = 500,
                  width = 1000)
  })
  output$B &lt;- renderRHandsontable({
    rhandsontable(B,
                  height = 500,
                  width = 1000)
  })
  
})


runApp(list(ui=ui, server=server))

Edit: with jQueryScroll

library(shiny)
library(shinydashboard)
library(rhandsontable)

js &lt;- &quot;
var myInterval = setInterval(function() {
  var containers = $(&#39;#A .ht_master .wtHolder, #B .ht_master .wtHolder&#39;);
  if (containers.length === 2) {
    clearInterval(myInterval);
    containers.scrollsync();
  }
}, 200);
&quot;

css &lt;- &quot;
.ht_master .wtHolder {overflow: scroll !important}
&quot;

ui = dashboardPage(skin=&quot;red&quot;,
                   dashboardHeader(title=&quot;App&quot;),
                   dashboardSidebar(),
                   dashboardBody(
                     tags$head(
                       tags$script(src = &quot;https://cdn.jsdelivr.net/gh/zjffun/jquery-ScrollSync/dist/jquery.scrollsync.js&quot;),
                       tags$script(HTML(js)),
                       tags$style(HTML(css))
                     ),
                     div(#style=&quot;white-space:nowrap;overflow-x:auto;overflow-y:hidden&quot;,
                         div(style=&quot;display:inline-block&quot;, class = &quot;ysync&quot;,
                             rHandsontableOutput(&quot;A&quot;)
                         ),
                         div(style=&quot;display:inline-block;margin-left:35px&quot;, class = &quot;ysync&quot;,
                             rHandsontableOutput(&quot;B&quot;)
                         )
                     )
                   )
)

server = shinyServer(function(input, output, session){
  
  A = as.data.frame(matrix(rnorm(1600),40,40))
  B = as.data.frame(matrix(rnorm(1600),40,40))
  
  output$A &lt;- renderRHandsontable({
    rhandsontable(A,
                  height = 500,
                  width = 1000,)
  })
  output$B &lt;- renderRHandsontable({
    rhandsontable(B,
                  height = 500,
                  width = 1000,)
  })
  
})

runApp(list(ui=ui, server=server))

huangapple
  • 本文由 发表于 2023年6月6日 04:37:18
  • 转载请务必保留本文链接:https://go.coder-hub.com/76409838.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定