点击树形节点时选中对应DataTable行的实现方法

要实现树形节点点击后自动选中DataTable中对应ID的行，我们可以通过Shiny的反应式机制结合DT的行选中配置来完成，以下是修改后的完整代码：

library(shiny)
library(DT)
library(jsTreeR)

nodes <- list(
  list(
    text = "Root",
    state = list(opened = TRUE),
    children = list(
      list(
        text = "Alice",
        state = list(opened = TRUE),
        li_attr = list(id = "1")),
      list(
        text = "Bob",
        state = list(opened = TRUE),
        li_attr = list(id = "2"))
    )
  )
)

dat <- data.frame(
  ID    = c("1", "2", "3", "4", "5", "6", "7", "8", "9", "10"),
  Name  = c("Alice", "Bob", "Charlie", "David", "Eve", "Frank", "Grace", "Hank", "Ivy", "Jack"),
  Age   = c(25, 32, 45, 28, 40, 52, 34, 29, 37, 48)
)

ui <- fluidPage(
  br(),
  fluidRow(
    column(
      3,
      jstreeOutput("tree")
    ),
    column(
      9,
      DTOutput("dtable")
    )
  )
)

server <- function(input, output, session) {
  
  # 创建反应式值存储选中行索引
  selected_row <- reactiveVal(NULL)
  
  output[["tree"]] <- renderJstree(
    jstree(nodes)
  )
  
  # 监听树形节点选中事件，更新选中行索引
  observeEvent(input[["tree_get_selected"]], {
    node_id <- input[["tree_get_selected"]][[1]][["id"]]
    # 匹配DataTable中对应ID的行位置
    row_idx <- which(dat$ID == node_id)
    selected_row(row_idx)
  })
  
  output[["dtable"]] <- renderDT({
    datatable(
      dat, 
      selection = list(mode = "single", selected = selected_row()),
      rownames = FALSE
    )
  })
}

shinyApp(ui, server)

关键逻辑说明 #

1. 监听树形节点选中事件：input$tree_get_selected是jsTreeR包提供的输入对象，会返回当前选中节点的属性信息，我们从中提取节点的id值。
2. 匹配对应行索引：通过which(dat$ID == node_id)找到DataTable中ID列与节点id匹配的行的位置。
3. 动态更新表格选中状态：将匹配到的行索引存入反应式值selected_row，然后在datatable的selection参数中引用这个值，实现点击树形节点时自动选中表格对应行。

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