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,但没有成功。
我猜我需要三个函数来做到这一点:
- 当用户单击按钮 'Move selected rows in table 1 to table 2'
时,将 'Table 1' 的选定行复制到 'Table 2'
- 当用户单击按钮 'Remove selected rows in table 2'
时删除 'Table 2' 中的选定行
- 当用户单击按钮 'Remoeve all rows in table 2'
时删除 '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>
我正在尝试在 rmarkdown 中生成一个 HTML 文件,其中包含两个 'DT' 包生成的 table 文件。目标是为用户提供工具,将行从一个 table 复制到另一个 table 并通过单击三个按钮清空其中一个 table 行。
如果我可以使用 Shiny,这将相当简单,但因为我需要一个具有此功能的独立 HTML 文件,所以 Shiny 不是一个选项。我一直在尝试在回调函数中使用 JS,但没有成功。
我猜我需要三个函数来做到这一点:
- 当用户单击按钮 'Move selected rows in table 1 to table 2' 时,将 'Table 1' 的选定行复制到 'Table 2'
- 当用户单击按钮 'Remove selected rows in table 2' 时删除 'Table 2' 中的选定行
- 当用户单击按钮 'Remoeve all rows in table 2' 时删除 '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>