如何在允许多个选择的情况下保持 pickerInput 的选择顺序？

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

How to preserve the selection order of a pickerInput if multiple selections are allowed?

问题

让我们以我的代码为例。如果我使用 selectInput 选项，在那里我可以选择多个选项，我选择的第一个选项将首先列出，第二个选项将列在第二位，依此类推。

但是，如果我使用 pickerInput 选项，无论我选择的顺序如何，下拉列表中首先列出的选项将首先列出。是否有一种方法让 pickerInput 模拟类似于 selectInput 的行为？

例如，如果我首先选择了 Name 1，然后选择了 Name 3，无论是 selectInput 还是 pickerInput 都会给我输出 Sunday;Tuesday。

然而，如果我首先选择了 Name 3，然后选择了 Name 1，selectInput 会给出 Tuesday;Sunday，但 pickerInput 会给出 Sunday;Tuesday。

如何确保 pickerInput 排列的输出类似于 selectInput？

以下是代码部分：

  1. library(shiny)
  2. library(shinydashboard)
  3. library(shinyWidgets)
  5. choices_df = data.frame(
  6.   names = c('Name 1', 'Name 2', 'Name 3'),
  7.   id = c("Sunday","Monday","Tuesday")
  8. )
  10. ui <- dashboardPage(
  11.   header = dashboardHeader(),
  12.   sidebar = dashboardSidebar(),
  13.   body = dashboardBody(
  14.     selectInput(
  15.       "input",
  16.       h5("输出应该是选项名称，而不是其值"),
  17.       choices= setNames(choices_df$id,choices_df$names),
  18.       multiple = TRUE
  19.     ),
  20.     textOutput("output"),
  21.     pickerInput(
  22.       "input2",
  23.       h5("输出应该是选项名称，而不是其值"),
  24.       choices= setNames(choices_df$id,choices_df$names),
  25.       multiple = TRUE
  26.     ),
  27.     textOutput("output2")
  28.   )
  29. )
  31. server <- function(input, output, session) {
  32.   output$output <- renderPrint({paste(input$input, collapse = ";")}) 
  33.   output$output2 <- renderPrint({paste(input$input2, collapse = ";")})
  34. }
  36. shinyApp(ui = ui, server = server)
英文:

Let's take my code as an example. If I use selectInput option where I can pick multiple choices, the first choice that I picked would be listed first, second choice would be listed second, etc.

However, if I use pickerInput option where I would pick multiple choices, no matter the order in which I pick the choice, whatever is listed first in the dropdown would be listed first instead. Is there a way for the pickerInput to emulate something similar to what selectInput does?

As an example, if I happened to pick Name 1 first and then Name 3 second, both selectInput and pickerInput would give me an output of Sunday;Tuesday.

However, if I pick Name 3 first and then Name 1 second, selectInput would give Tuesday;Sunday, but pickerInput would give Sunday;Tuesday.

How do I make sure pickerInput ordered the output similar to selectInput?

