在Shiny中使用Sortable.js创建可滚动、固定高度的列表-js教程-PHP中文网

在shiny中使用sortable.js创建可滚动、固定高度的列表

本文将详细指导如何在R Shiny应用中结合sortable包，创建具有固定高度且内容溢出时自动出现滚动条的交互式拖拽列表。通过集成CSS样式，我们将实现一个用户友好的“选择桶”界面，确保即使列表项数量众多，界面布局也能保持整洁，并提供清晰的代码示例和注意事项。

1. 引言：交互式列表的需求与挑战

在开发R Shiny应用程序时，经常需要创建交互式界面，允许用户通过拖拽来选择、排序或分配列表项。sortable包为我们提供了强大的功能来实现这一目标。然而，当列表中的项目数量较多时，默认的布局可能会导致列表容器高度无限增长，破坏页面的整体美观和可用性。为了解决这一问题，我们需要为列表容器设置固定高度，并在内容超出时启用滚动功能。

本教程将基于一个典型的“选择桶”（bucket list）应用场景，演示如何通过简单的CSS样式调整，使sortable列表具备固定高度和垂直滚动条。

2. 初始Shiny应用结构

首先，我们从一个基础的Shiny应用开始，它使用sortable包创建了多个可拖拽的列表。用户可以从一个源列表拖拽项目到两个目标列表。源列表的内容可以通过单选按钮和文本输入框进行筛选。

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="选择您的变量列表",
                   choices = c("names(mtcars)"="names(mtcars)","state.name"="state.name")),
      textInput(
        inputId = "subsetChooseListText",
        label = "输入文本以筛选列表",
        value = "c"
      ),
      div(
        class = "bucket-list-container default-sortable",
        "将项目拖拽到任意目标桶中",
        div(
          class = "default-sortable bucket-list bucket-list-horizontal",
          uiOutput("selection_list", style="flex:1 0 200px;"), # 源列表
          rank_list(
            text = "拖拽到这里",
            labels = list(),
            input_id = "rank_list_2",
            options = sortable_options(group = "mygroup")
          ),
          rank_list(
            text = "也可以拖拽到这里",
            labels = list(),
            input_id = "rank_list_3",
            options = sortable_options(group = "mygroup")
          )
        )
      )
    )
  ),
  fluidRow(
    column(
      width = 12,
      tags$b("结果"),
      column(
        width = 12,
        tags$p("input$rank_list_1 (源列表)"),
        verbatimTextOutput("results_1"),
        tags$p("input$rank_list_2 (目标列表1)"),
        verbatimTextOutput("results_2"),
        tags$p("input$rank_list_3 (目标列表2)"),
        verbatimTextOutput("results_3")
      )
    )
  )
)

server <- function(input,output) {

  varList <- reactive({
    req(input$variableList)
    if (input$variableList == "state.name") {
      state.name
    } else {
      # 模拟一个很长的列表来测试滚动条
      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 = "从这里拖拽",
      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作为源列表。server逻辑确保了列表项的筛选和已选项目的移除。当选择names(mtcars)时，我们特意生成了一个很长的列表（220项），以便观察列表溢出时的行为。

3. 实现固定高度与滚动条

要使rank_list_1（即源列表）具有固定高度并可滚动，我们需要进行以下两步：

为列表内容添加一个包装div： rank_list函数本身生成的是列表项，我们需要在其外部包裹一个div，以便对这个div应用高度和滚动样式。
应用CSS样式： 对这个包装div设置max-height（最大高度）和overflow-y: auto;（当内容垂直溢出时显示滚动条）。

我们将修改ui部分中生成selection_list的uiOutput，并调整renderUI函数。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

3.1 修改UI结构

在ui.R中，uiOutput("selection_list")是源列表的占位符。为了应用样式，我们需要在renderUI中动态生成的rank_list外部再包裹一个div。

# ui.R 中的相关部分
div(
  class = "default-sortable bucket-list bucket-list-horizontal",
  # 注意：这里我们将不再直接在uiOutput上应用flex样式
  # uiOutput("selection_list", style="flex:1 0 200px;"), 
  # 而是让wrapper div来控制
  uiOutput("selection_list_wrapper"), # 新增一个wrapper UI输出
  rank_list(
    text = "拖拽到这里",
    labels = list(),
    input_id = "rank_list_2",
    options = sortable_options(group = "mygroup")
  ),
  rank_list(
    text = "也可以拖拽到这里",
    labels = list(),
    input_id = "rank_list_3",
    options = sortable_options(group = "mygroup")
  )
)

登录后复制

3.2 修改Server逻辑

在server.R中，我们将修改output$selection_list的渲染逻辑，使其在rank_list外部包裹一个带有特定CSS样式的div。

# server.R 中的相关部分
output$selection_list_wrapper <- renderUI({ # 修改为新的UI输出ID
  labels <- subsetChooseList()

  labels <- labels[!(
    labels %in% input$rank_list_2 |
      labels %in% input$rank_list_3
  )]

  # 关键改动：在rank_list外层包裹一个div，并应用样式
  div(
    style = "max-height: 400px; overflow-y: auto; flex:1 0 200px;", # 设置最大高度和滚动条
    rank_list(
      text = "从这里拖拽",
      labels = labels,
      input_id = "rank_list_1",
      options = sortable_options(group = "mygroup")
    )
  )
})

登录后复制

CSS样式解释：

max-height: 400px;: 设置容器的最大高度为400像素。当内容高度超过此值时，容器将保持400px的高度。
overflow-y: auto;: 当内容垂直方向溢出容器时，自动显示垂直滚动条。如果内容未溢出，则不显示滚动条。
flex:1 0 200px;: 这是flex-grow: 1; flex-shrink: 0; flex-basis: 200px;的简写。它确保了在flex布局中，这个容器能够占据可用空间，但最小宽度为200px。

4. 完整的修改后代码

以下是整合了固定高度和滚动条功能的完整Shiny应用代码：

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="选择您的变量列表",
                   choices = c("names(mtcars)"="names(mtcars)","state.name"="state.name")),
      textInput(
        inputId = "subsetChooseListText",
        label = "输入文本以筛选列表",
        value = "c"
      ),
      div(
        class = "bucket-list-container default-sortable",
        "将项目拖拽到任意目标桶中",
        div(
          class = "default-sortable bucket-list bucket-list-horizontal",
          # 修改这里：使用新的UI输出ID来包裹可滚动的rank_list
          uiOutput("selection_list_wrapper"), 
          rank_list(
            text = "拖拽到这里",
            labels = list(),
            input_id = "rank_list_2",
            options = sortable_options(group = "mygroup")
          ),
          rank_list(
            text = "也可以拖拽到这里",
            labels = list(),
            input_id = "rank_list_3",
            options = sortable_options(group = "mygroup")
          )
        )
      )
    )
  ),
  fluidRow(
    column(
      width = 12,
      tags$b("结果"),
      column(
        width = 12,
        tags$p("input$rank_list_1 (源列表)"),
        verbatimTextOutput("results_1"),
        tags$p("input$rank_list_2 (目标列表1)"),
        verbatimTextOutput("results_2"),
        tags$p("input$rank_list_3 (目标列表2)"),
        verbatimTextOutput("results_3")
      )
    )
  )
)

