我正在判断不同的选项,以允许用户构建一系列数学运算的层次 struct ,并正在try 不同的包,例如jsTreeR
、shinyTree
、shinyDND
、sortable
和最后手段(放弃用户友好的视觉方法)rhandsontable
.如相关帖子How to build a drag and drop hierarchical tree with user inputs using shinyTree, jsTreeR, or similar package?所述
使用下面的可复制代码,我试图为从"菜单" node 拖动(或复制)到"拖动到此处" node 的元素添加顺序编号.有什么办法吗?这篇文章最下面的图片更好地解释了这一点.
在使用sortable
和HTMLwidgets
包来运行类似的东西(拖放)时,我运行了以下代码来成功地对拖动的元素进行编号,但不确定如何在jsTreeR
中实现它:
tags$head(
tags$style(HTML('
#dragTo {list-style-type: none; counter-reset: css-counter 0;}
#dragTo > div {counter-increment: css-counter 1;}
#dragTo > div:before {content: counter(css-counter) ". ";}
')
)
),
其中,"dragTo"id是在一系列div()
个HTML函数中设置的:
div(
div(
class = ...,
div(class = "panel-heading", "Drag to here"),
div(
class = "...",
id = "dragTo"
)
)
)
Reproducible code for this jstreer question:
library(jsTreeR)
library(shiny)
nodes <- list(
list(
text = "Menu",
state = list(opened = TRUE),
children = list(
list(text = "Dog", type = "moveable", state = list(disabled = TRUE)),
list(text = "Cat", type = "moveable", state = list(disabled = TRUE)),
list(text = "Rat", type = "moveable", state = list(disabled = TRUE)),
list(text = "Bat", type = "moveable", state = list(disabled = TRUE))
)
),
list(text = "Drag here:", type = "target", state = list(opened = TRUE))
)
checkCallback <- JS(
"function(operation, node, parent, position, more) { console.log(node);",
" if(operation === 'copy_node') {",
" if(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
" }",
" return true;", # allow everything else
"}"
)
dnd <- list(
always_copy = TRUE,
is_draggable = JS(
"function(node) {",
" return node[0].type === 'moveable';",
"}"
)
)
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;",
"}")
ui <- fluidPage(jstreeOutput("mytree"))
server <- function(input, output){
output[["mytree"]] <- renderJstree({
jstree(
nodes,
dragAndDrop = TRUE,
dnd = dnd,
checkCallback = checkCallback,
types = list(moveable = list(),
target = list()),
contextMenu = list(items = customMenu),
)
})
}
shinyApp(ui, server)
插图: