编辑表时如何使用数据表在闪亮表中创建下拉列表？

Posted 2023-05-07

【中文标题】编辑表时如何使用数据表在闪亮表中创建下拉列表？

【英文标题】：How to create a dropdown list in a Shiny table using datatable when editing the table?

【发布时间】：2020-07-04 19:22:59

【问题描述】：

我使用 RStudio 读取一个 csv 文件并使用 Shiny 构建一个应用程序作为交互式表格，我现在选择的单元格如图所示是预先填充的。

enter image description here

我想更改下拉列表中给定预定义选项的值，例如“保留数据集”、“通过”等，我搜索了数百种材料，但我真的用完了我的子弹...... ...请帮忙！

【问题讨论】：

你想在列的所有单元格中使用相同的下拉列表吗？

是的，可以，你能详细说明一下吗？非常感谢！！！

这是 ***.com/questions/52593539/… 的副本，但 Stephane Laurent 在这里给出了一个绝妙的答案，而另一个问题没有答案。

【参考方案1】：

我们可以使用 javascript 库 CellEdit 做到这一点。下载文件dataTables.cellEdit.js。

默认情况下，界面不是很时尚。要设置样式，请复制下面的 CSS 代码并将其放入 dataTables.cellEdit.css 文件中，该文件与 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;

现在，这里是 R 代码。不要忘记更改path 变量。

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

查看实际操作：

查看CellEdit repo 上的可能选项。特别是，您可以禁用某些列的编辑，并且您可以根据需要摆脱“确认/取消”按钮。

【讨论】：

非常感谢！是否可以不引用外部文件“CellEdit.js”？是否可以在 DT 中使用回调，如果他/她想使用这个应用程序，下载一个额外的文件对于第三个文件会更复杂，但我知道我们是否必须这样做......