同步两个handontables的水平滚动 [英] Synchronize horizontal scrolling of two handsontables

问题描述

我想同步一个闪亮的应用程序中两个handontables的滚动. 我根据此处和此处. 我还尝试了 jquery.scrollSync库，下面是我的代码. 什么都行不通.

I'd like to synchronize the scrolling of two handsontables in a shiny app. I tried some attempts based on proposals given here and here. I also tried with the jquery.scrollSync library, my code is below. Nothing works.

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的尝试，但未成功.

Edit

Below is an unsuccessful attempt to use 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))

推荐答案

一种解决方案.我的情况很具体:第二个表只有一行，并且列数与第一个表相同，并且用户只滚动了第一个表.

A solution. My case is specific: the second table has only one row, with the same number of columns as the first table, and the user only scrolls the first table.

两个表的列宽也可以相同，但是下面的代码中没有做到这一点.

It is also possible to have the same column widths for the two tables, but this is not done in the code below.

如果滚动不是连续的，则逐行跳转会更好. 已解决: 请参见最后的编辑内容.

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))

为获得更好的对齐方式，请使用:

For a better alignment, use:

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);
};

这篇关于同步两个handontables的水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！