Web Component: j-Tree

  • Info
  • HTML
  • JS
  • CSS
  • Meta



  • first {Boolean} selects the first tree item, default: true (optional)
  • exec {String} required: link to a function, this function is executed when the node is selected in the tree
  • autoreset {Boolean} resets state when datas-source is changed (optional, default: false)
  • selected {String} selected class (optional, default: selected)
  • checked {String} optional, a path to function(arr, component) or path to property
  • checkednested {Boolean} optional, checks all nested items (default: true)
  • upload {String} optional, a path to function(item, files) (enables drag & drop files)
  • dragdrop {String} optional, a path to function(item, target_item, itemel, targetel) (enables drag & drop items)
  • options {String} optional, a path to function(item, el) enables a small button for an inline context menu for each item
  • rename {String} optional, a path to function(item, newname, fn_accept(true))
  • unselectexpand {Boolean} optional, can unselect selected item when the user clicks on the expandable item (default: false)
  • reselect {Boolean} optional, evaluates exec again if the tree is refreshed (default: false)
  • selectexpand {Boolean} optional, enables adding selected class to expandable items (default: false)
  • NEW iconoptions {String} icon to options (default: ti ti-ellipsis-h)
  • NEW expanded {Boolean} expands all children (default: false)

Data structure:

  • Object Array
  • Object has to contain name:String and children:[another similar object] or children:null (with no children)
  • Object item can contain ..., icon: 'home' }, it can change a file icon
  • Object item can contain ..., classname: 'css_custom_class' }, it adds a CSS class onto the "label" element
  • Object item can contain ..., html: 'RAW_HTML' {String} renders HTML tags instead of name field


  • component.expand([index]) - expands index or all (with no defined index) nodes
  • component.collapse([index]) - collapses index or all (with no defined index) nodes
  • component.clear() - clears a cache for refreshing the source
  • component.select(index) - selects node
  • component.unselect() - unselects node
  • component.rename(index) - shows input for name renaming (it works with config.rename)

Good to know:

Setter automatically extends each object by adding .$pointer property with a tree index.