如何删除jsTreeR包渲染的层级树中目标节点下的元素

核心改动点 #

• 自定义右键菜单规则：只有拖入「Drag here」区域的元素才会弹出右键菜单，且菜单仅包含Delete选项，其余所有节点右键无操作项
• 补全权限校验回调：从底层拦截所有对Menu原始节点的修改、删除操作，同时阻止元素被拖到Drag here区域外
• 保留原有功能：支持从Menu复制固定选项到拖拽区、拖拽区内元素自由排序

完整可运行代码 #

library(jsTreeR)
library(shiny)

nodes <- list(
  list(
    text = "Menu",
    type = "menu",
    state = list(opened = TRUE),
    children = list(
      list(text = "A", type = "moveable", state = list(disabled = TRUE)),
      list(text = "B", type = "moveable", state = list(disabled = TRUE)),
      list(text = "C", type = "moveable", state = list(disabled = TRUE)),
      list(text = "D", type = "moveable", state = list(disabled = TRUE))
    )
  ),
  list(text = "Drag here:", type = "target", state = list(opened = TRUE))
)

# 全局操作权限校验回调
checkCallback <- JS(
  "function(operation, node, parent, position, more) {",
  "  // 拦截所有非Drag here区域的复制/移动操作",
  "  if(operation === 'copy_node' || operation === 'move_node') {",
  "    if(parent.id === '#' || parent.type !== 'target') {",
  "      return false;",
  "    }",
  "  }",
  "  // 拦截所有对固定节点（Menu、原始选项、Drag here根节点）的删除操作",
  "  if(operation === 'delete_node') {",
  "    if(node.type === 'menu' || node.type === 'moveable' || node.type === 'target') {",
  "      return false;",
  "    }",
  "  }",
  "  return true;",
  "}"
)

dnd <- list(
  always_copy = TRUE,
  is_draggable = JS(
    "function(node) {",
    "  return node[0].type === 'moveable';",
    "}"
  )
)

# 自定义右键菜单配置
customContextMenu <- JS(
  "function(node) {",
  "  // 仅对Drag here区域内的动态添加节点显示删除选项",
  "  if(node.parent !== '#' && this.get_node(node.parent).type === 'target') {",
  "    return {",
  "      delete: {",
  "        label: 'Delete',",
  "        action: function (data) {",
  "          const inst = $.jstree.reference(data.reference);",
  "          inst.delete_node(node);",
  "        }",
  "      }",
  "    };",
  "  }",
  "  // 其余节点不显示任何右键操作项",
  "  return {};",
  "}"
)

ui <- fluidPage(
  jstreeOutput("jstree")
)  

server <- function(input, output){
  output[["jstree"]] <- renderJstree({
    jstree(
      nodes, 
      dragAndDrop = TRUE, 
      dnd = dnd, 
      checkCallback = checkCallback, 
      contextMenu = list(items = customContextMenu),
      types = list(
        moveable = list(), 
        target = list(),
        menu = list()
      )
    )
  })
}  

shinyApp(ui, server)

效果说明 #

• 右键点击Menu下的固定选项、Menu节点本身、Drag here根节点，不会弹出任何操作菜单，完全禁止修改原始内容
• 将选项拖入Drag here区域后，右键点击区域内的元素，只会弹出删除选项，点击即可移除对应元素
• 拖拽区域内的元素可以自由拖动调整顺序，无法被拖出指定区域

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