jsTreeR (version 0.1.0)

jstree: HTML widget displaying an interactive tree

Description

Create a HTML widget displaying an interactive tree.

Usage

jstree(
  nodes,
  elementId = NULL,
  checkboxes = FALSE,
  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"
)

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"; in a Shiny app you can also use a super tiny icon, e.g. "supertinyicon-julia"; see the 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;")

elementId

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

checkboxes

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

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

logical, whether to enable a context menu to create, rename, delete, cut, copy and paste nodes

checkCallback

a JavaScript function; see the example where it is used to define restrictions on the drag-and-drop behavior

grid

list of settings for the grid; see the second example, the Shiny example, and github.com/deitch/jstree-grid for the list of all available options

theme

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

Examples

# NOT RUN {
# 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)
# }