Logo

Documentation v4.0.0

  • Home
  • Components
  • Tree
Light
Dark
System

Overview

Tree is a wrapper around jsTree that provides a file-system-like tree view with optional context menu (create/rename/delete files and folders), AJAX data loading, and node selection.

Import

import {components} from 'metronic-extension';
const {Tree} = components;

Constructor

new Tree(element, options)
Parameter Type Description
element string | HTMLDivElement CSS selector string or HTMLDivElement for the tree container.
options TreeOptions Tree configuration options.

Methods

Method Return Description
refresh(skipLoading?, forgetState?) Tree Refreshes the tree data.
refreshNode(nodeObject) Tree Refreshes a specific node.
onSelected(handler) Tree Callback when a node is selected.
onError(handler) Tree Callback on error.
onFetch(handler) Tree Callback after data is fetched.
onReady(handler) Tree Callback when the tree is fully loaded.
onCreateFileHook(hook) Tree Hook for creating files via context menu. Return node data or falsy to cancel.
getSelectedNodes(full?, index?) any | null Returns selected node(s).
getSelectedNode(full?) any | null Returns the first selected node.
getPath(nodeObject, glue?, ids?) string[] | string Returns the path of a node.
getParentNode(nodeObject) any Returns the parent node.
renameNode(nodeObject, text) Tree Renames a node.

Basic Example

A read-only tree loaded via AJAX. Click a node to select it. Expand folders to load children.
import {components} from 'metronic-extension';
const {Tree} = components;

const tree = new Tree('#fileTree', {
  readonly: true,
  ajax: {
    children: node => {
      if (node.id === '#')
        return '/api/tree/root';
      return '/api/tree/children/' + node.id;
    },
    createFolder: '#',
    deleteFolder: '#',
    renameFolder: '#',
    createFile: '#',
    deleteFile: '#',
    renameFile: '#',
  },
});

tree.onSelected((event, node) => {
  console.log('Selected:', node.text, '(type:', node.type + ')');
});

tree.onReady(() => {
  console.log('Tree loaded');
});

Root node response (/api/tree/root):

[
  {"id": "1", "text": "Project", "type": "folder", "children": true, "state": {"opened": true}}
]

Children response (/api/tree/children/1):

[
  {"id": "2", "text": "src", "type": "folder", "children": true, "state": {"opened": true}},
  {"id": "3", "text": "docs", "type": "folder", "children": false},
  {"id": "1", "text": "README.md", "type": "file"},
  {"id": "2", "text": "package.json", "type": "file"}
]
Previous Toast Next Validation