如何将shinyTree嵌入Shinydashboard的sidebar侧边栏正常使用

问题原因 #

• sidebarMenu()和menuItem()是shinydashboard专门封装的导航组件，仅支持识别menuItem()、menuSubItem()这类官方导航组件作为子元素，其他自定义UI组件嵌套进去会被默认过滤，不会渲染到页面上。
• 少数场景下shinyTree的默认CSS样式和侧边栏的样式冲突，会出现宽度异常、折叠隐藏的问题，同时如果页面存在多个相同id的shiny组件，也会导致渲染失效。

解决方案 #

方案1：直接放在侧边栏（和菜单平级） #

直接把shinyTree作为dashboardSidebar()的直接子元素，和sidebarMenu()平级放置即可，不要嵌套进导航相关组件里，代码示例：

library(shiny)
library(shinyTree)
library(shinydashboard)
library(shinydashboardPlus)

header <- dashboardHeader(title = "MWE")
body <- dashboardBody()
sidebar <- dashboardSidebar(
  # 直接放在sidebar的第一层，不要嵌套进sidebarMenu
  shinyTree("tree", stripes = TRUE, multiple = FALSE, animation = FALSE),
  # 后续可以正常放置其他侧边栏菜单
  sidebarMenu(
    menuItem("首页", tabName = "home")
  )
)

ui <- dashboardPage(
  header = header,
  sidebar = sidebar,
  body = body
)

server <- function(input, output, session) {
  output$tree <- renderTree({
    list(
      root1 = "",
      root2 = list(
        SubListA = list(leaf1 = "", leaf2 = "", leaf3=""),
        SubListB = list(leafA = "", leafB = "")
      ),
      root3 = list(
        SubListA = list(leaf1 = "", leaf2 = "", leaf3=""),
        SubListB = list(leafA = "", leafB = "")
      )
    )
  })
}

shinyApp(ui, server)

方案2：放在折叠菜单项内部 #

如果需要把shinyTree放在某个可折叠的菜单项里，需要给menuItem设置tabName = NULL，同时给shinyTree套一层自定义容器，避免被导航组件过滤：

sidebar <- dashboardSidebar(
  sidebarMenu(
    menuItem("分类选择", tabName = NULL, icon = icon("list"), startExpanded = TRUE,
      # 套div容器避免被过滤，同时调整宽度适配侧边栏
      div(style = "width: 100%; padding: 5px;",
        shinyTree("tree", stripes = TRUE, multiple = FALSE, animation = FALSE)
      )
    ),
    menuItem("首页", tabName = "home")
  )
)

可选样式调整 #

如果出现宽度溢出或者样式错乱，可以给shinyTree加自定义样式限制：

# 直接设置组件宽度
shinyTree("tree", stripes = TRUE, multiple = FALSE, animation = FALSE, width = "100%")
# 或者额外加全局样式调整
tags$head(tags$style(".jstree { width: 100% !important; }"))

注意：shiny组件的id全局唯一，如果你已经在body里声明了shinyTree("tree")，侧边栏的同id组件会失效，需要修改为不同id或者删除body里的对应组件。

内容的提问来源于stack exchange，提问作者vorpal