同步两个handsontables的水平滚动

Question

我想在一个闪亮的应用程序中同步两个掌上电脑的滚动。 我根据here 和here 给出的建议尝试了一些尝试。 我也试过jquery.scrollSync library，我的代码如下。 没有任何效果。

library(shiny)
library(rhandsontable)

ui = shinyUI(fluidPage(

  tags$head(tags$script(src = "http://trunk.xtf.dk/Project/ScrollSync/jquery.scrollSync.js")),

  sidebarLayout(

    sidebarPanel(),

    mainPanel(

      rHandsontableOutput("hot", width = 350),
      rHandsontableOutput("hot2", width = 350),

      singleton(
        tags$script(HTML('$("#hot").addClass("scrollable");'))
      ),
      singleton(
        tags$script(HTML('$("#hot2").addClass("scrollable");'))
      ),
      singleton(
        tags$script(HTML('$(".scrollable").scrollSync();'))
      )

    )
  )
))

server = shinyServer(function(input, output, session) {

  values = reactiveValues()

  data = reactive({
    if (!is.null(input$hot)) {
      DF = hot_to_r(input$hot)
    } else {
      if (is.null(values[["DF"]]))
        DF = mtcars[1:3,]
      else
        DF = values[["DF"]]
    }
    values[["DF"]] = DF
    DF
  })

  output$hot <- renderRHandsontable({
    DF = data()
    if (!is.null(DF))
      rhandsontable(DF, stretchH = "all")
  })

  output$hot2 <- renderRHandsontable({
      rhandsontable(mtcars[1:3,], stretchH = "all")
  })

})


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

编辑

以下是使用scrollViewportTo的不成功尝试。

library(shiny)
library(rhandsontable)

jscode <- "
$('#scroll').on('click', function () {
  $('#hot').scrollViewportTo(1,5);
});
"

ui = shinyUI(fluidPage(

  sidebarLayout(

    sidebarPanel(

      actionButton("scroll", "Scroll")

    ),

    mainPanel(

      rHandsontableOutput("hot", width = 350),

      singleton(
        tags$script(HTML(jscode))
      )

    )
  )
))

server = shinyServer(function(input, output, session) {

  values = reactiveValues()

  data = reactive({
    if (!is.null(input$hot)) {
      DF = hot_to_r(input$hot)
    } else {
      if (is.null(values[["DF"]]))
        DF = mtcars[1:3,]
      else
        DF = values[["DF"]]
    }
    values[["DF"]] = DF
    DF
  })

  output$hot <- renderRHandsontable({
    DF = data()
    if (!is.null(DF))
      rhandsontable(DF, stretchH = "all")
  })

})


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

Answer 1

解决方案。我的情况很具体：第二个表只有一行，列数与第一个表相同，用户只滚动第一个表。

也可以让两个表的列宽相同，但是下面的代码没有这样做。

如果滚动不是连续的，如果是逐行跳转就更好了。 已解决： 见最后编辑。

library(shiny)
library(rhandsontable)

js_getViewport <- "
$(document).ready(setTimeout(function() {
  var hot_instance = HTMLWidgets.getInstance(hot).hot
  hot_instance.updateSettings({width: hot_instance.getSettings('width').width + Handsontable.Dom.getScrollbarWidth(hot)})
  var colPlugin = hot_instance.getPlugin('autoColumnSize');
  hot_instance.addHook('afterScrollHorizontally', function(){changeViewport2(colPlugin)});
}, 2000)
)
"
js_setViewport <- "
function changeViewport2 (colPlugin) {
  var colStart = colPlugin.getFirstVisibleColumn();
  var hot2_instance = HTMLWidgets.getInstance(hot2).hot;
  hot2_instance.scrollViewportTo(0, colStart, false, false);
};
"

ui = shinyUI(fluidPage(
  tags$head(tags$script(HTML(js_getViewport)),
            tags$script(HTML(js_setViewport))),

  sidebarLayout(

    sidebarPanel(

    ),

    mainPanel(

      rHandsontableOutput("hot",  height=200),

      br(),

      rHandsontableOutput("hot2", height=100)

    )
  )
))

server = shinyServer(function(input, output, session) {

  values = reactiveValues()

  data = reactive({
    if (!is.null(input$hot)) {
      DF = hot_to_r(input$hot)
    } else {
      if (is.null(values[["DF"]]))
        DF = mtcars[,]
      else
        DF = values[["DF"]]
    }
    values[["DF"]] = DF
    DF
  })

  rowHeaderWidth <- reactive({
    max(100,floor(max(nchar(rownames(values[["DF"]])))*8))
  })

  output$hot <- renderRHandsontable({
    DF = data()
    if (!is.null(DF))
      rhandsontable(DF, stretchH = "none", useTypes=TRUE,
                    width = 500, 
                    rowHeaderWidth = rowHeaderWidth())
  })

  output$hot2 <- renderRHandsontable({
      rhandsontable(mtcars[1,], stretchH = "none", useTypes=TRUE,
                    width = 500,
                    rowHeaderWidth = rowHeaderWidth())
  })


})


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

编辑：

为了更好的对齐，使用：

js_setViewport <- "
function changeViewport2 (colPlugin) {
  var colStart = colPlugin.getFirstVisibleColumn();
  var hot2_instance = HTMLWidgets.getInstance(hot2).hot;
  hot2_instance.scrollViewportTo(0, colStart, false, false);
  //
  var hot_instance = HTMLWidgets.getInstance(hot).hot;
  var rowStart = hot_instance.getPlugin('autoRowSize').getFirstVisibleRow();
  hot_instance.scrollViewportTo(rowStart, colStart, false, false);
};