使用 shinyjs 和 flexdashbord 动态显示/隐藏输入

Posted

技术标签:

【中文标题】使用 shinyjs 和 flexdashbord 动态显示/隐藏输入【英文标题】:Dynamically show/hide input with shinyjs and flexdashbord 【发布时间】:2017-05-18 23:25:18 【问题描述】:

点击标签时尝试更新 flexdashboard 中的 侧边栏。无法让它工作。

---
title: "Test Sidebar"
output: 
  flexdashboard::flex_dashboard:
     orientation: rows
 runtime: shiny
---

```r setup
library(flexdashboard)
library(shiny)
library(shinyjs)
useShinyjs(rmd = TRUE)
```
Sidebar .sidebar data-width=250
=======================================================================

```r
div(id = "one", selectInput("input1",label= "Show Always",choices=c("a","b","c")))    
div(id = "two",selectInput("input2",label = "Show only on Tab 1", choices=c("d","e","f")))
```

<!-- Update the sidebar based on the tab chosen. Generated html code shown for tabs-->

Tab 1 <!-- <a href="#section-tab-1" aria-expanded="true" data-toggle="tab"> -->
=======================================================================
```r
useShinyjs(rmd = TRUE)
shinyjs::onclick("#section-tab-2",shinyjs::hide(id = "two"))
shinyjs::onclick("#section-tab-1",shinyjs::show(id = "two"))
```

Tab 2 <!-- <a href="#section-tab-2" aria-expanded="true" data-toggle="tab"> -->
=======================================================================
```r
useShinyjs(rmd = TRUE)
actionButton("hideSlider", "Hide Input Two")
observeEvent(input$hideSlider, 
     shinyjs::toggle(id = "two", anim = TRUE)
    )
```

与actionButton() 和observerEvent() 一起工作正常。任何建议表示赞赏。

【问题讨论】:

尝试在您的链接中添加一个“id”,然后在 onclick 中调用该 id。 【参考方案1】:

几个cmets:

你只需要调用useShinyjs()一次,不需要在每个代码块中调用它

onclick() 获取元素的 ID。不是选择器 - ID。这意味着您调用onclick("element") 而不是onclick("#element")

如果您查看仪表板生成的 HTML,您会发现没有 id 为“section-tab-2”的元素,因此您尝试执行的操作不起作用

在常规闪亮的应用程序中,当我使用tabsetPanel() 时,我做你想做的事情的方式是使用所选选项卡的值。 Whenever a tab is selected, there's an input value that gives you the value of what is selected.我没有广泛使用 flexdashboard,所以我不确定是否有类似的方法可以在 flexdashboard 中获取所选选项卡的值。

【讨论】:

感谢@daattali 的输入。我已经四处搜索,目前我认为使用 flexdashboard 解决起来相对简单。

以上是关于使用 shinyjs 和 flexdashbord 动态显示/隐藏输入的主要内容,如果未能解决你的问题,请参考以下文章

启用/禁用不使用 flexdashboard+shinyjs

使用 shinyjs 切换表单水平输入及其标签

使用Javascript使用shinyjs将数据表导出为Shiny中的CSV

在最近的更新之后,使用 shinyjs 重置 event_data 似乎不再起作用

shinyjs 不会隐藏使用 renderUI 创建的按钮

将垂直滚动条添加到 shinyjs 下拉按钮 - 闪亮