使用 jQuery 在 RShiny 中逐行添加自定义类

Question

这个问题只是这个问题

的延伸

以下代码由

sortable

R包中的两个容器或div或bucket_list组成，每个

bucket_list

由两个

add_rank_list

函数组成。

第一个容器元素是完全不可移动的，其中每个

disabled

中的

add_rank_list

参数设置为

TRUE

，而第二个容器允许用户拖放除第一个项目之外的项目，因为

disabled

参数在第一个

add_rank_list

函数中设置为

TRUE

但在第二个函数中设置为

FALSE

.

如果第二个容器的值为“Camp”，我想将红色背景色应用于该元素。此外，我想将相同的背景颜色应用于与“Camp”元素共享同一行的第一个容器中的元素。

简而言之，将类添加到第二个容器中的“Camp”元素没有问题，因为我的代码可以做到这一点。但是，我的主要观点是将类添加到与第二个容器中的“Camp”元素位于同一行的第一个容器中的元素，并考虑到用户可以在第二个容器中拖放“Camp”元素容器.

尽管尝试了不同的方法，我还是无法达到这个结果。任何帮助将不胜感激。

library(shiny)
library(sortable)

ui <- fluidPage(
  actionButton(inputId = "id1", "run"),
  uiOutput("id2")
)

server <- function(input, output, session) {
  observeEvent(input$id1, {
    output$id2 <- renderUI({
      
      tagList(
        tags$style(
          HTML(paste0("
              .custom-sortable .rank-list-item-Camp {
              background-color: red 
              }
                      "))
        ),
        tags$script(
          HTML("
                $(document).ready(function() {
                $('.custom-sortable .rank-list-item').each(function(index) {
                if ($(this).text() === 'Camp') {
                targetIndex = index;
                }
                });
                $('.custom-sortable .rank-list-item').eq(targetIndex).addClass('rank-list-item-Camp');
                });
                     ")
        ),
        div(
          style = "width: 15%; float: left; overflow: hidden;",
          bucket_list(
            header = NULL,
            class = c("default-sortable","custom-sortable" ),
            orientation = c("vertical"),
            add_rank_list(
              text = NULL,
              labels = 100,
              options = sortable_options(disabled = T)
            ),
            add_rank_list(
              text = NULL,
              labels = c(50,40,30,15),
              options = sortable_options(disabled = T)
            )
          )
        ),

        div(
          style = "width: 15%; float: left; overflow: hidden;",
          bucket_list(
            header = NULL,
            class = c("default-sortable", "custom-sortable"),
            orientation = c("vertical"),
            add_rank_list(
              text = NULL,
              labels = c("Fixed"),
              options = sortable_options(disabled = T)
            ),
            add_rank_list(
              text = NULL,
              labels = c("Camp", rep("No Info",3)),
              options = sortable_options(disabled = F)
            )
          )
        )
        
      )
    })
  }
 )
}
shinyApp(ui, server)

Answer 1

您可以指定执行魔术的自定义处理程序：

css <- HTML("
.bucket-list-container .default-sortable .rank-list .highlight-marker {
   background-color: red;
}

.bucket-list-container .default-sortable .rank-list .highlight-marker:hover:not(.disabled)  {
   background-color: red;
}

.sortable-container {
   width: 15%; 
   float: left; 
   overflow: hidden;   
}")

js <- HTML("
   function init() {
      const pos = $('#camp_container .rank-list-container:nth(1) .rank-list-item span').index('#camp');
      $('#camp').parent().addClass('highlight-marker');
      $('#clone_container .rank-list-container:nth(1) .rank-list-item').eq(pos).addClass('highlight-marker');
   }
   
   function move_handler(evt) {
      const $elem = $(evt.item);
      if ($elem.has('#camp').length) {
         const $old = $('#clone_container .rank-list-container:nth(1) .rank-list-item').eq(evt.oldIndex);
         const $new = $('#clone_container .rank-list-container:nth(1) .rank-list-item').eq(evt.newIndex);
         $old.removeClass('highlight-marker');
         $new.addClass('highlight-marker');
      }
   }
")

ui <- fluidPage(
   singleton(tags$head(tags$style(css))),
   singleton(tags$head(tags$script(js, type = "text/javascript"))),
   actionButton("run", "Run!"),
   uiOutput("container")
)

server <- function(input, output, session) {
   output$container <- renderUI({
      req(input$run)
      bucket_1 <- bucket_list(
         header = NULL,
         add_rank_list(
            text = NULL,
            labels = 100,
            options = sortable_options(disabled = TRUE)
         ),
         add_rank_list(
            text = NULL,
            labels = c(50, 40, 30, 15),
            options = sortable_options(disabled = TRUE)
         ),
         class = c("default-sortable","custom-sortable"),
         orientation = "vertical"
      )
      
      bucket_2 <- bucket_list(
         header = NULL,
         add_rank_list(
            text = NULL,
            labels = "Fixed",
            options = sortable_options(disabled = TRUE)
         ),
         add_rank_list(
            text = NULL,
            labels = c(list(span("Camp", id = "camp")), 
                       rep(list(span("No Info")), 3L)),
            options = sortable_options(disabled = FALSE, 
                                       onSort = "move_handler",
                                       onLoad = "init"
            )
         ),
         class = c("default-sortable","custom-sortable" ),
         orientation = "vertical")
      
      container_1 <- div(
         class = "sortable-container",
         id = "clone_container",
         bucket_1
      )
      container_2 <- div(
         class = "sortable-container",
         id = "camp_container",
         bucket_2
      )
      tagList(container_1,
              container_2)
   })
}

shinyApp(ui, server)

CSS

选择器和标记类是快速和肮脏的，你可以改进它们，但你明白了要点。

---

更新

• 修复了

  CSS

  ，这样我们就不需要

  !important

• 在

  if

  中添加了一个

  JS

  子句，以确保它仅针对包含 #camp 的元素触发 。
• 删除了

  init

  函数中的硬编码位置，这样代码也可以工作，如果

  Camp

  不在第一个位置。