Dynamic Interactive Tree View With Checkboxes – Treejs

A lightweight tree view plugin that displays hierarchical data in a collapsible, selectable tree structure with checkboxes.

Features:

• Framework Compatibility: Works with Vanilla JS, React, and Vue projects.
• Event System: You can hook into load events and state changes easily.
• Async Loading: Supports fetching data from a remote URL via GET or POST methods.
• Checkbox Support: Includes built-in functionality for selecting and checking nodes.

Perfect For:

• File System Navigators: Visualize folder and file structures in web-based IDEs or content management systems.
• Admin Configuration Panels: Render nested settings or permission groups where categories have sub-options.
• Dynamic Data Explorers: Display and interact with JSON-based data sets, such as organizational charts or product catalogs, where nodes can be checked or expanded.
• Legacy Application Enhancement: Integrate a modern tree view into existing non-SPA applications.

How to use Treejs:

1. Install the package via NPM for module-based environments.

# Yarn
$ yarn add @widgetjs/tree

# NPM
$ npm install @widgetjs/tree --save

import Tree from '@widgetjs/tree';

2. Or load the compiled JavaScript ‘tree.min.js’ directly in your HTML document.

<script src="/dist/tree.min.js"></script>

3. Prepare your hierarchical data. Each node in your JSON data must follow this structure.

Name	Type	Description	Required
id	any	The unique identifier for the node.	Required
text	string	The label text displayed for the node.	Required
attributes	object	Custom attributes attached to the node.	Optional
children	array	An array of child node objects.	Optional
checked	boolean	Set to true if the node is selected.	Optional

let data = [{ 
    "id": "1", 
    "text": 
    "node-1", 
    "children": [{ 
      "id": "1-1", 
      "text": "node-1-1", 
      "children": [{ 
        "id": "1-1-1", 
        "text": "node-1-1-1" }, { 
        "id": "1-1-2", 
        "text": "node-1-1-2" }, 
      }] 
    }]
}]

4. Create a new tree instance and specify the target element in which the tree view will render.

let tree = new Tree('.container', {

    // root data
    data: [{ id: '0', text: 'root', children: data }],
    loaded: function () {

      // pre-selected nodes
      this.values = ['1-1-1', '1-1-2'];

      // output selected nodes and values
      console.log(this.selectedNodes)
      console.log(this.values)

      // disabled nodes
      this.disables = ['1-1-1', '1-1-1', '1-1-2']

    }
    
})

5. You can also load hierarchical data from external data sources via AJAX.

const remoteTree = new Tree('#container', {

  url: '/api/get-tree-structure',
  method: 'GET', // or 'POST'
  
  // Expand the tree to a specific depth automatically
  closeDepth: 1,

  // Hook to format raw data before the tree renders
  beforeLoad: function(rawData) {
    // You can transform the API response here to match the required format
    return rawData.results; 
  },

  // Hook that runs after data is fully loaded and rendered
  loaded: function() {
    // 'this' refers to the tree instance
    console.log('Tree is ready');
  }
  
});

6. Here is the full list of available configuration options.

Name	Type	Description
url	string	A URL to retrieve remote data. If not used, provide data.
method	string	The HTTP method (GET/POST). The default is ‘GET’.
data	array	The JSON tree data (used if url is not provided).
values	array	An array of IDs representing the nodes you want to check/select.
closeDepth	integer	The level depth to expand the tree initially.
beforeLoad	function	Invoked before the tree loads data. You can format raw data in this function.
loaded	function	Invoked after the tree finishes loading data.
onChange	function	Invoked when a node’s status changes (e.g., checked/unchecked).

7. You can access or modify the state of the tree instance using these properties.

Property	Type	Operation	Description
values	array	get/set	The IDs of currently selected values.
selectedNodes	array	get	The full data objects of selected nodes, including attributes.
disables	array	get/set	Get disabled values, or set nodes to be disabled.
disabledNodes	array	get	The full data objects of disabled nodes, including attributes.

// Get all selected IDs
const currentIds = myTree.values;

// Programmatically select nodes '0-1' and '0-2'
myTree.values = ['0-1', '0-2'];

// Get details of selected nodes
const nodeDetails = myTree.selectedNodes;

// Disable specific nodes
myTree.disables = ['0-1'];

8. Use these methods to control the tree view programmatically.

Method	Parameters	Description
expandAll	null	Expands all tree nodes to show the full hierarchy.
collapseAll	null	Collapses all tree nodes to show only the top level.

9. The library triggers these events during its lifecycle.

Event	Parameters	Description
beforeLoad	current data	Invoked before the tree loads data.
loaded	null	Invoked after the tree loads data.
onChange	null	Invoked when the node status changes.

FAQs:

Q: How do I style the tree nodes?
A: The library generates standard HTML elements. You can target the container ID or specific classes generated by the widget in your CSS file to apply custom styling to nodes, icons, and text.

Q: Does it support drag and drop?
A: No. @widgetjs/tree.js focuses on being lightweight and viewing/selecting data. It does not currently support drag-and-drop reordering of nodes.

Q: What happens if my JSON data has different key names?
A: The library expects specific keys like id and text. You should use the beforeLoad function to map your API’s response format to the format required by the library before the tree renders.

Changelog:

12/04/2025

• Added expandAll method
• Updated documentation
• Updated demo

The post Dynamic Interactive Tree View With Checkboxes – Treejs appeared first on CSS Script.