编辑

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键进行编辑；
按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');",
  "    }",
  "  }",
  "});"
)

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

1 个答案:

编辑

编辑2