第一次发帖,希望我能做好。
我正在尝试为我的工作场所构建一个闪亮的仪表板,以创建一个可搜索的表格来显示我们不同分支机构中谁擅长做什么。
我想要两个侧边栏项目,以按位置或按技术过滤表格。位置将是一棵树(国家/城市/名称),技术是一组按钮。
我的问题是当我从一个选项卡跳到另一个选项卡时。 如果我在跳转到技术选项卡之前关闭位置选项卡(或相反),则一切正常,但如果我打开技术选项卡而不关闭位置,树就会消失,并且我无法将其恢复。 视频在这里
我尝试用按钮替换树,在这种情况下,没有问题。无论我做什么,该按钮都会重新出现。 视频在这里
我有点不知道问题出在哪里。
当我尝试检查页面时,我没有看到任何错误来证明树消失的原因。我还尝试反转两个选项卡以查看树是否隐藏在第二个选项卡后面,但问题仍然相同。我很困惑为什么它只在我在选项卡中放置树而不是按钮时出现。
我要重现的代码:
# Create a dataframe
tree <- data.frame(
Country = c("USA", "Canada", "UK", "France", "Germany"),
City = c("New York", "Toronto", "London", "Paris", "Berlin"),
Name = c("John", "Alice", "Michael", "Sophie", "David")
)
######################
#UI###################
######################
ui <- dashboardPage(
dashboardHeader(title = "Filters"),
dashboardSidebar(
# Increase the width of the sidebar panel
width = 280,
useShinyjs(),
sidebarMenu(
menuItem("By Location", tabName = "location", icon = icon("globe"),
fluidRow(
# This doesnt work
column(12, treeInput(inputId = "tree_loc",label = "Select facilities:",choices = create_tree(tree),selected = "",returnValue = "text",closeDepth = 0))
#This work
#column(12, actionBttn(inputId = "all_btn0", label = "Show all/Hide all", style = "jelly", color = "danger"))
)),
menuItem("By Technique", tabName = "technique", icon = icon("microscope"),
fluidRow(
# Adjust column sizing and spacing
column(3, actionBttn(inputId = "group1_btn", label = "EM", style = "jelly", color = "danger")),
column(3, actionBttn(inputId = "group2_btn", label = "LM", style = "jelly", color = "danger")),
column(3, actionBttn(inputId = "group3_btn", label = "Preclinical", style = "jelly", color = "danger"))
),
fluidRow(
column(5, actionBttn(inputId = "group4_btn", label = "Other modality", style = "jelly", color = "danger")),
column(5, actionBttn(inputId = "group5_btn", label = "Image Analysis", style = "jelly", color = "danger"))
),
fluidRow(
column(12, actionBttn(inputId = "all_btn", label = "Show all/Hide all", style = "jelly", color = "danger")),
))
)
),
dashboardBody(
DTOutput("table"),
)
)
######################
#SERVER###############
######################
server <- function(input, output, session) {
}
shinyApp(ui, server)
编辑:
抱歉,如果我再次打扰您。不幸的是,我不得不将树更改为闪亮树以添加更多功能。我以为我了解它是如何工作的,所以我检查了代码以找到我必须定位的 ul,但不知何故它不起作用
我在检查页面时发现了这个:
<ul class="jstree-container-ul jstree-children jstree-no-icons jstree-striped" role="group">
所以我将代码修改为
js <- "
$(document).ready(function() {
$('a[href=\"#shiny-tab-location\"').on('click', function() {
# $('.treejs-nodes').css('display', 'block');
$('.jstree-container-ul, .jstree-children, .jstree-no-icons, .jstree-striped').css('display', 'block');
});
})
"
但这并不好。请帮忙:)
您观察到的行为的原因是,每当位置选项卡处于活动状态并且您激活技术选项卡而不事先关闭位置选项卡时,所有
.treejs-nodes
都会获得 display: none
并且此后任何时候都不会被覆盖。
单击位置选项卡时,
display
样式可以更改为block
。这将解决问题。下面是一个使用简短的 JS
脚本来实现它的小示例。
library(shiny)
library(shinydashboard)
library(shinyWidgets)
tree <- data.frame(
Country = c("USA", "Canada", "UK", "France", "Germany"),
City = c("New York", "Toronto", "London", "Paris", "Berlin"),
Name = c("John", "Alice", "Michael", "Sophie", "David")
)
js <- "
$(document).ready(function() {
$('a[href=\"#shiny-tab-location\"').on('click', function() {
$('.treejs-nodes').css('display', 'block');
});
})
"
ui <- dashboardPage(
dashboardHeader(title = "Filters"),
dashboardSidebar(
# Increase the width of the sidebar panel
width = 280,
useShinyjs(),
sidebarMenu(
menuItem("By Location", tabName = "location", icon = icon("globe"),
fluidRow(
column(12, treeInput(inputId = "tree_loc",label = "Select facilities:",choices = create_tree(tree),selected = NULL,returnValue = "text",closeDepth = 0))
)),
menuItem("By Technique", tabName = "technique", icon = icon("microscope"),
fluidRow(
# Adjust column sizing and spacing
column(3, actionBttn(inputId = "group1_btn", label = "EM", style = "jelly", color = "danger")),
column(3, actionBttn(inputId = "group2_btn", label = "LM", style = "jelly", color = "danger")),
column(3, actionBttn(inputId = "group3_btn", label = "Preclinical", style = "jelly", color = "danger"))
),
fluidRow(
column(5, actionBttn(inputId = "group4_btn", label = "Other modality", style = "jelly", color = "danger")),
column(5, actionBttn(inputId = "group5_btn", label = "Image Analysis", style = "jelly", color = "danger"))
),
fluidRow(
column(12, actionBttn(inputId = "all_btn", label = "Show all/Hide all", style = "jelly", color = "danger")),
))
)
),
dashboardBody(
tags$head(tags$script(JS(js))),
DTOutput("table"),
)
)
######################
#SERVER###############
######################
server <- function(input, output, session) {
}
shinyApp(ui, server)