Press "Enter" to skip to content

Customizable Hierarchical Tree and Built-in Tree Styles | TreeX

TreeX is a JavaScript library to provides customizable tree styles and built-in tree styles. It helps you to get the tree design by providing the frame icon that allows you to create a vertical tree structure that represents hierarchical data on a web application.

hierarchical tree structure in html, hierarchical tree structure in html css, tree structure in javascript dynamically, create dynamic tree view using javascript, javascript tree view

Features:

  • Well-defined data structure and operations for the tree
  • Collapse, expand, multiple-choice, icons
  • Checkbox with tri-state
  • Scalability to customize templates and patterns
  • Default templates

How to make use of it:

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

<script src="treex.js"></script>

2. Define your personal nodes to be displayed within 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 contained in the container you simply 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 by way of the info.

<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 basis node.

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

Vertical Hierarchical Tree, TreeX Plugin/Github, dynamic tree structure using jquery, treeview jquery bootstrap, javascript tree visualization


See Demo And Download

Official Website(qwefgh90): Click Here

This superior jQuery/javascript plugin is developed by qwefgh90. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.