使用 TAB 编辑 DT 表上的下一个单元格

Question

在可编辑的 DT 中按 TAB 后编辑下一个单元格是否有技巧？
这将有助于更快地编辑整行。

下面是可编辑 DT 的基本示例。

library(shiny)
library(DT)

ui <- fluidPage(
    DT::dataTableOutput('tbl1'),
    verbatimTextOutput("print")
)

server <- function(input, output, session) {

    data <- reactiveValues(x = iris[1:10,1:4])

    output$tbl1 <- DT::renderDataTable({
        DT::datatable(data = isolate(data$x), editable = TRUE, rownames = FALSE)
    })

    proxy_tbl1 <- dataTableProxy("tbl1")

    observeEvent(input$tbl1_cell_edit, {
        info = input$tbl1_cell_edit
        i = info$row
        j = info$col + 1
        v = info$value
        data$x[i, j] <- DT::coerceValue(v, data$x[i, j])
        replaceData(proxy_tbl1, data$x, resetPaging = FALSE, rownames = FALSE)
    })

    output$print <- renderPrint({
        print(data$x)
    })
}

shinyApp(ui, server)

Answer 1

这对于编辑器扩展可能是可行的，但它不是免费的。

这是一个接近的东西，使用 KeyTable 扩展。

library(shiny)
library(DT)

ui <- fluidPage(
  DTOutput("table")
)

js <- c(
  "table.on('key', function(e, datatable, key, cell, originalEvent){",
  "  var targetName = originalEvent.target.localName;",
  "  if(key == 13){",
  "    if(targetName == 'body'){",
  "      $(cell.node()).trigger('dblclick.dt');",
  "    }else if(targetName == 'input'){",
  "      $(originalEvent.target).trigger('blur');",
  "    }",
  "  }",
  "})"
)

server <- function(input, output, session){
  output$table <- renderDT({
    datatable(
      iris,
      selection = "none",
      editable = TRUE, 
      callback = JS(js),
      extensions = "KeyTable",
      options = list(
        keys = TRUE
      )
    )
  })
}

shinyApp(ui, server)

1) 选择一个单元格：

2) 按 Enter 编辑单元格：

3) 编辑完成后按 Enter 键，然后按 Tab 转到下一个单元格：

4) 按 Enter 编辑单元格：

等等……

这不如电子表格编辑器好，但它只允许使用键盘编辑单元格。

您还可以使用箭头在单元格之间导航。

---

编辑

这里有一个更好的解决方案。将js 替换为

js <- c(
  "table.on('key', function(e, datatable, key, cell, originalEvent){",
  "  var targetName = originalEvent.target.localName;",
  "  if(key == 13 && targetName == 'body'){",
  "    $(cell.node()).trigger('dblclick.dt');",
  "  }",
  "});",
  "table.on('keydown', function(e){",
  "  if(e.target.localName == 'input' && [9,13,37,38,39,40].indexOf(e.keyCode) > -1){",
  "    $(e.target).trigger('blur');",
  "  }",
  "});"
)

现在，当您编辑单元格时，您可以：

• 按 Enter 验证编辑并保持在同一位置；

• 或按 Tab 或箭头键验证编辑和导航，无需按 Enter 验证编辑。

---

编辑 2

使用下面的代码：

• 在表格中导航，回车编辑；

• 按 Enter 验证编辑并保持在同一位置；

• 如果您正在编辑单元格，则按 Tab 或箭头键将触发对新单元格的编辑。

.

js <- c(
  "table.on('key', function(e, datatable, key, cell, originalEvent){",
  "  var targetName = originalEvent.target.localName;",
  "  if(key == 13 && targetName == 'body'){",
  "    $(cell.node()).trigger('dblclick.dt');",
  "  }",
  "});",
  "table.on('keydown', function(e){",
  "  if(e.target.localName == 'input' && [9,13,37,38,39,40].indexOf(e.keyCode) > -1){",
  "    $(e.target).trigger('blur');",
  "  }",
  "});",
  "table.on('key-focus', function(e, datatable, cell, originalEvent){",
  "  var targetName = originalEvent.target.localName;",
  "  var type = originalEvent.type;",
  "  if(type == 'keydown' && targetName == 'input'){",
  "    if([9,37,38,39,40].indexOf(originalEvent.keyCode) > -1){",
  "      $(cell.node()).trigger('dblclick.dt');",
  "    }",
  "  }",
  "});"
)