Используйте TAB для редактирования следующей ячейки таблицы DT

Question

Есть ли хитрость для редактирования следующей ячейки после нажатия клавиши TAB в редактируемом DT?
Это поможет быстрее отредактировать всю строку.

Ниже приведен базовый пример редактируемого 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

Это, вероятно, выполнимо с расширением Editor, но это не бесплатно.

Вот что-то близкое, с использованием расширения 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');",
  "    }",
  "  }",
  "});"
)