I’m trying to create a page to show a folder and its content using Tree-view Bootstrap. The folder may contain many sub-folders and files (child nodes). I want to implement one of those examples in a Django application.
Bootstrap Tree-views page Let's say this one Animated Tree-views.
where my model is:
class Document(models.Model):
Title = models.CharField(max_length=150)
SHRPath = models.FileField(upload_to='Document/', validators= [validate_file_size])
def __str__(self):
return self.Title
and the views.py:
def FileTree(request):
documents = Document.objects.all()[:100]
tree_data = []
for document in documents:
shr_path_string= str(document.SHRPath)
parents = shr_path_string.split('/')
nodes = [{"text": parent} for parent in parents]
tree_data.append({"text": document.Title, "nodes": nodes})
context = {
'tree_data': tree_data,
}
return render(request, 'filetree.html', context)
and the HTML page is:
<!DOCTYPE html>
<div id="treeview"></div>
<script>
let data = {{ tree_data|safe }};
$(document).ready(function() {
console.log("Tree data:", data);
$('#treeview').treeview({
data: data,
});
});
</script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Bootstrap Treeview CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css">
<!-- Bootstrap Treeview JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
This it doesn’t work however and it shows a blanc page!.
Then to check if the data is rendered to the page I checked it by adding this code to page and its ok.
<div class="row">
<div class="card card-body">
<a class="btn btn-success btn-sm btn-block mb-2" href="#">Reports</a>
<table class="table" id='serchtb'>
<thead class="thead-light">
<tr>
<th class="mb-2 text-dark">Title</th>
<th class="mb-2 text-dark">Doc</th>
</tr>
</thead>
{% for parent in tree_data %} <!-- this is from-->
<tr>
<td class="p-1 mb-1 text-danger">{{ parent.text }}</td>
<td class="p-1 mb-1 text-dark">{{ parent.nodes.0.text }}</td>
<td class="p-1 mb-1 text-dark">{{ parent.nodes.1.text }}</td>
<td class="p-1 mb-1 text-dark">{{ parent.nodes.2.text }}</td>
</tr>
{% endfor %}
</table>
</div>
</div>
it shows a table that contain my data.
Now how do I implement a dynamic interactive page using Bootstrap’s tree-views?.
All my best
