jstree: HTML widget displaying an interactive tree

Description

Create a HTML widget displaying an interactive tree.

Usage

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"
)

Value

A htmlwidget object.

Arguments

nodes

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.

elementId

a HTML id for the widget (useless for common usage)

selectLeavesOnly

logical, for usage in Shiny, whether to get only selected leaves

checkboxes

logical, whether to enable checkboxes next to each node; this makes easier the selection of multiple nodes

checkWithText

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

searchtime

currently ignored

dragAndDrop

logical, whether to allow the rearrangement of the nodes by dragging and dropping

dnd

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

multiple

logical, whether to allow multiselection

types

a named list of node properties; see first example

sort

logical, whether to sort the nodes

unique

logical, whether to ensure that no node label is duplicated

wholerow

logical, whether to highlight whole selected rows

contextMenu

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

checkCallback

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

grid

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

theme

jsTree theme, one of "default", "default-dark", or "proton"

Examples

Run this code

# 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