server <- function(input,output) {

  varList <- reactive({
    req(input$variableList)
    if (input$variableList == "state.name") {
      state.name
    } else {
      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
      )
    ]
  })

  # 修改这里：渲染一个带有滚动条样式的div，内部包含rank_list
  output$selection_list_wrapper <- renderUI({ 
    labels <- subsetChooseList()

    labels <- labels[!(
      labels %in% input$rank_list_2 |
        labels %in% input$rank_list_3
    )]

    div(
      style = "max-height: 400px; overflow-y: auto; flex:1 0 200px;", # 应用样式
      rank_list(
        text = "从这里拖拽",
        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)

登录后复制

运行此应用后，当您选择“names(mtcars)”变量列表时，源列表（"从这里拖拽"）将显示大量项目。由于我们设置了max-height: 400px;和overflow-y: auto;，列表的高度将被限制，并自动出现垂直滚动条，允许用户方便地浏览所有项目。

5. 注意事项与最佳实践

高度单位选择： max-height可以使用像素（px）、视口高度（vh）或百分比（%）。
- px：提供固定的高度，适用于布局要求严格的场景。
- vh：相对于视口高度的百分比，例如50vh表示视口高度的一半，适合响应式布局。
- %：相对于父容器的高度。如果父容器没有明确的高度，则%可能不会生效。根据您的应用布局和响应式需求选择合适的单位。
overflow-y与overflow-x：
- overflow-y: auto;：控制垂直方向的滚动条。
- overflow-x: auto;：控制水平方向的滚动条。
- overflow: auto;：同时控制水平和垂直方向。通常，对于列表我们主要关注垂直滚动。
用户体验： 滚动条的出现意味着内容被截断，建议在UI设计上考虑如何向用户明确指示列表是可滚动的，例如通过微小的视觉提示或合理的默认高度。
sortable的AutoScroll插件： 原始问题中提到了sortable的AutoScroll插件。需要明确的是，该插件主要用于在拖拽项目时，当拖拽到的位置靠近容器边缘时，自动滚动容器，以方便拖拽到不可见区域。它并不是用来使容器本身在内容溢出时显示滚动条的。我们通过CSS实现的overflow-y: auto;是解决后者（静态内容滚动）的直接且标准的方法。如果您需要拖拽时的自动滚动行为，可以进一步研究sortable_options中的plugins参数来启用AutoScroll。
外部CSS文件： 对于更复杂的样式，建议将CSS规则放入一个单独的.css文件中，并通过tags$link(rel="stylesheet", type="text/css", href="styles.css")在ui中引入，而不是使用tags$style(HTML(...))。这有助于代码的组织和维护。

6. 总结

通过本教程，我们学习了如何在R Shiny应用中，利用sortable包创建的交互式拖拽列表实现固定高度和垂直滚动功能。核心方法是为rank_list的外部包裹一个div，并为其应用max-height和overflow-y: auto;等CSS样式。这种方法简单有效，能够显著提升长列表在Shiny应用中的用户体验和界面整洁度。掌握这些CSS技巧，对于构建更专业、更易用的Shiny应用至关重要。

以上就是在Shiny中使用Sortable.js创建可滚动、固定高度的列表的详细内容，更多请关注php中文网其它相关文章！