Copy/delete rmarkdown HTML-文档中两个数据表(包:DT)中的行使用 JS

Copy/delete rows in two datatables (package: DT) in an rmarkdown HTML-document using JS

我正在尝试在 rmarkdown 中生成一个 HTML 文件,其中包含两个 'DT' 包生成的 table 文件。目标是为用户提供工具,将行从一个 table 复制到另一个 table 并通过单击三个按钮清空其中一个 table 行。

如果我可以使用 Shiny,这将相当简单,但因为我需要一个具有此功能的独立 HTML 文件,所以 Shiny 不是一个选项。我一直在尝试在回调函数中使用 JS,但没有成功。

我猜我需要三个函数来做到这一点:

  1. 当用户单击按钮 'Move selected rows in table 1 to table 2'
  2. 时,将 'Table 1' 的选定行复制到 'Table 2'
  3. 当用户单击按钮 'Remove selected rows in table 2'
  4. 时删除 'Table 2' 中的选定行
  5. 当用户单击按钮 'Remoeve all rows in table 2'
  6. 时删除 'Table 2' 中的所有行

下面是一个最小的可重现示例。

---
title: ""
output: 
 html_document:
  self_contained: false
---

```{r, include=FALSE}
knitr::opts_chunk$set(fig.width=8, fig.height=6, echo=FALSE, warning=FALSE, message=FALSE)
library(DT)
library(dplyr)
```

***

<div class = "row">
<div class = "col-md-6">
<button type="button" class="btn btn-default btn-sm">
  <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> Move selected rows in table 1 to table 2
</button>

```{r , echo = FALSE}
library(DT)
dt1 = mtcars[1:5,1:3]
dt2 = dt1

datatable(dt1, 
          elementId = "table1",
          caption = "Table 1",
          extensions = c("Select"),
          options = list(
            select = list(style = "multi"),
            dom = "t"
          )
)
```
</div>

<div class = "col-md-6">
<button type="button" class="btn btn-default btn-sm">
  Remove selected rows in table 2
</button>
<button type="button" class="btn btn-default btn-sm">
  Remove all rows in table 2
</button>

```{r , echo = FALSE}
datatable(dt2 %>% slice(1),
          caption = "Table 2",
          elementId = "table2",
          extensions = c("Select", "Buttons"),
          options = list(
            select = list(style = "multi"),
            dom = "tB",
            buttons = list(
              list(
                title = NULL,
                extend = "excel",
                text = 'Save as Excel',
                filename = "selected_variables"
              )
            )
          )
)
```
</div>

我已经完成了第一部分:移动选定的行。这应该可以帮助您完成其他部分。如果您有任何问题,请联系我。

---
title: ""
output: 
 html_document:
  self_contained: false
---

```{r, include=FALSE}
knitr::opts_chunk$set(
  fig.width=8, fig.height=6, echo=FALSE, warning=FALSE, message=FALSE
)
library(DT)
library(dplyr)
```

***

<div class = "row">
<div class = "col-md-6">
<button id="btn_move" type="button" class="btn btn-default btn-sm">
  <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> Move selected rows in table 1 to table 2
</button>

```{r , echo = FALSE}
library(DT)
dt1 = mtcars[1:5,1:3]
dt2 = dt1

callback1 <- c(
  "var table2;",
  "setTimeout(function(){table2 = $('#table2').find('table').DataTable();});",
  "$('#btn_move').on('click', function(){",
  "  var selectedRows = table.rows({selected: true});",
  "  var indices = selectedRows[0];",
  "  var rowsData = selectedRows.data();",
  "  for(var i=0; i<indices.length; i++){",
  "    var data = rowsData[i];",
  "    table2.row.add(data).draw();",
  "    table.row(indices[i]-i).remove().draw();",
  "  }",
  "});"
)

datatable(dt1, 
          elementId = "table1",
          caption = "Table 1",
          extensions = "Select",
          selection = "none",
          callback = JS(callback1),
          options = list(
            select = list(style = "multi"),
            dom = "t"
          )
)
```
</div>

<div class = "col-md-6">
<button type="button" class="btn btn-default btn-sm">
  Remove selected rows in table 2
</button>
<button type="button" class="btn btn-default btn-sm">
  Remove all rows in table 2
</button>

```{r , echo = FALSE}
datatable(dt2 %>% slice(1),
          caption = "Table 2",
          elementId = "table2",
          extensions = c("Select", "Buttons"),
          selection = "none",
          options = list(
            select = list(style = "multi"),
            dom = "tB",
            buttons = list(
              list(
                title = NULL,
                extend = "excel",
                text = 'Save as Excel',
                filename = "selected_variables"
              )
            )
          )
)
```
</div>