jstree: HTML widget displaying an interactive tree

In jsTreeR: A Wrapper of the JavaScript Library '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",
  coreOptions = NULL
)

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
search	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"
coreOptions	a named list of core options, for advanced usage

Value

A htmlwidget object.

Examples

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

jsTreeR documentation built on July 4, 2024, 9:08 a.m.