如何在R Shiny的DT表格中实现行/列及全局全选复选框？

以下是完整的实现代码，整合了全局全选、行全选、列全选功能，同时优化了布局冗余问题：

library(shiny)
library(DT)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  titlePanel("DT带全选复选框的表格"),
  DTOutput("checkbox_table")
)

server <- function(input, output, session) {
  # 模拟数据
  df <- data.frame(
    Row_Select = "", # 行全选列
    Col1 = rep("", 5),
    Col2 = rep("", 5),
    Col3 = rep("", 5),
    stringsAsFactors = FALSE
  )
  
  # 自定义表格容器：添加全局全选和列全选框
  table_container <- tags$table(
    tags$thead(
      tags$tr(
        tags$th(tags$input(type = "checkbox", id = "global_select")), # 全局全选
        tags$th(tags$input(type = "checkbox", id = "col1_select"), "列1"), # 列全选
        tags$th(tags$input(type = "checkbox", id = "col2_select"), "列2"),
        tags$th(tags$input(type = "checkbox", id = "col3_select"), "列3")
      )
    ),
    tags$tbody()
  )
  
  output$checkbox_table <- renderDT({
    # 为单元格添加复选框
    df[, -1] <- lapply(df[, -1], function(x) {
      sapply(x, function(y) {
        tags$input(type = "checkbox", class = "cell_checkbox")
      })
    })
    # 为行全选列添加复选框
    df$Row_Select <- sapply(df$Row_Select, function(x) {
      tags$input(type = "checkbox", class = "row_select")
    })
    
    datatable(
      df,
      container = table_container,
      escape = FALSE,
      selection = "none",
      options = list(
        dom = "t", # 只显示表格，去掉冗余的搜索、分页栏
        ordering = FALSE,
        columnDefs = list(list(width = "50px", targets = 0)) # 行全选列固定宽度
      )
    ) %>%
      formatStyle(0, textAlign = "center") # 行全选框居中
  }, server = FALSE)
  
  # 添加JS交互逻辑
  observe({
    runjs('
      // 全局全选逻辑
      $("#global_select").on("change", function() {
        var isChecked = $(this).prop("checked");
        $(".row_select, .cell_checkbox, #col1_select, #col2_select, #col3_select").prop("checked", isChecked);
      });
      
      // 列全选逻辑
      $("#col1_select").on("change", function() {
        var isChecked = $(this).prop("checked");
        $("td:nth-child(2) .cell_checkbox").prop("checked", isChecked);
        updateGlobalSelect();
      });
      
      $("#col2_select").on("change", function() {
        var isChecked = $(this).prop("checked");
        $("td:nth-child(3) .cell_checkbox").prop("checked", isChecked);
        updateGlobalSelect();
      });
      
      $("#col3_select").on("change", function() {
        var isChecked = $(this).prop("checked");
        $("td:nth-child(4) .cell_checkbox").prop("checked", isChecked);
        updateGlobalSelect();
      });
      
      // 行全选逻辑
      $(".row_select").on("change", function() {
        var isChecked = $(this).prop("checked");
        $(this).closest("tr").find(".cell_checkbox").prop("checked", isChecked);
        updateColSelects();
        updateGlobalSelect();
      });
      
      // 单元格复选框变化时，同步行、列、全局全选状态
      $(".cell_checkbox").on("change", function() {
        updateRowSelect($(this).closest("tr"));
        updateColSelects();
        updateGlobalSelect();
      });
      
      // 更新全局全选状态
      function updateGlobalSelect() {
        var allChecked = $(".cell_checkbox").length === $(".cell_checkbox:checked").length;
        $("#global_select").prop("checked", allChecked);
      }
      
      // 更新行全选状态
      function updateRowSelect(row) {
        var rowChecked = row.find(".cell_checkbox").length === row.find(".cell_checkbox:checked").length;
        row.find(".row_select").prop("checked", rowChecked);
      }
      
      // 更新列全选状态
      function updateColSelects() {
        $("#col1_select").prop("checked", $("td:nth-child(2) .cell_checkbox").length === $("td:nth-child(2) .cell_checkbox:checked").length);
        $("#col2_select").prop("checked", $("td:nth-child(3) .cell_checkbox").length === $("td:nth-child(3) .cell_checkbox:checked").length);
        $("#col3_select").prop("checked", $("td:nth-child(4) .cell_checkbox").length === $("td:nth-child(4) .cell_checkbox:checked").length);
      }
    ')
  })
}

shinyApp(ui, server)

关键实现说明 #

• 布局优化：通过dom = "t"移除DT默认的搜索、分页等冗余组件，仅保留表格主体；为行全选列设置固定宽度，避免布局错乱。
• 全局全选：在表格左上角自定义表头单元格添加全局复选框，通过JS统一控制所有行选、列选和单元格复选框的状态。
• 行全选：每行第一列添加类名为row_select的复选框，点击时选中当前行所有单元格的复选框，同时支持反向同步——当单元格全部勾选时，自动激活行全选框。
• 列全选：每列表头添加列全选复选框，点击时选中当前列所有单元格的复选框，同样支持反向同步逻辑。
• 状态联动：所有复选框的状态变化都会触发全局、行、列的状态同步，确保选中逻辑完全一致。

注意：代码依赖shinyjs包，若未安装需先运行install.packages("shinyjs")完成安装。

内容的提问来源于stack exchange，提问作者ddm_ingram