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

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

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

以下是代码部分:

library(shiny)
library(shinydashboard)
library(shinyWidgets)

choices_df = data.frame(
  names = c('Name 1', 'Name 2', 'Name 3'),
  id = c("Sunday","Monday","Tuesday")
)

ui <- dashboardPage(
  header = dashboardHeader(),
  sidebar = dashboardSidebar(),
  body = dashboardBody(
    selectInput(
      "input",
      h5("输出应该是选项名称,而不是其值"),
      choices= setNames(choices_df$id,choices_df$names),
      multiple = TRUE
    ),
    textOutput("output"),
    pickerInput(
      "input2",
      h5("输出应该是选项名称,而不是其值"),
      choices= setNames(choices_df$id,choices_df$names),
      multiple = TRUE
    ),
    textOutput("output2")
  )
)

server <- function(input, output, session) {
  output$output <- renderPrint({paste(input$input, collapse = ";")}) 
  output$output2 <- renderPrint({paste(input$input2, collapse = ";")})
}

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:

library(shiny)
library(shinydashboard)
library(shinyWidgets)

choices_df = data.frame(
  names = c(&#39;Name 1&#39;, &#39;Name 2&#39;, &#39;Name 3&#39;),
  id = c(&quot;Sunday&quot;,&quot;Monday&quot;,&quot;Tuesday&quot;)#seq(3)
)

ui &lt;- dashboardPage(
  header = dashboardHeader(),
  sidebar = dashboardSidebar(),
  body = dashboardBody(
    selectInput(
      &quot;input&quot;,
      h5(&quot;The output should give the choice name instead of its value&quot;),
      choices= setNames(choices_df$id,choices_df$names),
      multiple = TRUE
    ),
    textOutput(&quot;output&quot;),
    pickerInput(
      &quot;input2&quot;,
      h5(&quot;The output should give the choice name instead of its value&quot;),
      choices= setNames(choices_df$id,choices_df$names),
      multiple = TRUE
    ),
    textOutput(&quot;output2&quot;)
  )
)

server &lt;- function(input, output, session) {
  #output$output &lt;- renderPrint({paste(choices_df$names[choices_df$id==input$input])})  
  output$output &lt;- renderPrint({paste(input$input, collapse = &quot;;&quot;)}) 
  output$output2 &lt;- renderPrint({paste(input$input2, collapse = &quot;;&quot;)})
}

shinyApp(ui = ui, server = server)

答案1

得分: 1

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

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

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

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.

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

答案2

得分: 0

以下是您要翻译的内容:

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

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

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

library(shiny)
library(shinydashboard)
library(shinyWidgets)

js <- HTML(
    "
$(function(){
    $('#input2').on('change.bs.select loaded.bs.select',
        function(event) {
            $(this).find('option:selected').prependTo(this);
        });
});
"
)

choices_df = data.frame(
    names = c('Name 1', 'Name 2', 'Name 3'),
    id = c("Sunday", "Monday", "Tuesday")#seq(3)
)

ui <- dashboardPage(
    tags$head(tags$script(js)),
    header = dashboardHeader(),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
        selectInput(
            "input",
            h5(
                "selectInput: 输出应该是选择的名称而不是其值"
            ),
            choices = setNames(choices_df$id, choices_df$names),
            multiple = TRUE
        ),
        textOutput("output"),
        pickerInput(
            "input2",
            h5(
                "pickerInput: 输出应该是选择的名称而不是其值"
            ),
            choices = setNames(choices_df$id, choices_df$names),
            multiple = TRUE
        ),
        textOutput("output2")
    )
)

server <- function(input, output, session) {
    #output$output <- renderPrint({paste(choices_df$names[choices_df$id==input$input])})
    output$output <-
        renderPrint({
            paste(input$input, collapse = ";")
        })
    output$output2 <-
        renderPrint({
            paste(input$input2, collapse = ";")
        })
}

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().

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

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

library(shiny)
library(shinydashboard)
library(shinyWidgets)

js &lt;- HTML(
    &quot;
$(function(){
    $(&#39;#input2&#39;).on(&#39;change.bs.select loaded.bs.select&#39;,
        function(event) {
            $(this).find(&#39;option:selected&#39;).prependTo(this);
        });
});
&quot;
)

choices_df = data.frame(
    names = c(&#39;Name 1&#39;, &#39;Name 2&#39;, &#39;Name 3&#39;),
    id = c(&quot;Sunday&quot;, &quot;Monday&quot;, &quot;Tuesday&quot;)#seq(3)
)

ui &lt;- dashboardPage(
    tags$head(tags$script(js)),
    header = dashboardHeader(),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
        selectInput(
            &quot;input&quot;,
            h5(
                &quot;selectInput: The output should give the choice name instead of its value&quot;
            ),
            choices = setNames(choices_df$id, choices_df$names),
            multiple = TRUE
        ),
        textOutput(&quot;output&quot;),
        pickerInput(
            &quot;input2&quot;,
            h5(
                &quot;pickerInput: The output should give the choice name instead of its value&quot;
            ),
            choices = setNames(choices_df$id, choices_df$names),
            multiple = TRUE
        ),
        textOutput(&quot;output2&quot;)
    )
)

server &lt;- function(input, output, session) {
    #output$output &lt;- renderPrint({paste(choices_df$names[choices_df$id==input$input])})
    output$output &lt;-
        renderPrint({
            paste(input$input, collapse = &quot;;&quot;)
        })
    output$output2 &lt;-
        renderPrint({
            paste(input$input2, collapse = &quot;;&quot;)
        })
}

shinyApp(ui = ui, server = server)

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

发表评论

匿名网友

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

确定