Shiny 應用程序中的 DT：使用 UP 和 DOWN 鍵盤按鈕一次選擇一行

Question

我在 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 = "KeyTable",
              options = list(pageLength = 10,
                             autoWidth = FALSE,
                             scrollX = TRUE,
                             keys = TRUE,
                             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;",
                                 "}")
                             ))),
              class = "display")
    
  })
  
}

shinyApp(ui = ui,
         server = server)

但是，我想用鍵盤的向上和向下箭頭獲得相同的結果。 這樣，我可以只通過這兩個按鈕選擇（並自動取消選擇）一行，這在表格很長並且有很多行要檢查時很有用。 謝謝你的幫助！

編輯：我已經修改了代碼，按照 silentdevildoll 的建議插入了擴展名“ KeyTable ”。 雖然我可以使用鍵盤在表格的單元格中移動，但我仍然無法使用向上和向下箭頭選擇它們。

Answer 1

結合並改編自不同的來源，但主要是https://laustep.github.io/stlahblog/posts/DTcallbacks.html#select-rows-on-click-and-drag

關鍵點：

• 您需要事件key-focus ，這是觸發的事件，因為 KeyTable已經處理箭頭鍵在網格上移動。
• 相反， key只會處理 key-focus 或其他內置 KeyTable 功能未處理的事件。 https://datatables.net/reference/event/#keytable
• 您需要server=FALSE在renderDT調用中。 如果您使用服務器端處理，則如果應用了任何排序，則索引將不正確。
• Shiny 抱怨Select擴展顯然與 Shiny 的選擇功能沖突。 但是，它似乎工作正常。 我只是覆蓋現有的{outputname}_rows_selected輸入，以便最新條目獲勝，單擊和箭頭行選擇都有效。
• 不確定如何更好地處理初始點擊； 可能是您必須在激活鍵之前單擊表格兩次（通過所選單元格上的藍色突出顯示）

library(shiny)
library(DT)

js_select_dt <- c(
  "var dt = table.table().node();",
  "var tblID = $(dt).closest('.datatables').attr('id');",
  "var inputName = tblID + '_rows_selected'",
  "var incrementName = tblID + '_rows_selected2_increment'",
  "table.on('key-focus', function(e, datatable, cell, originalEvent){",
  "  if (originalEvent.type === 'keydown'){",
  "    table.rows().deselect(); ",
  "    table.row(cell[0][0].row).select();",
  "    row = table.rows({selected: true})",
  # Note: this ID is zero-based so add one
  "    Shiny.setInputValue(inputName, [parseInt(row[0]) + 1]);",
  "  }",
  "});"
)


ui <- fluidPage(
  textOutput("selectedRow"),
  DT::DTOutput("irisTable")
)

server <- function(input, output) {
  output$irisTable<- DT::renderDT({
    iris %>%
      datatable(
        # This datatable uses both shiny's select for conventional selection
        # and keytable + select for selection by keyboard (callback js_select_dt, see above).
        # The keyboard-selected row just overwrites the regular input$peaksTable_rows_selected
        # field.
        selection = "single",
        editable = FALSE, 
        callback = JS(js_select_dt),
        extensions = c("KeyTable", "Select"),
        options = list(
          keys = TRUE,
          # keys = list(keys = c(38, 40))
          select = TRUE
        )
      )
  }, server=FALSE)
  
  output$selectedRow <- renderText(input$irisTable_rows_selected)
}

runApp(shinyApp(ui, server))