Использование значений, выбранных из меню выбора на основе JavaScript в блестящем

Question

Я использую плагин jQuery ComboTree для отображения древовидного меню выбора в моем блестящем приложении.

У меня проблемы с получением этихзначения (например, c("Item 2", "Item 2-1")) для использования в некоторых выходных данных.Таким образом, проблема заключается в том, чтобы получить любые значения, выбранные в меню выбора ($("example").val();).

ui.r:

ui <- function(){
  fluidPage(
    tags$head(
      tags$script(src = "comboTreePlugin.js"), 
      tags$script(src = "icontains.js"), 
      tags$link(rel = "stylesheet", type = "text/css", href = "comboTreeStyle.css")
    ),
    includeScript("myData.json"),
    # layouy content ----
    sidebarLayout(
      sidebarPanel(width = 3,
                   tags$input(type = "text", id = "example", placeholder = "Select"), 
                   uiOutput("comboTreeMenu")
      ), 
      mainPanel(width = 9)
    )
  ) 
}

server.r:

server <- function(input, output, session){
  output$comboTreeMenu <- renderUI({
    includeScript("www/example.js")
    })

  # want to do some manipulation with the resulting selections from the 
  # combo tree. Something along the lines of:

  # selections <- eventReactive(input$click, {
  #   return(input$comboTreeSelections)
  # })
}

example.js:

comboTree1 = $('#example').comboTree({
  source: myData,
  isMultiple: true
});

myData.json:

var myData = [
  {
    id: 0,
    title: 'Item 1 '
  }, {
    id: 1,
    title: 'Item 2',
    subs: [
      {
        id: 10,
        title: 'Item 2-1'
      }, {
        id: 11,
        title: 'Item 2-2'
      }, {
        id: 12,
        title: 'Item 2-3'
      }
      ]
  }, {
    id: 2,
    title: 'Item 3'
  }
  ];

Я пытался добавить дополнительный фрагмент js-скрипта следующим образом:

selectedValues = $("#example").val();

Shiny.onInputChange("comboTreeSelections", selectedValues);

Спасибо!

Answer 1

Я нашел другой метод, в котором вам не нужно возиться с исходным кодом и просто добавить какой-нибудь javascript.Это вызовет функцию setInterval, когда выпадающий список будет видимым / открытым, и будет запускаться каждые 500 мс.

library(shiny)

js <- HTML("
$(function() {
  var selection = setInterval(function() {
    if($('.comboTreeDropDownContainer').is(':visible')) {
      var selItem = comboTree1.getSelectedItemsTitle();
      Shiny.onInputChange('selTitle', selItem)
    }
  }, 500);
});
")

ui <- {fluidPage(
    tags$head(
      tags$script(src = "comboTreePlugin.js"), 
      tags$script(src = "icontains.js"), 
      tags$script(js),
      tags$link(rel = "stylesheet", type = "text/css", href = "comboTreeStyle.css")
    ),
    includeScript("www/myData.json"),
    sidebarLayout(
      sidebarPanel(width = 3,
                   tags$input(type = "text", id = "example", placeholder = "Select"), 
                   uiOutput("comboTreeMenu"),
                   verbatimTextOutput("selected")
      ), 
      mainPanel(width = 9)
    )
)}

server <- function(input, output, session){
  output$comboTreeMenu <- renderUI({
    includeScript("www/example.js")
  })

  output$selected <- renderPrint({
    req(input$selTitle)
    print(input$selTitle)
  })
}

shinyApp(ui, server)

Answer 2

Это просто быстрое решение, так как я не рекомендую использовать чистый плагин jQuery, так как вам придется написать все взаимодействия между combotree и Shiny самостоятельно.Но когда вас интересуют только выбранные элементы, вы можете сделать это:

В comboTreePlugin.js измените функцию в строке 129 на:

this._elemItemsTitle.on('click', function(e){
    e.stopPropagation();
    if (_this.options.isMultiple)
        _this.multiItemClick(this);
    else
        _this.singleItemClick(this);

    var selItem = comboTree1.getSelectedItemsTitle();
    Shiny.onInputChange('selTitle', selItem);
});

Этот пример будет работать только, когда вы действительно нажимаете на элемент, он не срабатывает, когда вы выбираете элемент, нажимая Enter.Вам нужно будет скопировать / вставить последние две строки выше в обработчик keydown -event (код 13).

Затем вы можете получить доступ к переменной selTitle с помощью input$selTitle в Shiny.

---

Вот небольшое приложение ShinyApp, которое печатает выбранные заголовки:

library(shiny)

ui <- {fluidPage(
    tags$head(
      tags$script(src = "comboTreePlugin.js"), 
      tags$script(src = "icontains.js"), 
      tags$link(rel = "stylesheet", type = "text/css", href = "comboTreeStyle.css")
    ),
    includeScript("www/myData.json"),
    sidebarLayout(
      sidebarPanel(width = 3,
                   tags$input(type = "text", id = "example", placeholder = "Select"), 
                   uiOutput("comboTreeMenu"),
                   verbatimTextOutput("selected")
      ), 
      mainPanel(width = 9)
    )
)}

server <- function(input, output, session){
  output$comboTreeMenu <- renderUI({
    includeScript("www/example.js")
  })

  output$selected <- renderPrint({
    req(input$selTitle)
    print(input$selTitle)
  })
}

shinyApp(ui, server)