提问人:Shakeel Ahmad 提问时间:7/18/2022 最后编辑:Stéphane LaurentShakeel Ahmad 更新时间:3/14/2023 访问量:68
如何使用 RShiny 应用程序将父节点属性获取到 JSTree 中的子节点
How to get parent node properties to child node in JSTree Using RShiny Application
问:
我正在使用 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)
这将看起来像这样。在此处输入图像描述
但我希望它看起来像这样。在此处输入图像描述
答:
0赞
Stéphane Laurent
7/18/2022
#1
也许在上下文菜单中有一个操作?
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;",
"}")
评论
0赞
Shakeel Ahmad
7/18/2022
Laurent,谢谢,让我试试这个。
0赞
Shakeel Ahmad
7/18/2022
它在上下文菜单中工作正常 有什么办法,我希望它完成吗?
0赞
Shakeel Ahmad
7/18/2022
Laurent:我想 stackoverflow.com/questions/10293869/ 喜欢这个...
0赞
Stéphane Laurent
7/18/2022
不好意思?你是什么意思?我不理解你的问题和你的“愿望”。打开一个新问题,并详细说明您是否有其他请求。我的名字是斯蒂芬;-)
评论