使用从Shining中基于javascript的选择菜单中选择的值

我正在使用jQuery插件在我闪亮的应用程序中显示一个树状的选择菜单

我在检索这些值时遇到问题，例如cItem 2，要在某些输出中使用的项目2-1。因此，这里的问题是检索从选择菜单$example.val；中选择的任何值

ui.r：

example.js：

myData.json：

我尝试添加一段额外的js脚本，如下所示：

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

Shiny.onInputChange("comboTreeSelections", selectedValues);

---

谢谢大家!

这只是一个快速修复，因为我并不推荐使用纯jQuery插件，因为您必须自己编写combotree和Shining之间的所有交互。但当您只对实际选定的项目感兴趣时，您可以这样做：

在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事件处理程序代码13中复制/粘贴上面的最后两行

然后，您可以通过输入$selTitle访问变量selTitle

下面是一个小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)

---

我找到了另一种方法，在这种方法中，您不必弄乱源代码，只需注入一些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)

---

你看过这个包裹了吗？谢谢@SeGa。肯定是在检查shinyTree。不过，如果有人有不同的建议或解决方案，我会把这个问题留待讨论。Cheers您的js文件可能也有一个错误的名称。如果没有r？Ooops，它不应该是comboTreePlugin吗？我错误地在我的.js源插件文件中添加了一个“r”。但从屏幕截图可以看出，该应用程序可以正常工作。无论如何，我会在问题中纠正它。感谢@SeGa。我仍然想知道是否有一个更简单的解决方案，在ui.r上注入一些js代码。类似于标记$script'$document.onshiny的内容：会话初始化，函数{$example.onchange，函数{var=$example.val；shinny.onInputChangeselTitle，var；}；}。再次感谢！我认为这是最简单的方法。由于该示例只是一个带有单击事件的选择输入，所以它不会在每次选择更改时仅在您单击选择输入内部时触发。您可能需要在comboTree列表中添加一些事件委派。那可能行得通。我尝试在.ComboTreeItemParent/.ComboTreeItemChlid/.comboTreeDropDownContainer上添加一些单击事件，但没有成功。谢谢。因此，每当组合树菜单可见时，setInterval每.5s无限期运行一次。灿烂的。。我试图运行代码，但它不起作用，是否可以用r代码和json、js文件创建zip文件夹。谢谢你下载comboTree文件并将其放入应用程序的/www文件夹吗？好的。。。我知道了，我需要把所有文件放在/www文件夹中。我可以问一下，为什么它不是像上图所示的组合框。太棒了！www文件夹中是否也有comboTreeStyle.css文件？

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

Shiny.onInputChange("comboTreeSelections", selectedValues);

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);
});

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)

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)