编辑表格时如何使用数据表在闪亮的表格中创建下拉列表? [英] How to create a dropdown list in a Shiny table using datatable when editing the table?

问题描述

我用 RStudio 读入了一个 csv 文件，并用 Shiny 构建了一个应用程序作为一个交互式表格，我现在选择的单元格如图所示.

查看 CellEdit 存储库 上的可能选项.特别是您可以禁用某些列的编辑，如果需要，您可以取消确认/取消按钮.

I used RStudio to read in a csv file and used Shiny to build an app as an interactive table, the cell I selected right now as shown in the picture is pre-filled.

enter image description here

I want to change the value given pre-defined options in a dropdown list, such as, "Keep Dataset", "Pass", etc., I searched hundreds of materials and I literally ran out of my bullets...... PLEASE HELP!

解决方案

We can do that with the JavaScript library CellEdit. Download the file dataTables.cellEdit.js.

By default, the interface is not very stylish. To style it, copy the CSS code below and put it in a file dataTables.cellEdit.css, in the same folder as dataTables.cellEdit.js.

.my-input-class {
  padding: 3px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.my-confirm-class {
  padding: 3px 6px;
  font-size: 12px;
  color: white;
  text-align: center;
  vertical-align: middle;
  border-radius: 4px;
  background-color: #337ab7;
  text-decoration: none;
}

.my-cancel-class {
  padding: 3px 6px;
  font-size: 12px;
  color: white;
  text-align: center;
  vertical-align: middle;
  border-radius: 4px;
  background-color: #a94442;
  text-decoration: none;
}

Now, here is the R code. Don't forget to change the path variable.

library(DT)

dat <- data.frame(
  Action = c("Keep data", "Keep data", "Keep data"),
  X = c(1, 2, 3),
  Y = c("a", "b", "c")
)

callback = JS(
  "function onUpdate(updatedCell, updatedRow, oldValue){}",
  "table.MakeCellsEditable({",
  "  onUpdate: onUpdate,",
  "  inputCss: 'my-input-class',",
  "  confirmationButton: {",
  "    confirmCss: 'my-confirm-class',",
  "    cancelCss: 'my-cancel-class'",
  "  },",
  "  inputTypes: [",
  "    {",
  "      column: 0,",
  "      type: 'list',",
  "      options: [",
  "        {value: 'Keep data', display: 'Keep data'},",
  "        {value: 'Pass',      display: 'Pass'},",
  "        {value: 'Delete',    display: 'Delete'}",
  "      ]",
  "    }",
  "  ]",
  "});")

## the datatable
dtable <- datatable(
  dat, callback = callback, rownames = FALSE, 
  options = list(
    columnDefs = list(
      list(targets = "_all", className = "dt-center")
    )
  )
)
path <- "~/Work/R/DT" # folder containing the files dataTables.cellEdit.js
                      # and dataTables.cellEdit.css
dep <- htmltools::htmlDependency(
  "CellEdit", "1.0.19", path, 
  script = "dataTables.cellEdit.js", stylesheet = "dataTables.cellEdit.css")
dtable$dependencies <- c(dtable$dependencies, list(dep))
dtable

See it in action:

See the possible options on the CellEdit repo. In particular you can disable the editing for certain columns, and you can get rid of the Confirm/Cancel buttons if you want.

这篇关于编辑表格时如何使用数据表在闪亮的表格中创建下拉列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！