javascript - 在 R Sortable 中为可排序对象文本添加索引

Question

我正在尝试构建一个用户对项目进行排名的工具，并且遇到了 R 的精彩可排序包，这使得构建和捕获自定义拖放用户界面的顺序变得非常容易。

虽然很容易在幕后的界面中捕获对象的顺序，但我正在努力寻找一种方法来立即在可排序的用户界面中显示该索引/行号(而不是仅仅在其他地方打印) ，因为用户正在对项目进行排名，尽管这在概念上非常简单。

我已经尝试了 options/sortable_options() 参数，但无法在那里工作。是否有任何明显的方法可以在我丢失的对象的文本中显示可排序对象的索引？

library(shiny)
library(shinydashboard)
library(sortable)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
  htmlOutput("foodrankingform")
))

server <- function(input, output, session){
  output$foodrankingform <- renderUI({
    fluidRow(
      column(tags$b("Food Ranking"), width = 12,
             bucket_list(header = "Drag to the right from the foods below to rank.", group_name = "bucket_list_group", orientation = "horizontal",
                         add_rank_list("Food Pool:", labels = c("Apple", "Orange", "Lemon", "Captain Crunch", "Banana"), input_id = "rank_list_1"),
                         add_rank_list("Food Ranking:", labels = NULL,input_id = "rank_list_2")))
    )
  })
}



shinyApp(ui=ui, server=server)

Answer 1

这是使用 CSS 的解决方案

library(shiny)
library(shinydashboard)
library(sortable)   

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$head(tags$style(HTML("
      .column_2 {
        counter-reset: rank;                      
      }

      .column_2 .rank-list-item::before {
        counter-increment: rank;                   
        content: counter(rank) '. ';    
      }
    "))),
    htmlOutput("foodrankingform")
  )
)

server <- function(input, output, session) {
  output$foodrankingform <- renderUI({
    fluidRow(
      column(tags$b("Food Ranking"), width = 12,
             bucket_list(header = "Drag to the right from the foods below to rank.", 
                         group_name = "bucket_list_group", orientation = "horizontal",
                         add_rank_list("Food Pool:", 
                                       labels = c("Apple", "Orange", "Lemon", 
                                                  "Captain Crunch", "Banana"), 
                                       input_id = "rank_list_1"),
                         add_rank_list("Food Ranking:", labels = NULL,
                                       input_id = "rank_list_2"))
      )
    )
  })
}

shinyApp(ui=ui, server=server)