在 R 语言的 Shiny 框架中，sortable 包提供了一种强大而灵活的方式来创建可拖拽排序的列表（bucket list）。然而，当这些列表中的项目数量非常多时，默认布局会导致列表无限增长，占用大量屏幕空间，严重影响用户体验。本文将详细介绍如何通过简单的 CSS 样式调整，为 sortable 列表设置固定的最大高度，并在内容超出时自动出现滚动条，从而实现列表内容的可滚动性。
问题描述： 一个常见的场景是，用户需要从一个包含大量选项的列表中选择并拖拽项目。如果这个源列表（或目标列表）的项目数量很多，它会垂直延伸，导致页面布局混乱，甚至需要用户不断滚动整个页面才能看到所有选项。我们希望实现的效果是：列表容器的高度固定，如果内容超出，则在容器内部出现滚动条。
解决方案概述： 解决此问题的关键在于利用 CSS 的 max-height 和 overflow-y 属性。
我们将通过修改 Shiny 应用的 ui.R 文件，在 tags$head 中添加自定义 CSS 样式，精确地定位到需要滚动的 rank_list 元素，并应用这些样式。
我们将基于一个典型的 Shiny sortable 应用示例进行修改。该示例包含一个源列表（rank_list_1）和两个目标列表（rank_list_2 和 rank_list_3），用户可以从源列表拖拽项目到目标列表。我们的目标是使源列表 rank_list_1 具有滚动功能。
首先，我们从提供的基础代码开始。这个应用允许用户选择变量列表（mtcars 或 state.name），并通过文本输入筛选源列表。
library(shiny)
library(sortable)
ui <- fluidPage(
tags$head(
tags$style(HTML(".bucket-list-container {min-height: 350px;}"))
),
fluidRow(
column(
width = 12,
radioButtons(inputId="variableList",
label="Choose your variable list",
choices = c("names(mtcars)"="names(mtcars)","state.name"="state.name")),
textInput(
inputId = "subsetChooseListText",
label = "Input text to subset list of states to choose from",
value = "c"
),
div(
class = "bucket-list-container default-sortable",
"Drag the items in any desired bucket",
div(
class = "default-sortable bucket-list bucket-list-horizontal",
uiOutput("selection_list", style="flex:1 0 200px;"), # This will render rank_list_1
rank_list(
text = "to here",
labels = list(),
input_id = "rank_list_2",
options = sortable_options(group = "mygroup")
),
rank_list(
text = "and also here",
labels = list(),
input_id = "rank_list_3",
options = sortable_options(group = "mygroup")
)
)
)
)
),
fluidRow(
column(
width = 12,
tags$b("Result"),
column(
width = 12,
tags$p("input$rank_list_1"),
verbatimTextOutput("results_1"),
tags$p("input$rank_list_2"),
verbatimTextOutput("results_2"),
tags$p("input$rank_list_3"),
verbatimTextOutput("results_3")
)
)
)
)
server <- function(input,output) {
varList <- reactive({
req(input$variableList)
if (input$variableList == "state.name") {
state.name
} else {
# Generate a long list for demonstration purposes
paste0(rep(names(mtcars), 20),"_", 1:220)
}
})
subsetChooseList <- reactive({
items <- varList()
pattern <- input$subsetChooseListText
if (nchar(pattern) < 1) {
return(items)
}
items[
grepl(
x = items,
pattern = input$subsetChooseListText,
ignore.case = TRUE
)
]
})
output$selection_list <- renderUI({
labels <- subsetChooseList()
labels <- labels[!(
labels %in% input$rank_list_2 |
labels %in% input$rank_list_3
)]
rank_list(
text = "Drag from here",
labels = labels,
input_id = "rank_list_1",
options = sortable_options(group = "mygroup")
)
})
output$results_1 <- renderPrint(input$rank_list_1)
output$results_2 <- renderPrint(input$rank_list_2)
output$results_3 <- renderPrint(input$rank_list_3)
}
shinyApp(ui, server)在上述代码中，output$selection_list 负责渲染第一个 rank_list，其 input_id 被设置为 "rank_list_1"。当 Shiny 渲染这个 rank_list 时，它会生成一个 HTML div 元素，其 id 属性就是 "rank_list_1"。因此，我们可以通过 CSS 选择器 #rank_list_1 精确地选中这个元素并应用样式。
在 ui.R 的 tags$head 部分，添加以下 CSS 规则来控制 rank_list_1 的高度和滚动行为：
ui <- fluidPage(
tags$head(
tags$style(HTML("
.bucket-list-container {min-height: 350px;}
/* 自定义样式：使 rank_list_1 具有固定高度和滚动条 */
#rank_list_1 {
max-height: 300px; /* 设置最大高度，可根据需要调整 */
overflow-y: auto; /* 垂直方向内容溢出时显示滚动条 */
border: 1px solid #ddd; /* 可选：为列表添加边框，使其更明显 */
padding: 5px; /* 可选：内边距 */
}
/* 可选：调整列表项的样式，防止文本过长导致水平溢出 */
#rank_list_1 .sortable-list-item {
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
"))
),
# ... (其余 UI 代码保持不变)
)CSS 规则解释：
将上述 CSS 样式集成到 ui.R 后，完整的 app.R 代码如下：
library(shiny)
library(sortable)
ui <- fluidPage(
tags$head(
tags$style(HTML("
.bucket-list-container {min-height: 350px;}
/* 自定义样式：使 rank_list_1 具有固定高度和滚动条 */
#rank_list_1 {
max-height: 300px; /* 设置最大高度，可根据需要调整 */
overflow-y: auto; /* 垂直方向内容溢出时显示滚动条 */
border: 1px solid #ddd; /* 可选：为列表添加边框，使其更明显 */
padding: 5px; /* 可选：内边距 */
background-color: #f9f9f9; /* 可选：背景色 */
}
/* 可选：调整列表项的样式，防止文本过长导致水平溢出 */
#rank_list_1 .sortable-list-item {
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
padding: 8px 12px; /* 列表项内边距 */
margin-bottom: 2px; /* 列表项之间间距 */
background-color: #fff; /* 列表项背景色 */
border: 1px solid #eee; /* 列表项边框 */
cursor: grab; /* 鼠标悬停时显示抓取手势 */
}
/* 拖拽时的样式 */
.sortable-ghost {
opacity: 0.4;
background-color: #fcf8e3;
}
"))
),
fluidRow(
column(
width = 12,
h3("Shiny Sortable 可滚动列表示例"),
radioButtons(inputId="variableList",
label="选择您的变量列表",
choices = c("mtcars 变量 (长列表)"="names(mtcars)","state.name (短列表)"="state.name")),
textInput(
inputId = "subsetChooseListText",
label = "输入文本以筛选列表",
value = "c"
),
div(
class = "bucket-list-container default-sortable",
tags$b("将项目拖拽到任意目标桶中"),
div(
class = "default-sortable bucket-list bucket-list-horizontal",
# uiOutput("selection_list") 将渲染 id="rank_list_1" 的元素
uiOutput("selection_list", style="flex:1 0 200px;"),
rank_list(
text = "目标桶 1",
labels = list(),
input_id = "rank_list_2",
options = sortable_options(group = "mygroup")
),
rank_list(
text = "目标桶 2",
labels = list(),
input_id = "rank_list_3",
options = sortable_options(group = "mygroup")
)
)
)
)
),
fluidRow(
column(
width = 12,
tags$hr(),
tags$b("当前列表内容"),
fluidRow(
column(
width = 4以上就是在 Shiny 中创建可滚动 Sortable 列表的教程的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
199
收藏
