DT Table 中的闪亮小部件 [英] Shiny widgets in DT Table
问题描述
我正在尝试在 DT 表的行中包含闪亮的小部件，例如 textInput、selectInput(单个)、sliderInput 和 selectInput(多个).当小部件直接在页面上时，它们可以正确显示，但是，当它们放入表格中时，其中一些无法正确显示.
textInput 很好，除了一些 css 差异之外，selectInput(单个)大部分都很好，但是 selectInput(多个)没有正确显示，并且滑块输入肯定没有正确显示.依赖 javascript 的小部件似乎有问题.有没有办法让这些小部件在 DT 表中正常工作?
这是我的可重现示例.将这些小部件放入表格中时，我使用了它们的原始 HTML，但我直接从每个小部件的闪亮函数生成的 HTML 中获取了它.
图书馆(闪亮)图书馆(DT)ui <-流体页面(h3("这就是我希望小部件在 DT 表中的外观."),流体行(列(3，文本输入(inputId =文本"，标签 = "文本")),column(3, selectInput(inputId = "single_select",label = "单选",选择 = c("", "A", "B", "C"))),列(3，滑块输入(inputId =滑块"，标签 = "滑块",最小值 = 0,最大 = 10,值 = c(0, 10))),column(3, selectizeInput(inputId = "multiple_select",label = "多选",选择 = c("", "A", "B", "C"),多个 = TRUE))),h3("这就是它们实际出现在 DT 表中的方式."),流体行(DTOutput(outputId =表")))服务器 <- 功能(输入，输出，会话){output$table <- renderDT({数据 <- data.frame(ROW = 1:5,TEXT = '',SINGLE_SELECT = '滑块
对于滑块，您必须从文本输入开始:
SLIDER = ''然后用 JavaScript 把它变成一个滑块:
js <- c(功能(设置){"，" $('#s').ionRangeSlider({"," 类型:'双',"," 网格:真实，"," grid_num: 10,","分钟:0,","最大:20,","来自: 5,",到:15"，" });",}")有关选项，请参阅
那是因为五个文本输入具有相同的 id.您必须为五个文本输入设置不同的 ID:
SLIDER = sapply(1:5, function(i) {sprintf('<input type="text" id="Slider%d" name="slider" value=""/>', i)}),然后使用此 JavaScript 代码将它们变成滑块:
js <- c(功能(设置){"，" $('[id^=Slider]').ionRangeSlider({"," 类型:'双',"," 网格:真实，"," grid_num: 10,","分钟:0,","最大:20,","来自: 5,",到:15"，" });",}")要设置 from 和 to 的初始值，最好在输入文本的 value 参数中给出它们，如下所示:
SLIDER = sapply(1:5, function(i) {sprintf('<input type="text" id="Slider%d" name="slider" value="5;15"/>', i)})js <- c(功能(设置){"，" $('[id^=Slider]').ionRangeSlider({"," 类型:'双',"," 网格:真实，"," grid_num: 10,","分钟:0,",最大:20"，" });",}")多选
要获得所需的多选显示，您必须调用selectize():
MULTIPLE_SELECT = '同样，这仅适用于第一个多选.使用单独的 id 应用于五个.
绑定
最后，您必须绑定输入才能在 Shiny 中获得它们的值:
datatable(data = data,选择 = "无",逃逸 = FALSE，行名 = FALSE，选项 =列表(initComplete = JS(js),preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'),drawCallback = JS('function() { Shiny.bindAll(this.api().table().node()); } ')))现在您可以获取input$Slider1、input$Slider2、...和input$mselect 中的值.请注意，input$Slider[1/2/3/4/5] 以这种格式返回滑块的值:"3;15".
I'm trying to include shiny widgets such as textInput, selectInput (single), sliderInput, and selectInput (multiple) in the rows of a DT table. When the widgets are directly on the page, they display correctly, however, when they are put in the table, some of them do not display correctly.
The textInput is fine and the selectInput (single) is mostly fine save for some css differences, but the selectInput (multiple) isn't displaying correctly and the sliderInput definitely isn't displaying correctly. It seems the widgets that rely on javascript are the ones that have issues. Is there a way to make these widgets work correctly in the DT table?
Here is my reproducible example. I used the raw HTML for the widgets when putting them in the table, but I took that directly from the HTML generated by the shiny functions for each widget.
library(shiny)
library(DT)
ui <- fluidPage(
h3("This is how I want the widgets to look in the DT table."),
fluidRow(column(3, textInput(inputId = "text",
label = "TEXT")),
column(3, selectInput(inputId = "single_select",
label = "SINGLE SELECT",
choices = c("", "A", "B", "C"))),
column(3, sliderInput(inputId = "slider",
label = "SLIDER",
min = 0,
max = 10,
value = c(0, 10))),
column(3, selectizeInput(inputId = "multiple_select",
label = "MULTIPLE SELECT",
choices = c("", "A", "B", "C"),
multiple = TRUE))),
h3("This is how they actually appear in a DT table."),
fluidRow(DTOutput(outputId = "table"))
)
server <- function(input, output, session) {
output$table <- renderDT({
data <- data.frame(ROW = 1:5,
TEXT = '<input id="text" type="text" class="form-control" value=""/>',
SINGLE_SELECT = '<select id="single_select" style="width: 100%;">
<option value="" selected></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>',
SLIDER = '<input class="js-range-slider" id="slider" data-type="double" data-min="0" data-max="10" data-from="0" data-to="10" data-step="1" data-grid="true" data-grid-num="10" data-grid-snap="false" data-prettify-separator="," data-prettify-enabled="true" data-keyboard="true" data-drag-interval="true" data-data-type="number"/>',
MULTIPLE_SELECT = '<select id="multiple_select" class="form-control" multiple="multiple">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>',
stringsAsFactors = FALSE)
datatable(data = data,
selection = "none",
escape = FALSE,
rownames = FALSE)
})
}
shinyApp(ui = ui, server = server)
Sliders
For the sliders, you have to start with a text input:
SLIDER = '<input type="text" id="s" name="slider" value="" />'
and then turn it into a slider with JavaScript:
js <- c(
"function(settings){",
" $('#s').ionRangeSlider({",
" type: 'double',",
" grid: true,",
" grid_num: 10,",
" min: 0,",
" max: 20,",
" from: 5,",
" to: 15",
" });",
"}"
)
See ionRangeSlider for the options.
You can pass the JavaScript code with the initComplete option:
server <- function(input, output, session) {
output$table <- renderDT({
data <- data.frame(ROW = 1:5,
TEXT = '<input id="text" type="text" class="form-control" value=""/>',
SINGLE_SELECT = '<select id="single_select" style="width: 100%;">
<option value="" selected></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>',
SLIDER = '<input type="text" id="s" name="slider" value="" />',
MULTIPLE_SELECT = '<select id="multiple_select" class="form-control" multiple="multiple">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>',
stringsAsFactors = FALSE)
datatable(data = data,
selection = "none",
escape = FALSE,
rownames = FALSE,
options =
list(
initComplete = JS(js)
))
})
}
Then you get the slider for the first row only:
That's because the five text inputs have the same id. You have to set a different id for the five text inputs:
SLIDER = sapply(1:5, function(i) {
sprintf('<input type="text" id="Slider%d" name="slider" value="" />', i)
}),
Then use this JavaScript code to turn them into sliders:
js <- c(
"function(settings){",
" $('[id^=Slider]').ionRangeSlider({",
" type: 'double',",
" grid: true,",
" grid_num: 10,",
" min: 0,",
" max: 20,",
" from: 5,",
" to: 15",
" });",
"}"
)
To set the initial values of from and to, it's better to give them in the value argument of the input text like this:
SLIDER = sapply(1:5, function(i) {
sprintf('<input type="text" id="Slider%d" name="slider" value="5;15" />', i)
})
js <- c(
"function(settings){",
" $('[id^=Slider]').ionRangeSlider({",
" type: 'double',",
" grid: true,",
" grid_num: 10,",
" min: 0,",
" max: 20",
" });",
"}"
)
Multiple selects
To get the desired display of a multiple select, you have to call selectize():
MULTIPLE_SELECT = '<select id="mselect" class="form-control" multiple="multiple">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>'
js <- c(
"function(settings){",
" $('[id^=Slider]').ionRangeSlider({",
" type: 'double',",
" grid: true,",
" grid_num: 10,",
" min: 0,",
" max: 20",
" });",
" $('#mselect').selectize()",
"}"
)
Similarly, this applies to the first multiple select only. Use individual id's to apply to the five ones.
Binding
Finally, you have to bind the inputs to get their value available in Shiny:
datatable(data = data,
selection = "none",
escape = FALSE,
rownames = FALSE,
options =
list(
initComplete = JS(js),
preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'),
drawCallback = JS('function() { Shiny.bindAll(this.api().table().node()); } ')
)
)
Now you can get the values in input$Slider1, input$Slider2, ..., and input$mselect. Note that input$Slider[1/2/3/4/5] returns the values of the slider in this format: "3;15".
这篇关于DT Table 中的闪亮小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
