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)
1条答案
按热度按时间pqwbnv8z1#
您可以指定自定义处理程序来执行以下操作:
CSS
选择器和标记类是快速和肮脏的,你可以改进它们,但你得到的要点。