Code is below:

  1. library(shiny)
  2. library(shinydashboard)
  3. library(shinyWidgets)
  5. choices_df = data.frame(
  6.   names = c(&#39;Name 1&#39;, &#39;Name 2&#39;, &#39;Name 3&#39;),
  7.   id = c(&quot;Sunday&quot;,&quot;Monday&quot;,&quot;Tuesday&quot;)#seq(3)
  8. )
  10. ui &lt;- dashboardPage(
  11.   header = dashboardHeader(),
  12.   sidebar = dashboardSidebar(),
  13.   body = dashboardBody(
  14.     selectInput(
  15.       &quot;input&quot;,
  16.       h5(&quot;The output should give the choice name instead of its value&quot;),
  17.       choices= setNames(choices_df$id,choices_df$names),
  18.       multiple = TRUE
  19.     ),
  20.     textOutput(&quot;output&quot;),
  21.     pickerInput(
  22.       &quot;input2&quot;,
  23.       h5(&quot;The output should give the choice name instead of its value&quot;),
  24.       choices= setNames(choices_df$id,choices_df$names),
  25.       multiple = TRUE
  26.     ),
  27.     textOutput(&quot;output2&quot;)
  28.   )
  29. )
  31. server &lt;- function(input, output, session) {
  32.   #output$output &lt;- renderPrint({paste(choices_df$names[choices_df$id==input$input])})  
  33.   output$output &lt;- renderPrint({paste(input$input, collapse = &quot;;&quot;)}) 
  34.   output$output2 &lt;- renderPrint({paste(input$input2, collapse = &quot;;&quot;)})
  35. }
  37. shinyApp(ui = ui, server = server)

答案1

得分: 1

需要使用 pickerInput 吗？目前不可能，因为 pickerInput 使用的是 bootstrap-select 库，该库不包含这种灵活性。请查看 此处。

一个没有使用 pickerInput 的解决方案是使用 virtualSelectInput。

  1. virtualSelectInput(
  2.       "input2",
  3.       h5("输出应该显示选择项的名称而不是其值"),
  4.       choices = prepare_choices(choices_df, names, id),
  5.       multiple = TRUE
  6.     )
英文:

Do you need to do it with pickerInput? At the moment, it's not possible since pickerInput uses the bootstrap-select library which doesn't include that flexibility. See here.

One solution without pickerInput is to use the virtualSelectInput.

  1. virtualSelectInput(
  2.       &quot;input2&quot;,
  3.       h5(&quot;The output should give the choice name instead of its value&quot;),
  4.       choices = prepare_choices(choices_df, names, id),
  5.       multiple = TRUE
  6.     )

答案2

得分: 0

以下是您要翻译的内容：

您可以添加以下的JS代码，以保持pickerInput()的选择顺序，类似于selectInput()的行为。

  1. $(function(){
  2.     $('#input2').on('change.bs.select loaded.bs.select',
  3.         function(event) {
  4.             $(this).find('option:selected').prependTo(this);
  5.         });
  6. });

如何在允许多个选择的情况下保持 pickerInput 的选择顺序？

  1. library(shiny)
  2. library(shinydashboard)
  3. library(shinyWidgets)
  5. js <- HTML(
  6.     "
  7. $(function(){
  8.     $('#input2').on('change.bs.select loaded.bs.select',
  9.         function(event) {
  10.             $(this).find('option:selected').prependTo(this);
  11.         });
  12. });
  13. "
  14. )
  16. choices_df = data.frame(
  17.     names = c('Name 1', 'Name 2', 'Name 3'),
  18.     id = c("Sunday", "Monday", "Tuesday")#seq(3)
  19. )
  21. ui <- dashboardPage(
  22.     tags$head(tags$script(js)),
  23.     header = dashboardHeader(),
  24.     sidebar = dashboardSidebar(),
  25.     body = dashboardBody(
  26.         selectInput(
  27.             "input",
  28.             h5(
  29.                 "selectInput: 输出应该是选择的名称而不是其值"
  30.             ),
  31.             choices = setNames(choices_df$id, choices_df$names),
  32.             multiple = TRUE
  33.         ),
  34.         textOutput("output"),
  35.         pickerInput(
  36.             "input2",
  37.             h5(
  38.                 "pickerInput: 输出应该是选择的名称而不是其值"
  39.             ),
  40.             choices = setNames(choices_df$id, choices_df$names),
  41.             multiple = TRUE
  42.         ),
  43.         textOutput("output2")
  44.     )
  45. )
  47. server <- function(input, output, session) {
  48.     #output$output <- renderPrint({paste(choices_df$names[choices_df$id==input$input])})
  49.     output$output <-
  50.         renderPrint({
  51.             paste(input$input, collapse = ";")
  52.         })
  53.     output$output2 <-
  54.         renderPrint({
  55.             paste(input$input2, collapse = ";")
  56.         })
  57. }
  59. shinyApp(ui = ui, server = server)
英文:

You could add the following JS in order to retain the selection order of a pickerInput() similar to the behaviour of a selectInput().

  1. $(function(){
  2.     $(&#39;#input2&#39;).on(&#39;change.bs.select loaded.bs.select&#39;,
  3.         function(event) {
  4.             $(this).find(&#39;option:selected&#39;).prependTo(this);
  5.         });
  6. });

如何在允许多个选择的情况下保持 pickerInput 的选择顺序？

  1. library(shiny)
  2. library(shinydashboard)
  3. library(shinyWidgets)
  5. js &lt;- HTML(
  6.     &quot;
  7. $(function(){
  8.     $(&#39;#input2&#39;).on(&#39;change.bs.select loaded.bs.select&#39;,
  9.         function(event) {
  10.             $(this).find(&#39;option:selected&#39;).prependTo(this);
  11.         });
  12. });
  13. &quot;
  14. )
  16. choices_df = data.frame(
  17.     names = c(&#39;Name 1&#39;, &#39;Name 2&#39;, &#39;Name 3&#39;),
  18.     id = c(&quot;Sunday&quot;, &quot;Monday&quot;, &quot;Tuesday&quot;)#seq(3)
  19. )
  21. ui &lt;- dashboardPage(
  22.     tags$head(tags$script(js)),
  23.     header = dashboardHeader(),
  24.     sidebar = dashboardSidebar(),
  25.     body = dashboardBody(
  26.         selectInput(
  27.             &quot;input&quot;,
  28.             h5(
  29.                 &quot;selectInput: The output should give the choice name instead of its value&quot;
  30.             ),
  31.             choices = setNames(choices_df$id, choices_df$names),
  32.             multiple = TRUE
  33.         ),
  34.         textOutput(&quot;output&quot;),
  35.         pickerInput(
  36.             &quot;input2&quot;,
  37.             h5(
  38.                 &quot;pickerInput: The output should give the choice name instead of its value&quot;
  39.             ),
  40.             choices = setNames(choices_df$id, choices_df$names),
  41.             multiple = TRUE
  42.         ),
  43.         textOutput(&quot;output2&quot;)
  44.     )
  45. )
  47. server &lt;- function(input, output, session) {
  48.     #output$output &lt;- renderPrint({paste(choices_df$names[choices_df$id==input$input])})
  49.     output$output &lt;-
  50.         renderPrint({
  51.             paste(input$input, collapse = &quot;;&quot;)
  52.         })
  53.     output$output2 &lt;-
  54.         renderPrint({
  55.             paste(input$input2, collapse = &quot;;&quot;)
  56.         })
  57. }
  59. shinyApp(ui = ui, server = server)

huangapple
  • 本文由 发表于 2023年6月30日 01:50:09
  • 转载请务必保留本文链接：https://go.coder-hub.com/76583489.html
  • pickerinput
  • r
  • shiny
  • shinywidgets
匿名

发表评论

匿名网友

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

确定