基于用户事件R/DT/Shiny滚动到行，而无需使用分页 [英] scroll to row based on user event, R/DT/Shiny, without using paging
问题描述
我试图将数据表(DT)悬停在地图上的某个点上时滚动到正确的行/线.我可以做类似选择行的操作，但是我无法弄清楚如何使数据表Y轴滚动到正确的条目.我试图在不使用分页的情况下执行此操作，因为我的数据表使用了子集，并且总体上没有那么大.
I am trying to get a datatable (DT) to scroll to the proper row/line when hovering over a point on a map. I can do things like have the row be selected, but I cannot figure out how to make the datatable Y-scroll to the proper entry. I'm trying to do this without Paging, as my datatable uses subsets and is not overall that large.
我正在R/Shiny/DT中执行此操作，我的javascript体验为0.这篇文章似乎一直在尝试做相同的事情，除了示例是初始表加载而不是对外部事件做出反应之外最初加载的表.我不知道如何使表滚动对用户事件作出反应.
I'm doing this in R/Shiny/DT my javascript experience is 0. This post seems to have been trying to do the same thing, except that the example is one the initial table load instead of reacting to events outside the initially loaded table. I do not understand how I would make the tables scrolling reactive to user events.
该产品供内部(学术)使用，可以更快地进行数据处理和错误检查.
The product is for internal (academic) use to make data manipulation and error checking faster.
#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)
我添加了一个示例脚本，在该脚本中试图尝试一些解决方案.但是我没有成功的暗示.最后，当用户单击或悬停在地图上的相应点上时，我想自动滚动到表格的该部分.如果可以与表进行交互，那么以后可以很容易地实现它.在这个例子中，我实际上并没有使用观察者，我只是想看看我是否能做点什么.
I've added an example script where I've been trying to work through some solutions. I have not had a hint of success however. In the end I'd like to autoscroll to the portion of the table when a user clicks or hovers over the corresponding point on a map. I can implement that later easily enough, if I can get the interaction with the table worked out. In this example I'm not actually using an observer, I'm just trying to see if I can get something to happen at all.
谢谢您的帮助！
推荐答案
由于无法解决此问题，考虑到似乎需要先知道表格的长度才能滚动(和分页)，我不得不适应另一种方法.
Since I was unable to solve this, given that it seems I would need to know the length of the table in advance before being able to scroll around it (and paging) I had to settle for a different approach.
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列，这导致它将表的子集仅包含该记录.当鼠标移出时，它将清除搜索，以便重新显示该表.我用以下选项制作表格:
Simply put, I make the unique identifier of the table the $id of the marker, when I mouse over a point it runs a search of the unique ID column automatically which causes it to subset the table to only that record. When mousing out it clears the search so that the table re-appears. I make the table with these options:
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
这篇关于基于用户事件R/DT/Shiny滚动到行，而无需使用分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
