如何使用 JavaScript 更改 R Shiny 中 DT 过滤滑块的值？

Question

我想在JavaScript中修改DT生成的过滤滑块的值。我想更改这些值而不是在其他地方过滤数据，因为最终我想添加预设，以便您可以快速轻松地更新具有特定范围的滑块，并且它们将显示在滑块的正上方。

使用

runjs()

我已成功选择滑块的元素，如下所示：

slider = document.querySelectorAll('.noUi-target')[0];

但是，我尝试设置或修改滑块的值并没有成功。该滑块似乎是某种形式的 noUiSlider，但我见过的设置此类滑块值的示例在这里不起作用。我的尝试包括以下内容，其中第一个对

shinyWidgets::noUiSliderInput()

有效：

slider.noUiSlider.set([10.4, 20])
slider.noUiSlider('options').set([10.4, 20])
slider.setValue([10.4, 20])

我想知道是否需要以某种方式导入

noUiSlider

JS 库，或者滑块是否根本没有渲染为 noUiSlider 或滑块？这是一个示例应用程序，列出了我想要执行的操作的基本结构：单击

filterOutHighMPG

按钮时，我希望将 mpg 下面的过滤滑块的值设置为 10.4 到 20，并相应地过滤数据。

library(shiny)
library(DT)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  actionButton('filterOutHighMPG', 'Filter Out High MPG'),
  DTOutput('table')
)

server <- function(input, output, session) {
  
  output$table <- renderDT({
    datatable(mtcars, filter = 'top')
  })
  
  observeEvent(input$filterOutHighMPG, {
    # Set mpg filter to [10.4, 20]
    runjs("")
  })
  
}

shinyApp(ui, server)

Answer 1

您使用

slider

选择的

document.querySelectorAll('.noUi-target')[0];

是合适的，然后就可以使用

$(slider).noUiSlider({
    start: new_vals,
    range: {
        "min": old_lims[0],
        "max": old_lims[1]
    }
}, true);

其中

new_vals

由您想要的值决定

10.4

和

20

（过滤范围）和

old_lims

是滑块的旧限制，但这些当然也可以更新。请参阅下面的最小示例，了解如何获取它们。另请注意，您必须将这些值乘以滑块的当前比例。

下面我使用了

sendCustomMessage

，但当然也可以使用

shinyjs

。

library(shiny)
library(DT)

ui <- fluidPage(
  tags$head(
    tags$script(
      'Shiny.addCustomMessageHandler("updateMpgSlider",
        function(message) {
          var slider = document.querySelectorAll(".noUi-target")[0];
          
          // determine scale and calculate new values
          var scale = Math.pow(10, Math.max(0, +$(slider).data("scale") || 0));
          var new_vals = [message.start0 * scale, message.start1 * scale];
          
          // determine current limits
          var old_lims = $(slider).noUiSlider("options").range;
          old_lims = [old_lims.min, old_lims.max];
    
          // set slider using new_vals and old_lims
          $(slider).noUiSlider({
              start: new_vals,
              range: {
                  "min": old_lims[0],
                  "max": old_lims[1]
              }
          }, true);
      });'
    )
  ),
  actionButton('filterOutHighMPG', 'Filter Out High MPG'),
  DTOutput('table')
)

server <- function(input, output, session) {
  
  output$table <- renderDT({
    datatable(mtcars, filter = 'top', callback = JS(callback))
  })
  
  observeEvent(input$filterOutHighMPG, {
    # Set mpg filter to [10.4, 20]
    session$sendCustomMessage(type = 'updateMpgSlider',
                              message = list(start0 = 10.4, start1 = 20))
   })
}

shinyApp(ui, server)