Yes, there is a similar JavaScript vanilla library to create a TreeView. One popular library for this purpose is called jsTree.
jsTree is a lightweight and flexible jQuery plugin that allows you to create interactive and customizable TreeViews in JavaScript. It provides a simple and efficient way to represent hierarchical data in a user-friendly manner.
To get started with jsTree, you need to include the necessary CSS and JavaScript files in your HTML document. You can either download the files and host them locally or include them from a CDN. Once you have included the files, you can initialize jsTree on an HTML element by calling the .jstree() method on it.
Here's an example of how you can create a basic TreeView using jsTree:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>
<body>
<div id="tree"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script>
$(function() {
$('#tree').jstree({
'core': {
'data': [
{
'text': 'Node 1',
'children': [
{ 'text': 'Child 1' },
{ 'text': 'Child 2' }
]
},
{
'text': 'Node 2',
'children': [
{ 'text': 'Child 3' },
{ 'text': 'Child 4' }
]
}
]
}
});
});
</script>
</body>
</html>
In this example, we first include the necessary CSS file for jsTree. Then, we create a <div> element with the id of "tree" where our TreeView will be rendered. Inside the <script> tag, we initialize jsTree on the "#tree" element using the .jstree() method. We pass an object as an argument to the jstree() method, with the 'core' property defining the data for the TreeView.
Each node in the TreeView is represented by an object with a 'text' property that specifies the display text of the node. If a node has children, you can define them using the 'children' property as an array of objects.
jsTree provides various event callbacks and configuration options that you can use to customize the appearance and behavior of your TreeView. You can also dynamically modify the TreeView by adding, updating, or deleting nodes.
Overall, jsTree is a powerful and feature-rich JavaScript library for creating TreeViews in a vanilla JavaScript environment. It's highly customizable, easy to use, and has excellent community support.