如何使用RShiny应用程序在JSTree中获取子节点的父节点属性

rvpgvaaj  于 2023-03-15  发布在  其他
关注(0)|答案(1)|浏览(113)

我正在使用R-shiny与JSTree一起工作。我正在尝试生成一个子节点,它将获得其父节点的属性。我已经尝试了很多次,但无法获得所需的输出。我正在使用以下代码。请看一看并告诉更新代码。谢谢

library(jsTreeR)
library(shiny)

nodes <- list(
  list(
    text = "Menu",
    state = list(opened = TRUE),
    children = list(
      list(
        text = "Dog",
        type = "moveable",
        children = list(list(text = "Dog"))
      ),
      list(
        text = "Cat",
        type = "moveable",
        children = list(list(text = "Cat"))
      ),
      list( 
        text = "Rat",
        type = "moveable",
        children = list(list(text = "Rat"))
      )
    )
  ),
  list(
    text = ">>> Drag here <<<",
    type = "target",
    state = list(opened = TRUE)
  )
)

checkCallback <- JS(
  "function(operation, node, parent, position, more) { ",
  "  if(operation === 'copy_node') {",
  "    var n = parent.children.length;",
  "    if(position !== n || parent.id === '#' || node.parent !== 'j1_1' || parent.type !== 'target') {",
  "      return false;", # prevent moving an item above or below the root
  "    }",               # and moving inside an item except a 'target' item
  "  }",
  "  if(operation === 'delete_node') {",
  "    Shiny.setInputValue('deletion', position + 1);",
  "  }",
  "  return true;",      # allow everything else
  "}"
)

customMenu <- JS(
  "function customMenu(node) {",
  "  var tree = $('#mytree').jstree(true);", 
  "  var items = {",
  "    'delete' : {",
  "      'label'  : 'Delete',",
  "      'action' : function (obj) { tree.delete_node(node); },",
  "      'icon'   : 'glyphicon glyphicon-trash'",
  "     }",
  "  }",
  "  return items;",
  "}")

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

mytree <- jstree(
  nodes, dragAndDrop = TRUE, dnd = dnd, checkCallback = checkCallback,
  contextMenu = list(items = customMenu),
  types = list(moveable = list(), target = list())
)

script <- '
$(document).ready(function(){
  var LETTERS = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
  var Visited = {};
  $("#mytree").on("copy_node.jstree", function(e, data){
    var oldid = data.original.id;
    var visited = Object.keys(Visited);
    if(visited.indexOf(oldid) === -1){
      Visited[oldid] = 0;
    }else{
      Visited[oldid]++;
    }
    var letter = LETTERS[Visited[oldid]];
    var node = data.node;
    var id = node.id;
    var index = $("#"+id).index() + 1;
    var text = index + ". " + node.text + " " + letter; 
    Shiny.setInputValue("choice", text);
    var instance = data.new_instance;
    instance.rename_node(node, text);
  });
});
'
ui <- fluidPage(
  
  tags$div(class = "header", checked = NA,tags$p(tags$script(HTML(script)))),
  
  # In lieu of the above tags$div, the below tags$head does the same for the senior child:
  # tags$head(tags$script(HTML(script))),
  fluidRow(
    column(width = 4,jstreeOutput("mytree")),
    column(width = 8,verbatimTextOutput("choices"))
  )
)

server <- function(input, output, session){
  output[["mytree"]] <- renderJstree(mytree)
  Choices <- reactiveVal(data.frame(choice = character(0)))
  observeEvent(input[["choice"]],{Choices(rbind(Choices(),data.frame(choice = input[["choice"]])))})
  observeEvent(input[["deletion"]], {Choices(Choices()[-input[["deletion"]], , drop = FALSE])})
  output[["choices"]] <- renderPrint({Choices()})
}

shinyApp(ui, server)

它看起来像这样。enter image description here
但我希望它看起来像这样。enter image description here

7bsow1i6

7bsow1i61#

也许在上下文菜单中添加一个操作?

customMenu <- JS(
  "function customMenu(node) {",
  "  var tree = $('#mytree').jstree(true);", # 'mytree' is the Shiny id or the elementId
  "  var items = {",
  "    'delete' : {",
  "      'label'  : 'Delete',",
  "      'action' : function (obj) { tree.delete_node(node); },",
  "      'icon'   : 'glyphicon glyphicon-trash'",
  "     },",
  "    'copy_to_child' : {",
  "      'label'  : 'Copy to child',",
  "      'action' : function (obj) { tree.create_node(node, { text: node.text }, 'last'); tree.open_node(node); },",
  "      'icon'   : 'glyphicon glyphicon-duplicate'",
  "     }",
  "  }",
  "  return items;",
  "}")

相关问题