Shiny应用中DT组件如何通过上下方向键实现单行选中效果

以下是修改后可直接运行的完整代码，已经实现上下方向键跟随选中行的效果：

library(DT)
library(shiny)
library(tidyverse)

ui <- fluidPage(
  fluidRow(
    column(width = 12,
           DTOutput(outputId = "table",
                    width = "100%"))
  )
)

server <- function(input, output, session) {
  output$table <- renderDT({
    datatable(data = iris,
              selection = "single",
              rownames = FALSE,
              escape = FALSE,
              # 修正原代码拼写错误：extension改为extensions
              extensions = "KeyTable",
              options = list(pageLength = 10,
                             autoWidth = FALSE,
                             scrollX = TRUE,
                             keys = list(columns = "all"),
                             columnDefs = list(list(
                               targets = 4,
                               render = JS(
                                 "function(data, type, row, meta) {",
                                 "return type === 'display' && data != null && data.length > 125 ?",
                                 "'<span title=\"' + data + '\">' + data.substr(0, 125) + '...</span>' : data;",
                                 "}")
                             )),
                             # 新增初始化完成回调，实现按键跟随选行
                             initComplete = JS(
                               "function(settings, json) {",
                               "  var table = settings.oInstance.api();",
                               "  table.on('key', function(e, datatable, key, cell, originalEvent) {",
                               "    // 只监听上下方向键的keycode：38上，40下",
                               "    if (key === 38 || key === 40) {",
                               "      var rowIndex = cell.index().row;",
                               "      // 选中当前行，取消其他行选中",
                               "      table.rows().deselect();",
                               "      table.row(rowIndex).select();",
                               "    }",
                               "  });",
                               "}"
                             )),
              class = "display")
  })
}

shinyApp(ui = ui,
         server = server)

核心改动说明 #

• 修正了原代码的拼写错误：extension改为extensions，确保KeyTable扩展正常加载
• 调整keys参数为对象格式，指定监听所有列的单元格移动事件
• 新增initComplete自定义JS回调：监听上下方向键的按键事件，当单元格移动时自动选中当前单元格所在的整行，同时清除之前的行选中状态，和鼠标单击选行的逻辑完全一致

运行代码后，先点击任意单元格/行激活表格的键盘监听，之后按上下方向键即可自动切换选中行，符合逐行校验的使用需求。

内容的提问来源于stack exchange，提问作者nd091680