根据用户事件 R/DT/Shiny 滚动到行,而不使用分页



我试图让数据表 (DT( 将鼠标悬停在地图上的某个点上时滚动到正确的行/行。我可以做一些事情,比如选择该行,但我无法弄清楚如何使数据表 Y 滚动到正确的条目。我正在尝试在没有分页的情况下执行此操作,因为我的数据表使用子集并且总体上没有那么大。

我在 R/Shiny/DT 中这样做,我的 JavaScript 经验是 0。这篇文章似乎一直在尝试做同样的事情,除了该示例是初始表加载而不是对初始加载表之外的事件做出反应。我不明白如何使滚动的表格对用户事件做出反应。

R Shiny - 使用 javascript 回调滚动到给定的数据表行

该产品供内部(学术(使用,以加快数据操作和错误检查速度。

#Attempt at datatable scrollable, workable example
library(shiny)
library(leaflet)
library(DT)
data("mtcars")
samp_data = cbind(mtcars,mtcars,mtcars)
samp_data[2] = 'just some string thats often quite long and will take multiple lines on a table draw, 
one problem I have is that if I do add "scroller = T" to the options list in the renderDT call,
is that this line will collapse into a single line and create a very long horizonal entry.'
ui = fillPage(
fillRow( flex = 1, width = '100%', height = '80%',
leafletOutput("map", width = '100%', height = "100%")
),

fillRow( width = '100%', height='20%', flex = 1,
# style = "overflow-y: auto; overflow-x: auto;",
div( DTOutput('db_info', width="100%", height="100%"), style = "font-size:85%")
)
)

server = shinyServer(function(input, output, session) {
output$map = renderLeaflet( leaflet(options = leafletOptions(zoomControl = FALSE)) %>% addTiles() %>% addMiniMap(zoomLevelFixed=2, toggleDisplay=T) )
# output$map = renderLeaflet( leaflet(options = leafletOptions(zoomControl = FALSE)) %>% addTiles() %>% addMiniMap(zoomLevelFixed=2, toggleDisplay=T) )
#For some reason the first draw is wrong
output$db_info <- renderDT( samp_data,
class = 'cell-border stripe',
# extensions = 'Scroller',
rownames = F,
server = F,
options = list(
dom = 't', # dom 't' is a specific option
autoWidth = T,
scrollX = T,
scrollY = '15vh',
scrollCollapse = T,
# scroller = T,
# paging = F,
# initComplete  = JS('function() {
#    $(this.api().table().row(4)).addClass("selected");
#                    this.api().table().row(4).scrollTo();}'),
columnDefs = list(list(
width = '500px', targets = c(1) #sets width of citations, need autoWidth=T and scrollX=T to work
))# END columnDefs
)# End options list
)# END RENDER DATA TABLE
#some event on map doesn't really matter for example, hardcode for now
#observeEvent({
#This is where I would like to scroll to the appropriate row in the datatable
# dataTableProxy("db_info", session = session)
# selectRows(c(4,6)) %>%
# selectPage(which(input$db_info_rows_all == c(4,6)) %/% input$db_info_state$length + 1)
# callback = JS('.scroller.toPosition( 4 );')
# dataTableProxy('db_info', session=session) %>% selectRows(c(5,6)) 
#})
})
shinyApp(ui, server)

我添加了一个示例脚本,我一直在尝试通过一些解决方案。然而,我没有一丝成功的迹象。最后,我想在用户单击或悬停在地图上的相应点上时自动滚动到表格的部分。如果我能解决与表的交互,我以后可以很容易地实现它。在这个例子中,我实际上并没有使用观察器,我只是想看看我是否可以让一些事情发生。

感谢您的任何帮助!

由于我无法解决这个问题,鉴于我似乎需要提前知道表格的长度才能滚动它(和分页(,我不得不接受不同的方法。

observeEvent( input$map_marker_mouseover, {
marker_id = input$map_marker_mouseover$id
dataTableProxy("db_info", session = session) %>%
updateSearch(keywords = list(global = marker_id , columns = "acc_num"))
})
observeEvent( input$map_marker_mouseout, {
dataTableProxy("db_info", session = session) %>%
clearSearch()
})

简而言之,我将表的唯一标识符设置为标记的$id,当我将鼠标悬停在一个点上时,它会自动搜索唯一 ID 列,这导致它将表子集化为仅该记录。鼠标悬停时,它会清除搜索,以便表格重新出现。我使用这些选项制作表格:

output$db_info <- renderDT( sp_pts,
class = 'cell-border table-condensed table-hover',
rownames = FALSE,
server = F,
options = list(
dom = 'tf',
autoWidth = T,
scrollX = T,
scrollY = '15vh',
scrollCollapse = T,
searching = T,
paging = F,
columnDefs = list(list(
width = '500px', 
targets = c(pt_cite_loc)
))# END columnDefs
)# End options list
)# END RENDER DATA TABLE

最新更新