DT::datatable 中的 SelectizeInput 仅用作 html
SelectizeInput inside DT::datatable only works as html
我正在尝试在时间跟踪应用程序中为我的最终用户优化用户体验。本质上,它从 google 日历的 api 中提取数据,将其安排在 tibble
中,让用户 select/deselect/edit 开会,并将它们分配给项目。这些项目是在我使用 selectizeInput
到 build 的下拉菜单中选择的,但我得到的内容类似于 selectInput
我想在闪亮的 DT::datatable
中使用 shiny::selectizeInput
。我可以让下拉菜单开始工作。但是,我失去了 selectize 输入附带的搜索功能。在我的玩具示例中,您可以单击顶部的 selectizeInput 并输入您要查找的选项。数据表中的那个,你仍然可以这样做,但是对于复杂的名称,如果你能看到你输入的内容,对用户体验会更好。
我在 github 存储库中发现了这个问题,其中 DT 包的制造商说这样的事情可能是不可能的。然而,它已经 3 岁了,也许有人已经找到了解决方法。
https://github.com/rstudio/DT/issues/390
我也尝试过使用不同的 ui 类型 tuicalendr
,这对我来说效果很好,但我 运行 遇到了同样的问题。我对JS的经验有限,所以在Shiny中自定义JS遇到了麻烦。
library(shiny)
library(DT)
ui <- fluidPage(
selectizeInput("input",
label = "",
choices = letters[1:26],
selected = letters[1]),
DTOutput("datatable")
)
server <- function(input, output) {
output$datatable<- renderDataTable({
DT::datatable(data.frame(a = as.character(selectizeInput("dtinput",
label = "",
choices = letters[1:26],
selected = letters[1]),
stringsAsFactors = F)),
escape = F)
})
}
# Run the application
shinyApp(ui = ui, server = server)
我对其他方法持开放态度,理想的做法是将数据显示在日历视图中,并在标题下方带有复选框和下拉菜单。但如果我能解决这个问题,我想我可以自己调整代码以适应日历。
必须手动添加 javascript 功能。对应的代码为:$('#ID').selectize()
.
为了获得所需的 html 代码来添加,您可以 运行: withTags(selectInput(inputId = "mselect", label = "multi", choices = letters[1:3], multiple = TRUE))
。您可以从那里提取所需的 html 部分。
在文档中你会发现你可以使用JS()
交接javascript代码:the character options wrapped in JS() will be treated as literal JavaScript code instead of normal character strings
.
您想在呈现 select 部分后添加 javascript 代码。这可以通过使用 initcomplete
选项来保证。
为了使用来自输入的值,您必须将输入绑定到 shiny:
preDrawCallback = JS('function(){Shiny.unbindAll(this.api().table().node());}'),
drawCallback = JS('function(){Shiny.bindAll(this.api().table().node());}')
正如 Remko 提到的,他的链接 post 非常有帮助。几乎所有这些信息实际上都可以在 post 中找到。创建一个可重现的示例可能需要一些闪亮的经验,所以我为您添加了一个:
可重现的例子:
library(shiny)
library(DT)
ui <- fluidPage(
selectizeInput(
inputId = "input",
label = "",
choices = letters[1:26],
selected = letters[1]
),
fluidRow(
DTOutput(outputId = "table")
)
)
#withTags(selectInput(inputId = "mselect", label = "multi", choices = letters[1:3],
# multiple = TRUE))
df <- data.frame(mselect =
'<select id="mselect" class="form-control" multiple="multiple">
<option value="car">car</option>
<option value="cars">cars</option>
<option value="dog">dog</option>
</select>'
)
js <- c(
"function(settings){",
" $('#mselect').selectize()",
"}"
)
server <- function(input, output, session) {
observe({
print(input$mselect)
})
output$table <- renderDT({
datatable(
data = df,
escape = FALSE,
options =
list(
initComplete = JS(js),
preDrawCallback = JS('function(){Shiny.unbindAll(this.api().table().node());}'),
drawCallback = JS('function(){Shiny.bindAll(this.api().table().node());}')
)
)
})
}
shinyApp(ui = ui, server = server)
我正在尝试在时间跟踪应用程序中为我的最终用户优化用户体验。本质上,它从 google 日历的 api 中提取数据,将其安排在 tibble
中,让用户 select/deselect/edit 开会,并将它们分配给项目。这些项目是在我使用 selectizeInput
到 build 的下拉菜单中选择的,但我得到的内容类似于 selectInput
我想在闪亮的 DT::datatable
中使用 shiny::selectizeInput
。我可以让下拉菜单开始工作。但是,我失去了 selectize 输入附带的搜索功能。在我的玩具示例中,您可以单击顶部的 selectizeInput 并输入您要查找的选项。数据表中的那个,你仍然可以这样做,但是对于复杂的名称,如果你能看到你输入的内容,对用户体验会更好。
我在 github 存储库中发现了这个问题,其中 DT 包的制造商说这样的事情可能是不可能的。然而,它已经 3 岁了,也许有人已经找到了解决方法。 https://github.com/rstudio/DT/issues/390
我也尝试过使用不同的 ui 类型 tuicalendr
,这对我来说效果很好,但我 运行 遇到了同样的问题。我对JS的经验有限,所以在Shiny中自定义JS遇到了麻烦。
library(shiny)
library(DT)
ui <- fluidPage(
selectizeInput("input",
label = "",
choices = letters[1:26],
selected = letters[1]),
DTOutput("datatable")
)
server <- function(input, output) {
output$datatable<- renderDataTable({
DT::datatable(data.frame(a = as.character(selectizeInput("dtinput",
label = "",
choices = letters[1:26],
selected = letters[1]),
stringsAsFactors = F)),
escape = F)
})
}
# Run the application
shinyApp(ui = ui, server = server)
我对其他方法持开放态度,理想的做法是将数据显示在日历视图中,并在标题下方带有复选框和下拉菜单。但如果我能解决这个问题,我想我可以自己调整代码以适应日历。
必须手动添加 javascript 功能。对应的代码为:$('#ID').selectize()
.
为了获得所需的 html 代码来添加,您可以 运行: withTags(selectInput(inputId = "mselect", label = "multi", choices = letters[1:3], multiple = TRUE))
。您可以从那里提取所需的 html 部分。
在文档中你会发现你可以使用JS()
交接javascript代码:the character options wrapped in JS() will be treated as literal JavaScript code instead of normal character strings
.
您想在呈现 select 部分后添加 javascript 代码。这可以通过使用 initcomplete
选项来保证。
为了使用来自输入的值,您必须将输入绑定到 shiny:
preDrawCallback = JS('function(){Shiny.unbindAll(this.api().table().node());}'),
drawCallback = JS('function(){Shiny.bindAll(this.api().table().node());}')
正如 Remko 提到的,他的链接 post 非常有帮助。几乎所有这些信息实际上都可以在 post 中找到。创建一个可重现的示例可能需要一些闪亮的经验,所以我为您添加了一个:
可重现的例子:
library(shiny)
library(DT)
ui <- fluidPage(
selectizeInput(
inputId = "input",
label = "",
choices = letters[1:26],
selected = letters[1]
),
fluidRow(
DTOutput(outputId = "table")
)
)
#withTags(selectInput(inputId = "mselect", label = "multi", choices = letters[1:3],
# multiple = TRUE))
df <- data.frame(mselect =
'<select id="mselect" class="form-control" multiple="multiple">
<option value="car">car</option>
<option value="cars">cars</option>
<option value="dog">dog</option>
</select>'
)
js <- c(
"function(settings){",
" $('#mselect').selectize()",
"}"
)
server <- function(input, output, session) {
observe({
print(input$mselect)
})
output$table <- renderDT({
datatable(
data = df,
escape = FALSE,
options =
list(
initComplete = JS(js),
preDrawCallback = JS('function(){Shiny.unbindAll(this.api().table().node());}'),
drawCallback = JS('function(){Shiny.bindAll(this.api().table().node());}')
)
)
})
}
shinyApp(ui = ui, server = server)