En utilisant R Shiny, je souhaite afficher un tableau (par exemple via le package "DT") où chaque cellule contient une case à cocher. À côté de chaque en-tête de ligne et de colonne, je souhaite afficher une « Sélectionner tout »/« case à cocher principale » qui, une fois sélectionnée, sélectionnera toutes les cases à cocher de la ligne ou de la colonne correspondante. En tant que fonctionnalité supplémentaire, la case à cocher dans la cellule supérieure gauche sélectionnera toutes les cases du tableau. Un exemple :
J'ai trouvé ici un exemple de cette fonctionnalité où une colonne a une case à cocher principale (en utilisant du JavaScript) mais je n'arrive pas à comprendre comment l'étendre à mes besoins.
library(shiny) library(DT) ui <- fluidPage( # Sidebar panel sidebarPanel(), # Main panel with the table mainPanel( DTOutput("myTable") ) ) server <- function(input, output){ dat <- data.frame( vapply(1:6, function(i){ as.character( checkboxInput(paste0("col1-", i), label = NULL, width = "150px") ) }, character(1)), vapply(1:6, function(i){ as.character( checkboxInput(paste0("col2-", i), label = NULL, width = "150px") ) }, character(1)), vapply(1:6, function(i){ as.character( checkboxInput(paste0("col3-", i), label = NULL, width = "150px") ) }, character(1)) ) names(dat) <- c( as.character(checkboxInput("col1", label = "1", width = "150px")), as.character(checkboxInput("col2", label = "2", width = "150px")), as.character(checkboxInput("col3", label = "3", width = "150px")) ) row_names <- LETTERS[1:6] rownames(dat) <- row_names output$myTable <- renderDT({ datatable( dat, escape = FALSE, options = list( columnDefs = list( list(targets = c(1, 2, 3), orderable = FALSE, className = "dt-center") ) ), callback = JS( "$('#col1').on('click', function(){", " var cboxes = $('[id^=col1-]');", " var checked = $('#col1').is(':checked');", " cboxes.each(function(i, cbox) {", " $(cbox).prop('checked', checked);", " });", "});", "$('#col2').on('click', function(){", " var cboxes = $('[id^=col2-]');", " var checked = $('#col2').is(':checked');", " cboxes.each(function(i, cbox) {", " $(cbox).prop('checked', checked);", " });", "});", "$('#col3').on('click', function(){", " var cboxes = $('[id^=col3-]');", " var checked = $('#col3').is(':checked');", " cboxes.each(function(i, cbox) {", " $(cbox).prop('checked', checked);", " });", "});" ) ) }) } shinyApp(ui, server)
C'est un début, mais je n'arrive pas à comprendre comment placer la case à cocher principale à côté de la ligne, ni à trouver une case à cocher principale dans le coin supérieur gauche de toutes les cases. De plus, l'ensemble est un peu grand - ce serait bien s'il était plus compact.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
library(shiny) library(DT) rowName <- function(L) { as.character( checkboxInput(paste0("row", L), label = L, width = "150px") ) } rowNames <- vapply(LETTERS[1:6], rowName, character(1)) ui <- fluidPage( # Sidebar panel sidebarPanel(), # Main panel with the table mainPanel( DTOutput("myTable") ) ) server <- function(input, output){ dat <- data.frame( vapply(LETTERS[1:6], function(i){ as.character( checkboxInput(paste0("col1-", i), label = NULL, width = "150px") ) }, character(1)), vapply(LETTERS[1:6], function(i){ as.character( checkboxInput(paste0("col2-", i), label = NULL, width = "150px") ) }, character(1)), vapply(LETTERS[1:6], function(i){ as.character( checkboxInput(paste0("col3-", i), label = NULL, width = "150px") ) }, character(1)) ) names(dat) <- c( as.character(checkboxInput("col1", label = "1", width = "150px")), as.character(checkboxInput("col2", label = "2", width = "150px")), as.character(checkboxInput("col3", label = "3", width = "150px")) ) rownames(dat) <- rowNames output$myTable <- renderDT({ datatable( dat, escape = FALSE, select = "none", options = list( columnDefs = list( list(targets = c(1, 2, 3), orderable = FALSE, className = "dt-center") ), initComplete = JS( "function() {", " $('#col1').on('click', function(){", " var cboxes = $('[id^=col1-]');", " var checked = $('#col1').is(':checked');", " cboxes.each(function(i, cbox) {", " $(cbox).prop('checked', checked);", " });", " });", " $('#col2').on('click', function(){", " var cboxes = $('[id^=col2-]');", " var checked = $('#col2').is(':checked');", " cboxes.each(function(i, cbox) {", " $(cbox).prop('checked', checked);", " });", " });", " $('#col3').on('click', function(){", " var cboxes = $('[id^=col3-]');", " var checked = $('#col3').is(':checked');", " cboxes.each(function(i, cbox) {", " $(cbox).prop('checked', checked);", " });", " });", " $('#rowA').on('click', function(){", " var cboxes = $('[id$=-A]');", " var checked = $('#rowA').is(':checked');", " cboxes.each(function(i, cbox) {", " $(cbox).prop('checked', checked);", " });", " });", " $('#rowB').on('click', function(){", " var cboxes = $('[id$=-B]');", " var checked = $('#rowB').is(':checked');", " cboxes.each(function(i, cbox) {", " $(cbox).prop('checked', checked);", " });", " });", " $('#rowC').on('click', function(){", " var cboxes = $('[id$=-C]');", " var checked = $('#rowC').is(':checked');", " cboxes.each(function(i, cbox) {", " $(cbox).prop('checked', checked);", " });", " });", " $('#rowD').on('click', function(){", " var cboxes = $('[id$=-D]');", " var checked = $('#rowD').is(':checked');", " cboxes.each(function(i, cbox) {", " $(cbox).prop('checked', checked);", " });", " });", " $('#rowE').on('click', function(){", " var cboxes = $('[id$=-E]');", " var checked = $('#rowE').is(':checked');", " cboxes.each(function(i, cbox) {", " $(cbox).prop('checked', checked);", " });", " });", " $('#rowF').on('click', function(){", " var cboxes = $('[id$=-F]');", " var checked = $('#rowF').is(':checked');", " cboxes.each(function(i, cbox) {", " $(cbox).prop('checked', checked);", " });", " });", "}" ), preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'), drawCallback = JS('function() { Shiny.bindAll(this.api().table().node()); } ') ) ) }) } shinyApp(ui, server)Modifier : case à cocher "Sélectionner tout"
library(shiny) library(DT) library(htmltools) rowName <- function(L) { as.character( checkboxInput(paste0("row", L), label = L, width = "150px") ) } rowNames <- vapply(LETTERS[1:6], rowName, character(1)) sketch <- htmltools::withTags( table( class = "display", thead( tr( th(HTML(as.character(checkboxInput("allboxes", label = "ALL", width = "150px")))), th(HTML(as.character(checkboxInput("col1", label = "1", width = "150px")))), th(HTML(as.character(checkboxInput("col2", label = "2", width = "150px")))), th(HTML(as.character(checkboxInput("col3", label = "3", width = "150px")))) ) ) ) ) ui <- fluidPage( br(), # Sidebar panel sidebarPanel(), # Main panel with the table mainPanel( DTOutput("myTable") ) ) server <- function(input, output){ dat <- data.frame( vapply(LETTERS[1:6], function(i){ as.character( checkboxInput(paste0("col1-", i), label = NULL, width = "150px") ) }, character(1)), vapply(LETTERS[1:6], function(i){ as.character( checkboxInput(paste0("col2-", i), label = NULL, width = "150px") ) }, character(1)), vapply(LETTERS[1:6], function(i){ as.character( checkboxInput(paste0("col3-", i), label = NULL, width = "150px") ) }, character(1)) ) rownames(dat) <- rowNames output$myTable <- renderDT({ datatable( dat, container = sketch, escape = FALSE, select = "none", options = list( columnDefs = list( list(targets = c(1, 2, 3), orderable = FALSE, className = "dt-center") ), initComplete = JS( "function() {", " $('#allboxes').on('click', function(){", " var cboxes = $('input[type=checkbox]');", " var checked = $('#allboxes').is(':checked');", " cboxes.each(function(i, cbox) {", " $(cbox).prop('checked', checked);", " });", " });", " $('#col1').on('click', function(){", " var cboxes = $('[id^=col1-]');", " var checked = $('#col1').is(':checked');", " cboxes.each(function(i, cbox) {", " $(cbox).prop('checked', checked);", " });", " });", " $('#col2').on('click', function(){", " var cboxes = $('[id^=col2-]');", " var checked = $('#col2').is(':checked');", " cboxes.each(function(i, cbox) {", " $(cbox).prop('checked', checked);", " });", " });", " $('#col3').on('click', function(){", " var cboxes = $('[id^=col3-]');", " var checked = $('#col3').is(':checked');", " cboxes.each(function(i, cbox) {", " $(cbox).prop('checked', checked);", " });", " });", " $('#rowA').on('click', function(){", " var cboxes = $('[id$=-A]');", " var checked = $('#rowA').is(':checked');", " cboxes.each(function(i, cbox) {", " $(cbox).prop('checked', checked);", " });", " });", " $('#rowB').on('click', function(){", " var cboxes = $('[id$=-B]');", " var checked = $('#rowB').is(':checked');", " cboxes.each(function(i, cbox) {", " $(cbox).prop('checked', checked);", " });", " });", " $('#rowC').on('click', function(){", " var cboxes = $('[id$=-C]');", " var checked = $('#rowC').is(':checked');", " cboxes.each(function(i, cbox) {", " $(cbox).prop('checked', checked);", " });", " });", " $('#rowD').on('click', function(){", " var cboxes = $('[id$=-D]');", " var checked = $('#rowD').is(':checked');", " cboxes.each(function(i, cbox) {", " $(cbox).prop('checked', checked);", " });", " });", " $('#rowE').on('click', function(){", " var cboxes = $('[id$=-E]');", " var checked = $('#rowE').is(':checked');", " cboxes.each(function(i, cbox) {", " $(cbox).prop('checked', checked);", " });", " });", " $('#rowF').on('click', function(){", " var cboxes = $('[id$=-F]');", " var checked = $('#rowF').is(':checked');", " cboxes.each(function(i, cbox) {", " $(cbox).prop('checked', checked);", " });", " });", "}" ), preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'), drawCallback = JS('function() { Shiny.bindAll(this.api().table().node()); } ') ) ) }) } shinyApp(ui, server)