To display large number of data we prefer to use Treeview. Let’s take an example where we want to show all those countries & their respective states where we have our customers. In the below jQuery Treeview example I implemented the Same. This Treeview is simply created using Jquery. Using this Treeview you can show any level of data in hierarchy manner.
Jquery is an advanced programming language. For a Jquery professional it is very simple to create a Treeview. Look at the example below here I used only 5 to 6 lines of codes to create a Treeview. The logic I implemented here is so straight forward. In HTML I have ul & li elements which represents data for my Treeview. UL elements inside li elements are sub nodes. Using Jquery document.ready method initially I am tracking all the li elements & inside the li elements which ul elements length is greater than zero I am adding a class “node” for them.
Introduction to jQuery Treeview
A treeview is a hierarchical data structure that organizes elements in a parent-child relationship, resembling the branches of a tree. In web development, jQuery Treeview is a popular plugin that simplifies the creation and management of interactive tree structures. It allows users to expand, collapse, and navigate through nested items efficiently.
Key Features of jQuery Treeview
1. Dynamic Loading jQuery Treeview supports dynamic loading of nodes, enabling efficient handling of large datasets. Only the necessary nodes are loaded when expanded, reducing initial page load time.
2. Customizable Appearance Developers can easily customize the tree’s appearance using CSS. Icons, colors, and spacing can be adjusted to match the website’s design.
3. Interactive Controls Users can expand and collapse nodes with a single click, making navigation intuitive. Some implementations support drag-and-drop functionality for reordering nodes.
4. Ajax Support The plugin can fetch data asynchronously from a server using Ajax, ensuring seamless updates without full page reloads.
5. Event Handling jQuery Treeview provides event callbacks for actions like node selection, expansion, and collapse, allowing developers to trigger custom functions.
Then in the next loop I am detecting the li elements with class “node” and for their anchor tags click event binding toggle class “active”. To show the expand & collapsible feature smooth I used slideToggle with slow.
JQuery Treeview Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JQuery Treeview example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.treeview li').each(function() {
if($(this).children('ul').length > 0) {
$(this).addClass('node');
}
});
$('.treeview li.node > a').click(function() {
$(this).parent().toggleClass('active');
$(this).parent().children('ul').slideToggle('slow');
});
});
</script>
</head>
<body>
<div class="treeview">
<ul>
<li><a href="#">Pakistan</a>
<ul>
<li><a href="#">Faisalabad</a></li>
<li><a href="#">Karachi</a></li>
<li><a href="#">Gujranwala</a></li>
</ul>
</li>
<li><a href="#">India</a>
<ul>
<li><a href="#">Odisha</a>
<ul>
<li><a href="#">Bhubaneswar</a></li>
<li><a href="#">Cuttuck</a></li>
<li><a href="#">Balasore</a>
<ul>
<li><a href="#">Balasore Golei</a></li>
<li><a href="#">MPC College Road</a></li>
<li><a href="#">FM University Road</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">West Bengal</a></li>
</ul>
</li>
<li><a href="#">Nepal</a>
<ul>
<li><a href="#">Kathmandu</a></li>
<li><a href="#">Bharatpur</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Treeview CSS Styles for Ul li elements
ul, #myUL { list-style-type: none; }
#myUL { margin: 0px; padding: 0px; }
.box { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.box::before { content: "10"; color: black; display: inline-block; margin-right: 7px; }
.check-box::before { content: "11"; color: lightblue; }
.nested { display: none; }
.active { display: block; }
Common Use Cases
1. File Browsers – Navigate directory structures.
2. Navigation Menus – Create multi-level dropdown menus.
3. Data Organization – Display hierarchical data like categories or organizational charts.
Best Practices
– Optimize Performance
– Use lazy loading for large trees.
– Ensure Accessibility – Add ARIA attributes for screen readers.
– Test Cross-Browser Compatibility – Verify functionality across browsers.
Conclusion
jQuery Treeview is a versatile tool for creating interactive, hierarchical structures in web applications. Its ease of customization, dynamic loading capabilities, and event-driven architecture make it a preferred choice for developers. By following best practices, you can implement efficient and user-friendly treeviews that enhance navigation and data organization. Whether for file browsers, menus, or data visualization, jQuery Treeview simplifies complex hierarchies with minimal code.
