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

Question

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

下面是一个可编辑设备标识符的基本示例。

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) 编辑完成后按回车键，按Tab键转到下一个单元格:

4) 按回车键编辑单元格:

等...

这不像电子表格编辑器那么好，但它允许仅使用键盘编辑单元格。

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

---

编辑

这是一个更好的解决方案。将 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');",
  "    }",
  "  }",
  "});"
)