
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"
)
A htmlwidget
object.
data, a list of nodes; each node is a list with a required
field text
, a character string labeling the node, and optional
fields
children
a list of nodes
data
a named list of data to attach to the node; see the Shiny examples
icon
space-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
type
a character string for usage with the types
option; see first
example
state
a named list defining the state of the node, with four possible fields,
each being TRUE
or FALSE
:
opened
whether the node should be initially opened
selected
whether the node should be initially selected
disabled
whether the node should be disabled
checked
whether the node should be initially checked, effective
only when the checkboxes
option is TRUE
a_attr
a named list of attributes for the node label, such as
list(title = "I'm a tooltip", style = "color: red;")
li_attr
a 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"
# 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
)
# 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)
# 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)
)
Run the code above in your browser using DataLab