THEMETRIAL

Vertical Hierarchical Tree In Vanilla JavaScript – TreeX

Author:qwefgh90
Views Total:0 views
Official Page:Go to website
Last Update:May 4, 2021
License:MIT

Preview:

Vertical Hierarchical Tree In Vanilla JavaScript – TreeX

Description:

TreeX is a vanilla JavaScript library that lets you create a vertical tree structure representing hierarchical data on the web app.

Features:

  • Collapsible
  • Expandable
  • Filterable
  • Selectable
  • Easy to extend

How to use it:

1. Import the TreeX.js JavaScript library into the html.

<script src="https://www.cssscript.com/treex.js"></script>

2. Define your own nodes to be displayed in the tree.

const node1 = {
      data: "JavaScript",
      children: [node2, node3, node4]
}
const node2 = {
      data: "Vanilla",
      children: []
}
const node3 = {
      data: "jQuery",
      children: []
}
const node4 = {
      data: "React",
      children: []
}
// ...

3. Create a container to hold the tree.

<div id="example"></div>

4. Render a tree inside the container you just created.

let tree = treex.Tree.createTree(node1);
let element = treex.TreeX.createTree(tree, { document });
let example = document.querySelector('#example');
example.appendChild(element);

5. Create an input filed to filter through the data.

<input class="filter" type="text" placeholder="filter"/>
let filterEl = document.querySelector('input.filter');
  filterEl.oninput = () => {
    tree.getNodes().forEach((n) => {
      if(n.data.toLowerCase().includes(filterEl.value.toLowerCase())){
        n.setVisibility(true);
      }else{
        n.setVisibility(false);
      }
    });
};

6. Remove a node from the tree.

// remove node 1 
example.children[0].remove();

7. Determine whether to hide the root node.

let element = treex.TreeX.createTree(tree, { document, trueORfalse });


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.