在闪亮中使用 insertUI 时未返回 jqui_sortable 的订单

Posted 2023-02-14

【中文标题】在闪亮中使用 insertUI 时未返回 jqui_sortable 的订单

【英文标题】：order for jqui_sortable not returned when using insertUI in shiny

【发布时间】：2022-01-22 07:15:02

【问题描述】：

我发现了这个相关的问题：dragUI not draggable when created with insertUI shiny

我想在jqui_sortable() 中插入任意数量的 ui 元素，并在服务器函数中提供可用元素的顺序。

如果我事先知道需要多少元素，我可以调用insertUI 中的jqui_sortable() 函数，然后访问服务器中元素的顺序：

library(shiny)

ui <- fluidPage(
  actionButton("add", "Add"),
  div(id = "foo")
)

server <- function(input, output, session) 
  observeEvent(input$add, 
    insertUI(selector = "#foo",
             where = "beforeEnd",
             ui = jqui_sortable(tags$ul(
               id = paste0('lst', input$add),
               tags$li('A'),
               tags$li('B'),
               tags$li('C')
             )))
  )

  observe(
    cat(str(input$lst_order1))
    cat(str(input$lst_order2))
  )


shinyApp(ui, server)

如果您运行上述应用程序，您将看到插入的前两个列表的顺序打印到控制台。更改元素的顺序也会打印到控制台。

但是，如果我尝试将 jqui_sortable() 放在 UI 中并仅插入元素，则不会打印订单。这是一个可重现的示例：

library(shiny)
library(shinyjqui)

ui <- fluidPage(
  actionButton("add", "add"),
  jqui_sortable(tags$ul(id = "lst")),
)

server <- function(input, output, session) 
  
  observeEvent(input$add, 
    insertUI(
      selector = "#lst",
      where = "beforeEnd",
      ui = tags$li(paste0("test", input$add))
    )
  )
  
  observe(
    cat(str(input$lst_order))
  )


shinyApp(ui, server)

如何在任何给定时间创建可排序元素并检索页面上元素的顺序？解决方案不必使用 shinyjqui。

我在 shinyjqui GitHub 页面上交叉发布了这个，但我不确定这是一个错误。

更新：

sortable 包让我更接近一些。但是，插入新元素时元素的顺序不会更新，只有通过移动元素来更新顺序。

library(shiny)
library(sortable)

ui <- fluidPage(
  actionButton("add", "add"),
  tags$ul(id = "lst"),
  verbatimTextOutput("text"),
  sortable_js(css_id = "lst",  options = sortable_options(
    onSort = sortable_js_capture_input(input_id = "selected"),
    onLoad = sortable_js_capture_input(input_id = "selected")
  ))
)

server <- function(input, output, session) 
  
  observeEvent(input$add, 
    insertUI(
      selector = "#lst",
      where = "beforeEnd",
      ui = tags$li(paste0("test", input$add))
    )
  )
  
  output$text <- renderText(
    req(input$selected)
    input$selected
  )
  


shinyApp(ui, server)

【参考方案1】：

似乎像这样工作。这个想法是销毁可排序的东西并重新启用它。

library(shiny)
library(shinyjqui)

ui <- fluidPage(
  actionButton("add", "add"),
  tags$ul(id = "lst"),
)

server <- function(input, output, session) 
  
  observeEvent(input$add, 
    insertUI(
      selector = "#lst",
      where = "beforeEnd",
      ui = tags$li(paste0("test", input$add))
    )
    jqui_sortable("#lst", operation = "enable")
  , priority = 1)
  
  observeEvent(input$add, 
    jqui_sortable("#lst", operation = "destroy")
  , priority = 2)
  
  observe(
    cat(str(input$lst_order))
  )


shinyApp(ui, server)

【讨论】：

效果很好！谢谢！不确定是否需要两次observeEvent() 电话；我想我可以把jqui_sortable("#lst", operation = "destroy")放在insertUI()之前。