DT::datatable - 选择要删除的行并写入没有闪亮的 csv

Posted 2023-03-24

【中文标题】DT::datatable - 选择要删除的行并写入没有闪亮的 csv

【英文标题】：DT::datatable - Select rows for deletion and write csv WITHOUT Shiny

【发布时间】：2021-09-30 17:04:36

【问题描述】：

我已经设法创建了一个不叫 Shiny 的降价文档：

加载数据帧 编辑表格中的单元格 将编辑后的输出写入 csv。

是否可以选择要删除的行，并从输出的 csv 中删除这些行，而不使用闪亮？

---
title: "Test"
output: html_document
    
---

```r setup, include=FALSE

library(tidyverse)
library(DT)

```

```r edit_table, echo = FALSE   

                            
DT::datatable(head(mtcars, 10),
              editable = 'row', 
              extensions = c('Buttons'),
              options = list(lengthChange = FALSE,
                            #pageLength = 8,
                            scroller = TRUE,
                            scrollY = 500, 
                            scrollX = T,
                            #searching = TRUE,
                            dom = 'Blfrtip',
                            buttons = 'csv'
                            )
              )
```

任何帮助将不胜感激

【问题讨论】：

要在没有闪亮的情况下进行交互，您必须使用 javascript 并直接与 DataTables 表进行交互。

您也许可以使用library(crosstalk) 做到这一点。 DT 包是“串扰兼容”的，并且有一些方法可以使用例如crosstalk::filter_checkbox() 过滤数据。

【参考方案1】：

这是一种使用 JavaScript 库 CellEdit 的方法。

下载文件dataTables.cellEdit.js。

需要一些自定义 CSS。将以下 CSS 代码保存在文件 dataTables.cellEdit.css 中，将其放在包含 dataTables.cellEdit.js 的同一文件夹中。

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


.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;

现在，这是要放入您的块 edit_table 的 R 代码：

callback <- JS(
  "function onUpdate(updatedCell, updatedRow, oldValue) ",
  "table.MakeCellsEditable(",
  "  onUpdate: onUpdate,",
  "  inputCss: 'my-input-class',",
  "  confirmationButton: ",
  "    confirmCss: 'my-confirm-class',",
  "    cancelCss: 'my-cancel-class'",
  "  ",
  ");",
  "$('#mytable tr').on('dblclick', function()",
  "  table.row(this).remove().draw();",
  ");"
)
dtable <- datatable(
  head(mtcars, 10),
  elementId = "mytable",
  extensions = "Buttons",
  callback = callback,
  options = list(
    lengthChange = FALSE,
    scroller     = TRUE,
    scrollY      = 500, 
    scrollX      = TRUE,
    dom          = "Blfrtip",
    buttons      = "csv"
  )
)
path <- "." # path to folder containing dataTables.cellEdit.(js|css)
dep <- htmltools::htmlDependency(
  "CellEdit", "1.0.19", path, 
  script = "dataTables.cellEdit.js", 
  stylesheet = "dataTables.cellEdit.css", 
  all_files = FALSE)
dtable$dependencies <- c(dtable$dependencies, list(dep))
dtable

这里我把两个dataTables.cellEdit文件放到了R Markdown文档的文件夹里（path <- "."）。

您可以通过单击一个单元格来编辑它，并通过双击它来删除一行。

---

编辑：更好的行删除

双击删除一行不是很好。这与单元格编辑冲突。这是另一种方法，可以通过右键单击删除一行。它使用 JavaScript 库 jQuery-contextMenu。

去here。下载文件 jquery.contextMenu.min.js、jquery.contextMenu.min.css 和 jquery.ui.position.js。将它们放在path 文件夹中。同时下载四个字体文件context-menu-icons.eot、context-menu-icons.ttf、context-menu-icons.woff和 context-menu-icons.woff2，并将它们放在 path 文件夹的子文件夹 font 中。现在，这里是代码：

library(DT)
library(htmltools)
callback <- JS(
  "function onUpdate(updatedCell, updatedRow, oldValue) ",
  "table.MakeCellsEditable(",
  "  onUpdate: onUpdate,",
  "  inputCss: 'my-input-class',",
  "  confirmationButton: ",
  "    confirmCss: 'my-confirm-class',",
  "    cancelCss: 'my-cancel-class'",
  "  ",
  ");",
  "$.contextMenu(",
  "  selector: '#mytable tr',", 
  "  trigger: 'right',",
  "  autoHide: true,",
  "  items: ",
  "    delete: ",
  "      name: 'Delete this row',", 
  "      icon: 'delete',", 
  "      callback: function(itemKey, opts, e)",
  "        table.row(this).remove().draw();",
  "      ",
  "    ",
  "  ",
  ");"
)
dtable <- datatable(
  head(mtcars, 10),
  elementId = "mytable",
  extensions = "Buttons",
  callback = callback,
  options = list(
    lengthChange = FALSE,
    scroller     = TRUE,
    scrollY      = 500, 
    scrollX      = TRUE,
    dom          = "Blfrtip",
    buttons      = "csv"
  )
)
path <- "." # path to folder containing the js and css files, and the font folder
dep1 <- htmlDependency(
  "CellEdit", "1.0.19", path, 
  script = "dataTables.cellEdit.js", 
  stylesheet = "dataTables.cellEdit.css", 
  all_files = FALSE)
dep2 <- htmlDependency(
  "jQuery-contextMenu", "2.9.2", path, 
  script = "jquery.contextMenu.min.js", 
  stylesheet = "jquery.contextMenu.min.css", 
  all_files = FALSE)
dep3 <- htmlDependency(
  "jQuery-ui-position", "1.12.1", path, 
  script = "jquery.ui.position.js", 
  all_files = FALSE)
tagList(dtable, dep1, dep2, dep3)

现在，您可以通过右键单击删除行：