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

vsnjm48y  于 2023-03-22  发布在  jQuery
关注(0)|答案(1)|浏览(112)

bounty将在3天后过期。回答此问题可获得+50声望奖励。Bahgat Nassour希望引起更多人关注此问题。

这个问题只是这个问题的延伸
下面的代码由sortable R包中的两个容器或div或bucket_lists组成,每个bucket_list由两个add_rank_list函数组成。
第一个容器元素是完全不可移动的,其中每个add_rank_list中的disabled参数被设置为TRUE,而第二个容器允许用户拖放除第一个项目之外的项目,因为第一个add_rank_list函数中的disabled参数被设置为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)
pqwbnv8z

pqwbnv8z1#

您可以指定自定义处理程序来执行以下操作:

library(shiny)
library(sortable)

css <- HTML("
.highlight-marker {
   background-color: red!important;
}

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

js <- HTML("
   function init() {
      $('#camp').parent().addClass('highlight-marker');
      $('#clone_container .bucket-list .rank-list-container:nth(1) .rank-list-item:nth(0)').addClass('highlight-marker');
   }
   
   function move_handler(evt) {
      const $old = $('#clone_container .bucket-list .rank-list-container:nth(1) .rank-list-item').eq(evt.oldIndex);
      const $new = $('#clone_container .bucket-list .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选择器和标记类是快速和肮脏的,你可以改进它们,但你得到的要点。

相关问题