如何在闪亮的仪表板侧栏中手动展开子菜单

how to manually expand a submenu in a shiny dashboard side bar(如何在闪亮的仪表板侧栏中手动展开子菜单)
本文介绍了如何在闪亮的仪表板侧栏中手动展开子菜单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试手动展开闪亮仪表板侧边栏中的子菜单。updateTabItems函数仅适用于普通菜单,但不适用于嵌套菜单。 以下是显示问题的基本示例(从updateTabItems文档中修改)。如果我点击"切换选项卡",它会切换菜单,但不会展开第一个有子菜单的菜单。它似乎只选择了子菜单,而没有展开树。

library(shiny)
library(shinydashboard)
ui <- dashboardPage(
  dashboardHeader(title = "Simple tabs"),
  dashboardSidebar(
    sidebarMenu(
      id = "tabs",
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard"),
        menuSubItem("Sub Menu 1",icon = icon("folder-open"), tabName = "subMenu1")
      ),
      menuItem("Widgets", tabName = "widgets", icon = icon("th"))
    ),
    actionButton('switchtab', 'Switch tab')
  ),
  dashboardBody(
    tabItems(
      tabItem(tabName = "dashboard",
        h2("Dashboard tab content")
      ),
      tabItem(tabName = "widgets",
        h2("Widgets tab content")
      )
    )
  )
)

server <- function(input, output, session) {
  observeEvent(input$switchtab, {
    newtab <- switch(input$tabs,
      "subMenu1" = "widgets",
      "widgets" = "subMenu1"
    )
    updateTabItems(session, "tabs", newtab)
  })
}

shinyApp(ui, server)
}
我要手动展开树,选择菜单和子菜单。欢迎提出任何建议。谢谢。

更新:

包含完整解决方案的工作代码位于Shiny expanding submenu items manually

推荐答案

我使用shiny:

中的JAVASCRIPT接口extendShinyjs帮助自己定义了一些JAVASCRIPT
js$selectMenuItem(0)
js$selectMenuSubItem(2)

useShinyjs(), 
extendShinyjs(text = jsSelectMenuItem), 
extendShinyjs(text = jsSelectMenuSubItem)

选择菜单项I

jsSelectMenuItem <- "shinyjs.selectMenuItem = function(i){
    setTimeout(function(){
        $('.treeview > a').eq(i).click();
    }, 200);
}"

选择MenuSubItem I

jsSelectMenuSubItem <- "shinyjs.selectMenuSubItem = function(i){
    setTimeout(function(){
        $('.treeview-menu > li > a').eq(i).click();
    }, 800);
}"

这篇关于如何在闪亮的仪表板侧栏中手动展开子菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

在小程序端input为number类型的表单,调出的键盘只有数字且没有小数点和负号。显然并不符合要求。所以我们用text类型来自己判断 1,必须为数字 2,第一位不是小数点,且只能出现一个小数点 3,负号只能出现在第一位,且只能出现一次 4,如果
file对象转blob对象进行预览的实例代码: //获取到 file文件var reader = new FileReader();reader.readAsArrayBuffer(file);reader.onload = function (event) { let blob = new Blob([event.target.result], { type: file.type }); //{ type: file.type } 预览blob发现乱码可能是type不对 要获取file文件的
js文件上传前的预览和删除实例代码,具体如下: !DOCTYPE htmlhtml lang="en" head meta charset="UTF-8" / meta http-equiv="X-UA-Compatible" content="IE=edge" / meta name="viewport" content="width=device-width, initial-scale=1.0" / title文件上传预览和删除/title style #img-box{display: flex;
一、下拉选择 改动三个地方:下拉选择模板、数据渲染、下拉选择监听填充数据 //表格{ title: '是否棚改房span class="titletips"*/span', field: 'sfpgf', align: 'center', width: 110, // edit: 'text', templet: function (d) { return 'select name="sfpgf" class="sel_xlk" lay-filter="sfpgf" l
layui表格:设置表头居中,内容居左的实例代码:表头在属性中控制,内容直接用css样式控制 { field: 'Result', title: '结果', align: 'center', width: '60%', templet: function (d) { return 'div style="text-align:left"' + d.Result + '/div' }},
element el-tree树结构刷新后保留展开状态解决方法 我们在使用element的el-tree组件的时候,当我们给树结构重新赋值后,树节点就全部自动合上了。所以我们要记录展开状态,方法如下 html代码如下: el-tree ref="tree" :data="treeList" :highlight-current="true" :