gpt4 book ai didi

javascript - 单击 Shiny 数据表中的按钮后如何滚动到底部

转载 作者:行者123 更新时间:2023-12-01 00:59:00 25 4
gpt4 key购买 nike

我有一个简单的 Shiny 应用程序,它以 Shiny 的方式向我显示数据表中的大量图片。我有 20,000 张图像,我想删除那些我不喜欢的图像。当我删除一行时,应用程序会将我带到数据表的顶部,这对于这么多图像没有用处。

作为一个简单的解决方案,我认为我可以确保应用程序返回到我刚刚删除的图像上方。我想这将由 javascript 函数管理,但我不知道如何实现它。我想它应该放在 tags$script 下面的代码部分中。有人可以告诉我如何/指导我如何实现此功能

这是我的应用程序的代码:

服务器

library(shiny)
library(shinydashboard)
library(data.table)
library(DT)
server<-shinyServer(function(input, output) {
vals<-reactiveValues(myTabData = data.table(NULL))

vals$Data<-data.table(Endo_Endoscopist=DT$Endo_Endoscopist,
PatientID=DT$PatientID,
NBIorWLorFICE=DT$NBIorWLorFICE,
url=DT$url)

output$MainBody<-renderUI({
fluidPage(
box(width=12,
h3(strong("Actions on datatable with buttons"),align="center"),
hr(),
column(12,dataTableOutput("Main_table")),
tags$script("$(document).on('click', '#Main_table button', function () {
Shiny.onInputChange('lastClickId',this.id);
Shiny.onInputChange('lastClick', Math.random())
});")

)
)
})

output$Main_table<-renderDataTable({
DT=vals$Data

DT[["Actions"]]<-
paste0('
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary delete" id=delete_',1:nrow(vals$Data),'>Delete</button>
<button type="button" class="btn btn-secondary modify"id=modify_',1:nrow(vals$Data),'>Modify</button>
</div>

')
datatable(DT,
escape=F)}
)


output$downloadData <- downloadHandler(
filename = function() {
"Main_table.csv"
},
content = function(file) {
write.csv(vals$Data, file, row.names = FALSE)

# Warning: Error in write.table: unimplemented type 'list' in 'EncodeElement'
# write.csv(vals$Data, file, row.names = FALSE)
}
)




##Managing in row deletion
modal_modify<-modalDialog(
fluidPage(
h3(strong("Row modification"),align="center"),
hr(),
dataTableOutput('row_modif'),
actionButton("save_changes","Save changes"),

tags$script(HTML("$(document).on('click', '#save_changes', function () {
var list_value=[]
for (i = 0; i < $( '.new_input' ).length; i++)
{
list_value.push($( '.new_input' )[i].value)
}
Shiny.onInputChange('newValue', list_value)
});"))
),
size="l"
)


observeEvent(input$lastClick,
{
if (input$lastClickId%like%"delete")
{
row_to_del=as.numeric(gsub("delete_","",input$lastClickId))
vals$Data=vals$Data[-row_to_del]
}
else if (input$lastClickId%like%"modify")
{
showModal(modal_modify)
}
}
)

output$row_modif<-renderDataTable({
selected_row=as.numeric(gsub("modify_","",input$lastClickId))
old_row=vals$Data[selected_row]
row_change=list()
for (i in colnames(old_row))
{
if (is.numeric(vals$Data[[i]]))
{
row_change[[i]]<-paste0('<input class="new_input" type="number" id=new_',i,'><br>')
}
else
row_change[[i]]<-paste0('<input class="new_input" type="text" id=new_',i,'><br>')
}
row_change=as.data.table(row_change)
setnames(row_change,colnames(old_row))
browser()
DT=rbind(old_row,row_change)
rownames(DT)<-c("Current values","New values")
DT

},escape=F,options=list(dom='t',ordering=F),selection="none"
)


observeEvent(input$newValue,
{
newValue=lapply(input$newValue, function(col) {
if (suppressWarnings(all(!is.na(as.numeric(as.character(col)))))) {
as.numeric(as.character(col))
} else {
col
}
})
DF=data.frame(lapply(newValue, function(x) t(data.frame(x))))
colnames(DF)=colnames(vals$Data)
vals$Data[as.numeric(gsub("modify_","",input$lastClickId))]<-DF

}
)

})

用户界面

library(shiny)
library(shinydashboard)

ui<-fluidPage(dashboardBody(uiOutput("MainBody"),
downloadLink("downloadData", "Download"))
)

最佳答案

这是一种删除行而不重新呈现表的方法。我希望这会有所帮助。

library(DT)
library(shiny)

dat <- iris[1:5, 1:2]
dat$Action <-
paste0(
'<button type="button" class="btn btn-secondary delete" id="delete_',
1:nrow(dat)-1,
'" onclick="deleteRow(this.id);">Delete</button>')
dat$rowId <- paste0("row_", 1:nrow(dat)-1)

js <- paste0(
c(
"function deleteRow(id){",
" var rowNum = id.split('_')[1];",
" var table = $('#mytable').find('table').DataTable();",
" var nrows = table.rows().count();",
" for(var i=0; i < nrows; ++i){",
" if(table.row(i).id() == 'row_' + rowNum){",
" table.row(i).remove().draw(false);",
" break;",
" }",
" }",
"}"
),
collapse = "\n"
)

ui <- fluidPage(
tags$head(tags$script(HTML(js))),
DTOutput("mytable")
)

server <- function(input, output){
output[["mytable"]] <- renderDT({
datatable(dat, escape = FALSE, selection = "none",
options = list(
columnDefs = list(
list(targets = ncol(dat), visible = FALSE)
),
rowId = JS(sprintf("function(data){return data[%d];}", ncol(dat)))))
}, server = FALSE)
}

shinyApp(ui, server)

enter image description here

或者更简单:

dat <- iris[1:5, 1:2]
dat$Action <-
'<button type="button" class="btn btn-secondary delete">Delete</button>'

callback <- c(
"table.on('click', 'button.delete', function(){",
" var tr = $(this).closest('tr');",
" table.row(tr[0]).remove().draw(false);",
"});"
)

ui <- fluidPage(
DTOutput("mytable")
)

server <- function(input, output){
output[["mytable"]] <- renderDT({
datatable(dat, escape = -ncol(dat)-1, selection = "none",
callback = JS(callback))
}, server = FALSE)
}

shinyApp(ui, server)

关于javascript - 单击 Shiny 数据表中的按钮后如何滚动到底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56275788/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com