如何使用shinyTree、jsTreeR构建带用户输入的可拖拽层级树

方案选型结论 #

你调研过的R包适配度排序如下：

• jsTreeR：首选。封装的是当前维护状态最好的jsTree版本，原生支持拖拽排序、层级自动维护、右键自定义菜单、节点HTML自定义渲染，不管是嵌入权重输入框、动态增删节点，还是校验拖拽规则都能直接通过配置实现，不需要写大量额外JS，改造成本最低。
• shinyTree：可以实现基础树展示和拖拽，但包更新频率低，对自定义交互（比如右键菜单、节点内嵌输入组件）的支持很差，你写的初始demo能跑，但要扩展到运算配置场景需要修改大量底层逻辑，不推荐作为长期方案。
• sortable/shinyDND：这两个是通用拖拽组件，没有内置树结构的层级关系维护、展开折叠、父子节点校验逻辑，从零搭建树结构的工作量是前两个包的5倍以上，没必要选择。
• rhandsontable：类表格的交互形式天生不适合展示多层级嵌套结构，直接排除。

可直接复用的最小实现示例 #

下面的示例已经实现你要求的初始状态：单根节点默认100%权重，支持拖拽调整节点顺序和层级，右键菜单支持新增子节点/同级节点/删除非根节点，树结构实时同步到Shiny端可直接对接运算逻辑。

library(shiny)
library(jsTreeR)

# 初始化节点：单根节点默认100%权重
init_nodes <- list(
  list(
    text = "根节点 (权重: 100%)",
    data = list(weight = 100, op_type = "root"),
    children = list(),
    state = list(opened = TRUE)
  )
)

ui <- fluidPage(
  tags$head(
    tags$style(HTML(".jstree-node {font-size: 15px;} .param-input {width: 70px; display: inline-block; margin: 0 5px;}"))
  ),
  br(),
  fluidRow(
    column(
      width = 7,
      jstreeOutput("calc_tree", height = "600px")
    ),
    column(
      width = 5,
      tags$fieldset(
        tags$legend("当前运算流程结构"),
        verbatimTextOutput("tree_structure")
      )
    )
  )
)

server <- function(input, output, session) {
  
  output$calc_tree <- renderJstree({
    jstree(
      nodes = init_nodes,
      dragAndDrop = TRUE,
      contextMenu = list(
        select_node = FALSE,
        items = JS("function(node) {
          return {
            addChild: {
              label: '新增子运算节点',
              action: function(data) {
                const tree = $('#calc_tree').jstree(true);
                const newNode = {text: '新运算节点 (权重: 0%)', data: {weight: 0, op_type: 'calc'}, children: []};
                tree.create_node(node, newNode, 'last');
                tree.open_node(node);
              }
            },
            addSibling: {
              label: '新增同级运算节点',
              action: function(data) {
                const tree = $('#calc_tree').jstree(true);
                const parent = tree.get_node(tree.get_parent(node));
                const newNode = {text: '新运算节点 (权重: 0%)', data: {weight: 0, op_type: 'calc'}, children: []};
                tree.create_node(parent, newNode, 'after', node);
              }
            },
            remove: {
              label: '删除节点',
              action: function(data) {
                const tree = $('#calc_tree').jstree(true);
                if(tree.get_parent(node) === '#') {alert('根节点不可删除'); return;}
                tree.delete_node(node);
              }
            }
          }
        }")
      ),
      checkCallback = JS("function(operation, node, parent, position, more) {
        // 禁止拖拽生成多个根节点
        if(operation === 'move_node' && parent.id === '#') {return node.parent === '#';}
        return true;
      }")
    )
  })
  
  # 实时输出当前树结构，可直接对接后续运算逻辑
  output$tree_structure <- renderPrint({
    req(input$calc_tree)
    str(input$calc_tree, max.level = 5)
  })
}

shinyApp(ui, server)

后续扩展方向 #

• 节点参数配置：直接在节点text字段嵌入数值输入框、下拉选择组件，用来选择运算类型（加减乘除、聚合等）、输入运算参数，组件的输入值会随树结构一起回传到Shiny端。
• 权重自动更新：添加jsTree的事件监听，在节点拖拽、新增、删除操作触发时，自动遍历同级节点重新计算权重占比，实时更新节点显示的权重值，不需要手动刷新。
• 运算流程生成：Shiny端拿到回传的树结构后，递归遍历节点的父子关系，就能直接生成运算执行顺序，自动完成数学流程计算。

内容的提问来源于stack exchange，提问作者Curious Jorge - user9788072