jsTreeR树形结构重叠Bug修复及在Shiny下拉框中作为输入的实现

节点重叠是因为设置icon = FALSE后，jsTree未预留图标占位空间，导致元素排版偏移。提供两种修复方案：

方案1：使用透明占位图标 #

将types中的icon = FALSE替换为透明1x1像素的Base64图标，既隐藏图标又保留布局空间：

types <- list(
  root = list(
    icon = "data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
  ),
  child = list(
    icon = "data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
  )
)

方案2：自定义CSS强制间距 #

通过CSS为节点添加左侧间距，弥补图标占位缺失：

jstree(
  nodes,
  types = types,
  checkboxes = TRUE,
  plugins = c("types", "checkbox"),
  css = "li.jstree-node { padding-left: 24px; }"
)

可通过shinyWidgets的dropdownButton将树形结构包裹为下拉选择器，同时绑定Shiny输入获取选中值，以下是完整可运行示例：

library(shiny)
library(jsTreeR)
library(shinyWidgets)

ui <- fluidPage(
  dropdownButton(
    label = "选择树形节点",
    status = "primary",
    circle = FALSE,
    jstreeOutput("myTree"),
    inputId = "treeDropdown"
  ),
  verbatimTextOutput("selectedNodes")
)

server <- function(input, output, session) {
  # 定义树形节点数据
  nodes <- list(
    list(
      text = "RootA",
      type = "root",
      children = list(
        list(
          text = "ChildA1",
          type = "child",
          children= list( list(text = "ChildA12", type = "child"))
        ),
        list(text = "ChildA2", type = "child")
      )
    ),
    list(
      text = "RootB",
      type = "root",
      children = list(
        list(text = "ChildB1", type = "child"),
        list(text = "ChildB2", type = "child")
      )
    )
  )
  
  output$myTree <- renderJstree({
    types <- list(
      root = list(
        icon = "data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
      ),
      child = list(
        icon = "data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
      )
    )
    
    jstree(
      nodes,
      types = types,
      checkboxes = TRUE,
      plugins = c("types", "checkbox")
    )
  })
  
  # 输出选中节点文本
  output$selectedNodes <- renderPrint({
    req(input$myTree)
    # 递归查找选中ID对应的节点文本
    find_node_text <- function(nodes, target_id) {
      for(node in nodes) {
        if(node$id == target_id) return(node$text)
        if(!is.null(node$children)) {
          res <- find_node_text(node$children, target_id)
          if(!is.null(res)) return(res)
        }
      }
      NULL
    }
    selected_text <- sapply(input$myTree$selected, function(id) find_node_text(nodes, id))
    cat("选中节点：\n", paste(selected_text, collapse = "\n "))
  })
}

shinyApp(ui, server)

核心要点 #

• 用dropdownButton实现下拉展开树形结构的交互
• 通过input$myTree获取选中节点的ID，递归匹配节点文本
• 已集成节点重叠修复方案，确保布局正常

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