当菜单项中使用闪亮和闪亮仪表板的更多功能时，tabItem无法显示内容 [英] tabItem cannot show the content when more functions in menuItem using shiny and shinydashboard

问题描述

我正在学习闪亮的仪表板.我的代码是这样的:

I am learning shiny and shinydashboard. My code is like this:

library(shiny)
library(shinydashboard)
library(DT)
library(RODBC)
library(stringr)
library(dplyr)
ch<-odbcConnect('B1P HANA',uid='fchen4',pwd='XUEqin0312')
sidebar <- dashboardSidebar(
  sidebarMenu(
    menuItem("Query1",tabName="Query1",icon=icon("table"),
         numericInput('Start1','Start Date',19800312,min=20170101,max=20200101),
         numericInput('End1','End Date',19800312,min=20170101,max=20200101),
         textInput('Office1','Office ID','0'),
         submitButton("Submit")),
    menuItem("Query2",tabName="Query2",icon=icon("table"),
         numericInput('Start2','Start Date',20180101,min=20170101,max=20200101),
         numericInput('End2','End Date',20180101,min=20170101,max=20200101),
         textInput('Office2','Office ID','0'),
         submitButton("Submit"))
  )
)
body <- dashboardBody(
  tabItems(
    tabItem(tabName="Query1",h2("Dashboard tab content")),
    tabItem(tabName = "Query2",h2("Widgets tab content"))
  )
)
ui <- dashboardPage(
  dashboardHeader(title = 'LOSS PREVENTION'),
  sidebar,
  body
)
server <- function(input, output) {
}
shinyApp(ui, server)

仪表板看起来像这样:

您可以看到，当我在侧栏中放置一些输入框时，文本无法显示在主要部分中.

You can see that when I put some input boxes in side bar, The text cannot show in the main part.

但是，当我的代码是这样的时候:

However, when my code is like this:

library(shiny)
library(shinydashboard)
library(DT)
library(RODBC)
library(stringr)
library(dplyr)
ch<-odbcConnect('B1P HANA',uid='fchen4',pwd='XUEqin0312')
sidebar <- dashboardSidebar(
  sidebarMenu(
    menuItem("Query1",tabName="Query1",icon=icon("table")),
    menuItem("Query2",tabName="Query2",icon=icon("table"))
  )
)
body <- dashboardBody(
  tabItems(
    tabItem(tabName="Query1",h2("Dashboard tab content")),
    tabItem(tabName = "Query2",h2("Widgets tab content"))
  )
)
ui <- dashboardPage(
  dashboardHeader(title = 'LOSS PREVENTION'),
  sidebar,
  body
)
server <- function(input, output) {
}
shinyApp(ui, server)

然后结果是这样的:

您会看到侧边栏中现在没有输入，然后主栏中现在有文本.太奇怪了.

You can see that now there is no inputs in the side bar, Then the main bar has text now. This is so weird.

推荐答案

这实际上在shinydashboard中是一件非常令人讨厌的事情.温斯顿·张(Winston Chang)在此处提供了一些解决方法，但最好我认为解决方案是这一个:

This is actually a pretty annoying thing in shinydashboard currently. There are some workaround solutions provided here by Winston Chang, but the best solution in my opinion is this one:

基本上发生的是，当您将其他输入元素插入到menuItem中时，它将丢失data-toggle和data-value属性.因此，dashboardBody中的tabItem不再与menuItem链接，因此该应用无法在正文中显示内容.

Basically what happens is, when you insert other input elements into a menuItem, it loses the data-toggle and data-value attributes. Because of this, tabItems in dashboardBody can't link with the menuItems anymore and thus the app can't display the content in the body.

您可以使用自定义功能(convertMenuItem)手动设置data-toggle和data-value，以便再次链接menuItem和tabItem.

You can use a custom function (convertMenuItem) to set data-toggle and data-value manually so that menuItems and tabItems are linked again.

library(shiny)
library(shinydashboard)

convertMenuItem <- function(mi,tabName) {
  mi$children[[1]]$attribs['data-toggle']="tab"
  mi$children[[1]]$attribs['data-value'] = tabName
  mi
}

sidebar <- dashboardSidebar(
  sidebarMenu(
    convertMenuItem(menuItem("Query1",tabName="Query1",icon=icon("table"),
             numericInput('Start1','Start Date',19800312,min=20170101,max=20200101),
             numericInput('End1','End Date',19800312,min=20170101,max=20200101),
             textInput('Office1','Office ID','0'),
             submitButton("Submit")), tabName = "Query1"),
    convertMenuItem(menuItem("Query2",tabName="Query2",icon=icon("table"),
             numericInput('Start2','Start Date',20180101,min=20170101,max=20200101),
             numericInput('End2','End Date',20180101,min=20170101,max=20200101),
             textInput('Office2','Office ID','0'),
             submitButton("Submit")), tabName = "Query2")
  )
)
body <- dashboardBody(
  tabItems(
    tabItem(tabName="Query1", h2("Dashboard tab content")),
    tabItem(tabName = "Query2", h2("Widgets tab content"))
  )
)
ui <- dashboardPage(
  dashboardHeader(title = 'LOSS PREVENTION'),
  sidebar,
  body
)

server <- function(input, output) {}
shinyApp(ui, server)

结果

这篇关于当菜单项中使用闪亮和闪亮仪表板的更多功能时，tabItem无法显示内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！