Create a HTML widget displaying an interactive tree.
jstree(
nodes,
elementId = NULL,
selectLeavesOnly = FALSE,
checkboxes = FALSE,
checkWithText = TRUE,
search = FALSE,
searchtime = 250,
dragAndDrop = FALSE,
dnd = NULL,
multiple = TRUE,
types = NULL,
sort = FALSE,
unique = FALSE,
wholerow = FALSE,
contextMenu = FALSE,
checkCallback = NULL,
grid = NULL,
theme = "default",
coreOptions = NULL
)data, a list of nodes; each node is a list with a required
field text, a character string labeling the node, and optional
fields
childrena list of nodes
dataa named list of data to attach to the node; see the Shiny examples
iconspace-separated HTML class names defining an icon, e.g.
"glyphicon glyphicon-flash" or "fa fa-folder";
one can also get an icon from an image file in a Shiny app, see the
imageIcon Shiny example;
you can also use a super tiny icon, e.g. "supertinyicon-julia";
see the SuperTinyIcons
Shiny example showing all available
such icons
typea character string for usage with the types option; see first
example
statea named list defining the state of the node, with four possible fields,
each being TRUE or FALSE:
openedwhether the node should be initially opened
selectedwhether the node should be initially selected
disabledwhether the node should be disabled
checkedwhether the node should be initially checked, effective
only when the checkboxes option is TRUE
a_attra named list of attributes for the node label, such as
list(title = "I'm a tooltip", style = "color: red;")
li_attra named list of attributes for the whole node, including its children,
such as
list(title = "I'm a tooltip", style = "background-color: pink;")
There are some alternatives for the nodes argument;
see Populating the tree using AJAX,
Populating the tree using AJAX and lazy loading nodes
and Populating the tree using a callback function.
a HTML id for the widget (useless for common usage)
logical, for usage in Shiny, whether to get only selected leaves
logical, whether to enable checkboxes next to each node; this makes easier the selection of multiple nodes
logical, whether the checkboxes must be selected when clicking on the text of a node
either a logical value, whether to enable the search functionality with default options, or a named list of options for the search functionality; see the SuperTinyIcons Shiny example and the jsTree API documentation for the list of possible options
currently ignored
logical, whether to allow the rearrangement of the nodes by dragging and dropping
a named list of options related to the drag-and-drop
functionality, e.g. the is_draggable function to define which nodes
are draggable; see the first example and the
jsTree API documentation for the list
of possible options
logical, whether to allow multiselection
a named list of node properties; see first example
logical, whether to sort the nodes
logical, whether to ensure that no node label is duplicated
logical, whether to highlight whole selected rows
either a logical value, whether to enable a context menu to create/rename/delete/cut/copy/paste nodes, or a list of options; see the jsTree API documentation for the possible options
either TRUE to allow to perform some actions
such as creating a new node, or a JavaScript function; see the example
where this option is used to define restrictions on the drag-and-drop
behavior
list of settings for the grid; see the second example, the grid Shiny example, and the web page github.com/deitch/jstree-grid for the list of all available options
jsTree theme, one of "default",
"default-dark", or "proton"
a named list of core options, for advanced usage
A htmlwidget object.
# example illustrating the 'dnd' and 'checkCallback' options ####
library(jsTreeR)
nodes <- list(
list(
text = "RootA",
type = "root",
children = list(
list(
text = "ChildA1",
type = "child"
),
list(
text = "ChildA2",
type = "child"
)
)
),
list(
text = "RootB",
type = "root",
children = list(
list(
text = "ChildB1",
type = "child"
),
list(
text = "ChildB2",
type = "child"
)
)
)
)
types <- list(
root = list(
icon = "glyphicon glyphicon-ok"
),
child = list(
icon = "glyphicon glyphicon-file"
)
)
checkCallback <- JS(
"function(operation, node, parent, position, more) {",
" if(operation === 'move_node') {",
" if(parent.id === '#' || parent.type === 'child') {",
" return false;", # prevent moving a child above or below the root
" }", # and moving inside a child
" }",
" return true;", # allow everything else
"}"
)
dnd <- list(
is_draggable = JS(
"function(node) {",
" return node[0].type === 'child';",
"}"
)
)
jstree(
nodes,
dragAndDrop = TRUE, dnd = dnd,
types = types,
checkCallback = checkCallback
)
#> Populating tree using a list.
# example illustrating the 'grid' option ####
library(jsTreeR)
nodes <- list(
list(
text = "Products",
children = list(
list(
text = "Fruit",
children = list(
list(
text = "Apple",
data = list(
price = 0.1,
quantity = 20
)
),
list(
text = "Banana",
data = list(
price = 0.2,
quantity = 31
)
),
list(
text = "Grapes",
data = list(
price = 1.99,
quantity = 34
)
),
list(
text = "Mango",
data = list(
price = 0.5,
quantity = 8
)
),
list(
text = "Melon",
data = list(
price = 0.8,
quantity = 4
)
),
list(
text = "Pear",
data = list(
price = 0.1,
quantity = 30
)
),
list(
text = "Strawberry",
data = list(
price = 0.15,
quantity = 32
)
)
),
state = list(
opened = TRUE
)
),
list(
text = "Vegetables",
children = list(
list(
text = "Aubergine",
data = list(
price = 0.5,
quantity = 8
)
),
list(
text = "Broccoli",
data = list(
price = 0.4,
quantity = 22
)
),
list(
text = "Carrot",
data = list(
price = 0.1,
quantity = 32
)
),
list(
text = "Cauliflower",
data = list(
price = 0.45,
quantity = 18
)
),
list(
text = "Potato",
data = list(
price = 0.2,
quantity = 38
)
)
)
)
),
state = list(
opened = TRUE
)
)
)
grid <- list(
columns = list(
list(
width = 200,
header = "Name"
),
list(
width = 150,
value = "price",
header = "Price"
),
list(
width = 150,
value = "quantity",
header = "Qty"
)
),
width = 600
)
jstree(nodes, grid = grid)
#> Populating tree using a list.
# example illustrating custom context menu ####
library(jsTreeR)
customMenu <- JS("function customMenu(node)
{
var tree = $('#mytree').jstree(true);
var items = {
'rename' : {
'label' : 'Rename',
'action' : function (obj) { tree.edit(node); },
'icon': 'glyphicon glyphicon-edit'
},
'delete' : {
'label' : 'Delete',
'action' : function (obj) { tree.delete_node(node); },
'icon' : 'glyphicon glyphicon-trash'
},
'create' : {
'label' : 'Create',
'action' : function (obj) { tree.create_node(node); },
'icon': 'glyphicon glyphicon-plus'
}
}
return items;
}")
nodes <- list(
list(
text = "RootA",
children = list(
list(
text = "ChildA1"
),
list(
text = "ChildA2"
)
)
),
list(
text = "RootB",
children = list(
list(
text = "ChildB1"
),
list(
text = "ChildB2"
)
)
)
)
jstree(
nodes, checkCallback = TRUE, elementId = "mytree",
contextMenu = list(items = customMenu)
)
#> Populating tree using a list.