R闪亮的下拉列表用于呈现表格中的列

huangapple
go评论165阅读模式
英文:

R shiny Drop down list for columns in rendered table

问题

我正在尝试创建一个下拉列表，以查看每一列中的值，类似于Excel中的方式。但我无法创建下拉列表。我不知道在哪里进行更改以创建这个列表。任何建议都将不胜感激。

代码：

Server.R

  1. library(shiny)
  2. library(DT)
  4. shinyServer(function(input, output, session) {
  6.   mtcars2 = data.frame(
  7.     name = rownames(mtcars), mtcars[, c('mpg', 'hp')],
  8.     stringsAsFactors = FALSE
  9.   )
  10.  
  11.   output$tbl = DT::renderDataTable(
  12.     mtcars2, filter = 'top', server = TRUE, rownames = FALSE,
  13.     options = list(autoWidth = TRUE)
  14.   )
  15. })

ui.r

  1. library(shiny)
  3. shinyUI(fluidPage(
  4.   title = 'Column Filters on the Server Side',
  5.   fluidRow(
  6.     DT::dataTableOutput('tbl')
  7.   )
  8. ))

注意：以上为您提供的代码部分的翻译。

英文:

I am trying to create a drop down list to view the values within each column, similar to in excel. But I am unable to create the dropdown list. I am unable to understand where to make changes to create this list. Any suggestions, highly appreciated.

code:

Server.R

  1. library(shiny)
  2. library(DT)
  4. shinyServer(function(input, output, session) {
  6.   mtcars2 = data.frame(
  7.     name = rownames(mtcars), mtcars[, c('mpg', 'hp')],
  8.     stringsAsFactors = FALSE
  9.   )
  10.  
  11.   output$tbl = DT::renderDataTable(
  12.     mtcars2, filter = 'top', server = TRUE, rownames = FALSE,
  13.     options = list(autoWidth = TRUE)
  14.   )
  15. })

ui.r

  1. library(shiny)
  3. shinyUI(fluidPage(
  4.   title = 'Column Filters on the Server Side',
  5.   fluidRow(
  6.     DT::dataTableOutput('tbl')
  7.   )
  8. ))

答案1

得分: 1

以下是翻译好的代码部分：

  1. library(shiny)
  2. library(DT)
  4. dat <- mtcars
  6. sketch <- htmltools::tags$table(
  7.   tableHeader(c("", names(dat))),
  8.   tableFooter(rep("", 1+ncol(dat)))
  9. )
  11. js <- c(
  12.   "function(){", 
  13.   "  this.api().columns().every(function(i){",
  14.   "    var column = this;",
  15.   "    var select = $('<select><option value=\"\"></option></select>')",
  16.   "      .appendTo( $(column.footer()).empty() )", 
  17.   "      .on('change', function(){",
  18.   "        select.val(null);",
  19.   "      });",
  20.   "    var data = column.data();",
  21.   "    if(i == 0){",
  22.   "      data.each(function(d, j){",
  23.   "        select.append('<option value=\"'+d+'\">'+d+'</option>');",
  24.   "      });",
  25.   "    }else{",
  26.   "      data.unique().sort().each(function(d, j){",
  27.   "        select.append('<option value=\"'+d+'\">'+d+'</option>');",
  28.   "      });",
  29.   "    }",
  30.   "    select.select2({width: '100%'});",
  31.   "  });",
  32.   "}"
  33. )
  36. ui <- fluidPage(
  37.   tags$head(
  38.     tags$link(rel = "stylesheet", href = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"),
  39.     tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js")
  40.   ),
  41.   br(),
  42.   DTOutput("dtable")
  43. )
  45. server <- function(input, output, session){
  46.   output[["dtable"]] <- renderDT({
  47.     datatable(
  48.       dat, container=sketch, 
  49.       options = list(
  50.         initComplete = JS(js),
  51.         columnDefs = list(
  52.           list(targets = "_all", className = "dt-center")
  53.         )
  54.       )
  55.     )
  56.   }, server = FALSE)
  57. }
  59. shinyApp(ui, server)
  1. library(shiny)
  2. library(DT)
  3. library(htmltools)
  5. dat <- mtcars
  7. sketch <- tags$table(
  8.   tags$thead(
  9.     tags$tr(
  10.       tags$th(),
  11.       lapply(names(dat), tags$th)
  12.     ),
  13.     tags$tr(
  14.       tags$th(id = "th0"),
  15.       tags$th(id = "th1"),
  16.       tags$th(id = "th2"),
  17.       tags$th(id = "th3"),
  18.       tags$th(id = "th4"),
  19.       tags$th(id = "th5"),
  20.       tags$th(id = "th6"),
  21.       tags$th(id = "th7"),
  22.       tags$th(id = "th8"),
  23.       tags$th(id = "th9"),
  24.       tags$th(id = "th10"),
  25.       tags$th(id = "th11")
  26.     )
  27.   )
  28. )
  30. js <- c(
  31.   "function(){", 
  32.   "  this.api().columns().every(function(i){",
  33.   "    var column = this;",
  34.   "    var select = $('<select><option value=\"\"></option></select>')",
  35.   "      .appendTo( $('#th'+i).empty() )", 
  36.   "      .on('change', function(){",
  37.   "        select.val(null);",
  38.   "      });",
  39.   "    var data = column.data();",
  40.   "    if(i == 0){",
  41.   "      data.each(function(d, j){",
  42.   "        select.append('<option value=\"'+d+'\">'+d+'</option>');",
  43.   "      });",
  44.   "    }else{",
  45.   "      data.unique().sort().each(function(d, j){",
  46.   "        select.append('<option value=\"'+d+'\">'+d+'</option>');",
  47.   "      });",
  48.   "    }",
  49.   "    select.select2({width: '100%'});",
  50.   "  });",
  51.   "}"
  52. )
  55. ui <- fluidPage(
  56.   tags$head(
  57.     tags$link(rel = "stylesheet", href = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"),
  58.     tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js")
  59.   ),
  60.   br(),
  61.   DTOutput("dtable")
  62. )
  64. server <- function(input, output, session) {
  65.   output[["dtable"]] <- renderDT({
  66.     datatable(
  67.       dat, container=sketch, 
  68.       options = list(
  69.         orderCellsTop = TRUE,
  70.         initComplete = JS(js),
  71.         columnDefs = list(
  72.           list(targets = "_all", className = "dt-center")
  73.         )
  74.       )
  75.     )
  76.   }, server = FALSE)
  77. }
  79. shinyApp(ui, server)
英文:

Try this.

  1. library(shiny)
  2. library(DT)
  4. dat &lt;- mtcars
  6. sketch &lt;- htmltools::tags$table(
  7.   tableHeader(c(&quot;&quot;, names(dat))),
  8.   tableFooter(rep(&quot;&quot;, 1+ncol(dat)))
  9. )
  11. js &lt;- c(
  12.   &quot;function(){&quot;, 
  13.   &quot;  this.api().columns().every(function(i){&quot;,
  14.   &quot;    var column = this;&quot;,
  15.   &quot;    var select = $(&#39;&lt;select&gt;&lt;option value=\&quot;\&quot;&gt;&lt;/option&gt;&lt;/select&gt;&#39;)&quot;,
  16.   &quot;      .appendTo( $(column.footer()).empty() )&quot;, 
  17.   &quot;      .on(&#39;change&#39;, function(){&quot;,
  18.   &quot;        select.val(null);&quot;,
  19.   &quot;      });&quot;,
  20.   &quot;    var data = column.data();&quot;,
  21.   &quot;    if(i == 0){&quot;,
  22.   &quot;      data.each(function(d, j){&quot;,
  23.   &quot;        select.append(&#39;&lt;option value=\&quot;&#39;+d+&#39;\&quot;&gt;&#39;+d+&#39;&lt;/option&gt;&#39;);&quot;,
  24.   &quot;      });&quot;,
  25.   &quot;    }else{&quot;,
  26.   &quot;      data.unique().sort().each(function(d, j){&quot;,
  27.   &quot;        select.append(&#39;&lt;option value=\&quot;&#39;+d+&#39;\&quot;&gt;&#39;+d+&#39;&lt;/option&gt;&#39;);&quot;,
  28.   &quot;      });&quot;,
  29.   &quot;    }&quot;,
  30.   &quot;    select.select2({width: &#39;100%&#39;});&quot;,
  31.   &quot;  });&quot;,
  32.   &quot;}&quot;)
  35. ui &lt;- fluidPage(
  36.   tags$head(
  37.     tags$link(rel = &quot;stylesheet&quot;, href = &quot;https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css&quot;),
  38.     tags$script(src = &quot;https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js&quot;)
  39.   ),
  40.   br(),
  41.   DTOutput(&quot;dtable&quot;)
  42. )
  44. server &lt;- function(input, output, session){
  45.   output[[&quot;dtable&quot;]] &lt;- renderDT({
  46.     datatable(
  47.       dat, container=sketch, 
  48.       options = list(
  49.         initComplete = JS(js),
  50.         columnDefs = list(
  51.           list(targets = &quot;_all&quot;, className = &quot;dt-center&quot;)
  52.         )
  53.       )
  54.     )
  55.   }, server = FALSE)
  56. }
  58. shinyApp(ui, server)

R闪亮的下拉列表用于呈现表格中的列

Edit: dropdowns at the top of the table

  1. library(shiny)
  2. library(DT)
  3. library(htmltools)
  5. dat &lt;- mtcars
  7. sketch &lt;- tags$table(
  8.   tags$thead(
  9.     tags$tr(
  10.       tags$th(),
  11.       lapply(names(dat), tags$th)
  12.     ),
  13.     tags$tr(
  14.       tags$th(id = &quot;th0&quot;),
  15.       tags$th(id = &quot;th1&quot;),
  16.       tags$th(id = &quot;th2&quot;),
  17.       tags$th(id = &quot;th3&quot;),
  18.       tags$th(id = &quot;th4&quot;),
  19.       tags$th(id = &quot;th5&quot;),
  20.       tags$th(id = &quot;th6&quot;),
  21.       tags$th(id = &quot;th7&quot;),
  22.       tags$th(id = &quot;th8&quot;),
  23.       tags$th(id = &quot;th9&quot;),
  24.       tags$th(id = &quot;th10&quot;),
  25.       tags$th(id = &quot;th11&quot;)
  26.     )
  27.   )
  28. )
  30. js &lt;- c(
  31.   &quot;function(){&quot;, 
  32.   &quot;  this.api().columns().every(function(i){&quot;,
  33.   &quot;    var column = this;&quot;,
  34.   &quot;    var select = $(&#39;&lt;select&gt;&lt;option value=\&quot;\&quot;&gt;&lt;/option&gt;&lt;/select&gt;&#39;)&quot;,
  35.   &quot;      .appendTo( $(&#39;#th&#39;+i).empty() )&quot;, 
  36.   &quot;      .on(&#39;change&#39;, function(){&quot;,
  37.   &quot;        select.val(null);&quot;,
  38.   &quot;      });&quot;,
  39.   &quot;    var data = column.data();&quot;,
  40.   &quot;    if(i == 0){&quot;,
  41.   &quot;      data.each(function(d, j){&quot;,
  42.   &quot;        select.append(&#39;&lt;option value=\&quot;&#39;+d+&#39;\&quot;&gt;&#39;+d+&#39;&lt;/option&gt;&#39;);&quot;,
  43.   &quot;      });&quot;,
  44.   &quot;    }else{&quot;,
  45.   &quot;      data.unique().sort().each(function(d, j){&quot;,
  46.   &quot;        select.append(&#39;&lt;option value=\&quot;&#39;+d+&#39;\&quot;&gt;&#39;+d+&#39;&lt;/option&gt;&#39;);&quot;,
  47.   &quot;      });&quot;,
  48.   &quot;    }&quot;,
  49.   &quot;    select.select2({width: &#39;100%&#39;});&quot;,
  50.   &quot;  });&quot;,
  51.   &quot;}&quot;)
  54. ui &lt;- fluidPage(
  55.   tags$head(
  56.     tags$link(rel = &quot;stylesheet&quot;, href = &quot;https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css&quot;),
  57.     tags$script(src = &quot;https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js&quot;)
  58.   ),
  59.   br(),
  60.   DTOutput(&quot;dtable&quot;)
  61. )
  63. server &lt;- function(input, output, session) {
  64.   output[[&quot;dtable&quot;]] &lt;- renderDT({
  65.     datatable(
  66.       dat, container=sketch, 
  67.       options = list(
  68.         orderCellsTop = TRUE,
  69.         initComplete = JS(js),
  70.         columnDefs = list(
  71.           list(targets = &quot;_all&quot;, className = &quot;dt-center&quot;)
  72.         )
  73.       )
  74.     )
  75.   }, server = FALSE)
  76. }
  78. shinyApp(ui, server)

huangapple
  • 本文由 发表于 2023年6月22日 18:58:03
  • 转载请务必保留本文链接：https://go.coder-hub.com/76531193.html
  • dt
  • javascript
  • r
  • shiny
  • shinyapps
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定