Display data from a Django model as a Tree view
Question:
I have a Django model as shown below
class operationTemplates(models. Model):
templateID = models.IntegerField(primary_key = True)
templateCategory = models.CharField(max_length=255, blank=True, null=True)
templateName = models.CharField(max_length=400, blank=True, null=True)
templatePreopBundle = models.CharField(max_length=255, blank=True, null=True)
templatePosition = models.CharField(max_length=20, blank=True, null=True)
I want to display the data as a tree view using either CSS and html.
Tree view should order the data by "templateCategory" as follows
- Category1
|__templateName1
|__templateName2
|__templateName3
+ Category2
- Category3
|__templateName6
|__templateName7
|__templateName9
|__templateName10
my views.py has the following;
def opnoteAnnotatorHome(request):
group = {}
list = operationTemplates.objects.order_by().values_list('templateCategory', flat=True).distinct()
for cat in list:
group['cat'] = operationTemplates.objects.filter(templateCategory=cat).values()
context = {
'catergoryList': list,
'group': group
}
return render(request, 'opnoteAnnotatorHome.html', context)
In my template file I am using CSS and html to display a tree structure as shown above, where templates are ordered under template categories. (CSS code not shown)
<td colspan="2">
{% for cat in catergoryList %}
<ul id="parent_node">
<li><span class="caret">{{ cat }}</span></li>
{% for x in group.cat %}
<ul class="nested_child">
<li>{{x.templateName}}</li>
</ul>
{% endfor %}
</ul>
% endfor %}
</td>
Unfortunately, the above code only displays the parent nodes and the child nodes remain blank. Can someone please help.
I am using Django2 and Python3.7
Thanks in advance.
Answers:
Bootstrap 4/5 Seems to come with a tree view, so I’d say that might be the easiest way of doing this..
View
def do(request):
packed = {}
for cat in operationTemplates.objects.all().values_list('templateCategory', flat=True).distinct():
packed['cat'] = operationTemplates.objects.filter(templateCategory=cat)
data = {
'packed': packed
}
return render(request, 'thing.html', data)
Template
- Uses Bootstrap 4
<script>
// Treeview Initialization
$(document).ready(function() {
$('.treeview-animated').mdbTreeview();
});
</script>
<div class="treeview-animated w-20 border mx-4 my-4">
<h6 class="pt-3 pl-3">Things</h6>
<hr>
<ul class="treeview-animated-list mb-3">
{% for cat, list in packed %}
<li class="treeview-animated-items">
<a class="closed">
<i class="fas fa-angle-right"></i>
<span>{{cat}}</span>
</a>
<ul class="nested">
{% for i in list %}
<li>
<div class="treeview-animated-element">{{i.name}}
</li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</div>
views.py
def opnoteAnnotatorHome(request):
group = {}
list = operationTemplates.objects.order_by().values_list('templateCategory', flat=True).distinct()
for cat in list:
opNames = {}
opNames = operationTemplates.objects.filter(templateCategory=cat).values()
group[cat] = opNames
context = {
'group': group
}
return render(request, 'opnoteAnnotatorHome.html', context )
CSS file has the following code
/* ————————————————————–
Tree core styles
*/
.tree { margin: 1em; }
.tree input {
position: absolute;
clip: rect(0, 0, 0, 0);
}
.tree input ~ ul { display: none; }
.tree input:checked ~ ul { display: block; }
/* ————————————————————–
Tree rows
*/
.tree li {
line-height: 1.2;
position: relative;
padding: 0 0 1em 1em;
}
.tree ul li { padding: 1em 0 0 1em; }
.tree > li:last-child { padding-bottom: 0; }
/* ————————————————————–
Tree labels
*/
.tree_label {
position: relative;
display: inline-block;
/*background: #fff;*/
}
label.tree_label { cursor: pointer; }
label.tree_label:hover { color: #12d7e6; }
/* ————————————————————–
Tree expanded icon
*/
label.tree_label:before {
background: #000;
color: #fff;
position: relative;
z-index: 1;
float: left;
margin: 0 1em 0 -2em;
width: 1em;
height: 1em;
border-radius: 1em;
content: '+';
text-align: center;
line-height: .9em;
}
:checked ~ label.tree_label:before { content: '–'; }
/* ————————————————————–
Tree branches
*/
.tree li:before {
position: absolute;
top: 0;
bottom: 0;
left: -.5em;
display: block;
width: 0;
border-left: 1px solid #777;
content: "";
}
.tree_label:after {
position: absolute;
top: 0;
left: -1.5em;
display: block;
height: 0.5em;
width: 1em;
border-bottom: 1px solid #777;
border-left: 1px solid #777;
border-radius: 0 0 0 .3em;
content: '';
}
label.tree_label:after { border-bottom: 0; }
:checked ~ label.tree_label:after {
border-radius: 0 .3em 0 0;
border-top: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 0;
border-left: 0;
bottom: 0;
top: 0.5em;
height: auto;
}
.tree li:last-child:before {
height: 1em;
bottom: auto;
}
.tree > li:last-child:before { display: none; }
.tree_custom {
display: block;
background: #eee;
padding: 1em;
border-radius: 0.3em;
}
my template file has the following code to display the tree view
<!-- tree view -->
<ul class="tree">
<li>
<input type="checkbox" id="c0" />
<label class="tree_label" for="c0">Vascular Surgery</label>
<ul>
{% for k, v in group. Items %}
<li>
<input type="checkbox" checked="checked" id="c{{forloop.counter}}" />
<label for="c{{forloop.counter}}" class="tree_label">{{ k }}</label>
<ul>
{% for x in v %}
<li><span class="tree_label"><a href="#">{{ x.templateName }}</a></span></li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</li>
</ul>
<!-- tree view end-->
I have a Django model as shown below
class operationTemplates(models. Model):
templateID = models.IntegerField(primary_key = True)
templateCategory = models.CharField(max_length=255, blank=True, null=True)
templateName = models.CharField(max_length=400, blank=True, null=True)
templatePreopBundle = models.CharField(max_length=255, blank=True, null=True)
templatePosition = models.CharField(max_length=20, blank=True, null=True)
I want to display the data as a tree view using either CSS and html.
Tree view should order the data by "templateCategory" as follows
- Category1
|__templateName1
|__templateName2
|__templateName3
+ Category2
- Category3
|__templateName6
|__templateName7
|__templateName9
|__templateName10
my views.py has the following;
def opnoteAnnotatorHome(request):
group = {}
list = operationTemplates.objects.order_by().values_list('templateCategory', flat=True).distinct()
for cat in list:
group['cat'] = operationTemplates.objects.filter(templateCategory=cat).values()
context = {
'catergoryList': list,
'group': group
}
return render(request, 'opnoteAnnotatorHome.html', context)
In my template file I am using CSS and html to display a tree structure as shown above, where templates are ordered under template categories. (CSS code not shown)
<td colspan="2">
{% for cat in catergoryList %}
<ul id="parent_node">
<li><span class="caret">{{ cat }}</span></li>
{% for x in group.cat %}
<ul class="nested_child">
<li>{{x.templateName}}</li>
</ul>
{% endfor %}
</ul>
% endfor %}
</td>
Unfortunately, the above code only displays the parent nodes and the child nodes remain blank. Can someone please help.
I am using Django2 and Python3.7
Thanks in advance.
Bootstrap 4/5 Seems to come with a tree view, so I’d say that might be the easiest way of doing this..
View
def do(request):
packed = {}
for cat in operationTemplates.objects.all().values_list('templateCategory', flat=True).distinct():
packed['cat'] = operationTemplates.objects.filter(templateCategory=cat)
data = {
'packed': packed
}
return render(request, 'thing.html', data)
Template
- Uses Bootstrap 4
<script>
// Treeview Initialization
$(document).ready(function() {
$('.treeview-animated').mdbTreeview();
});
</script>
<div class="treeview-animated w-20 border mx-4 my-4">
<h6 class="pt-3 pl-3">Things</h6>
<hr>
<ul class="treeview-animated-list mb-3">
{% for cat, list in packed %}
<li class="treeview-animated-items">
<a class="closed">
<i class="fas fa-angle-right"></i>
<span>{{cat}}</span>
</a>
<ul class="nested">
{% for i in list %}
<li>
<div class="treeview-animated-element">{{i.name}}
</li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</div>
views.py
def opnoteAnnotatorHome(request):
group = {}
list = operationTemplates.objects.order_by().values_list('templateCategory', flat=True).distinct()
for cat in list:
opNames = {}
opNames = operationTemplates.objects.filter(templateCategory=cat).values()
group[cat] = opNames
context = {
'group': group
}
return render(request, 'opnoteAnnotatorHome.html', context )
CSS file has the following code
/* ————————————————————–
Tree core styles
*/
.tree { margin: 1em; }
.tree input {
position: absolute;
clip: rect(0, 0, 0, 0);
}
.tree input ~ ul { display: none; }
.tree input:checked ~ ul { display: block; }
/* ————————————————————–
Tree rows
*/
.tree li {
line-height: 1.2;
position: relative;
padding: 0 0 1em 1em;
}
.tree ul li { padding: 1em 0 0 1em; }
.tree > li:last-child { padding-bottom: 0; }
/* ————————————————————–
Tree labels
*/
.tree_label {
position: relative;
display: inline-block;
/*background: #fff;*/
}
label.tree_label { cursor: pointer; }
label.tree_label:hover { color: #12d7e6; }
/* ————————————————————–
Tree expanded icon
*/
label.tree_label:before {
background: #000;
color: #fff;
position: relative;
z-index: 1;
float: left;
margin: 0 1em 0 -2em;
width: 1em;
height: 1em;
border-radius: 1em;
content: '+';
text-align: center;
line-height: .9em;
}
:checked ~ label.tree_label:before { content: '–'; }
/* ————————————————————–
Tree branches
*/
.tree li:before {
position: absolute;
top: 0;
bottom: 0;
left: -.5em;
display: block;
width: 0;
border-left: 1px solid #777;
content: "";
}
.tree_label:after {
position: absolute;
top: 0;
left: -1.5em;
display: block;
height: 0.5em;
width: 1em;
border-bottom: 1px solid #777;
border-left: 1px solid #777;
border-radius: 0 0 0 .3em;
content: '';
}
label.tree_label:after { border-bottom: 0; }
:checked ~ label.tree_label:after {
border-radius: 0 .3em 0 0;
border-top: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 0;
border-left: 0;
bottom: 0;
top: 0.5em;
height: auto;
}
.tree li:last-child:before {
height: 1em;
bottom: auto;
}
.tree > li:last-child:before { display: none; }
.tree_custom {
display: block;
background: #eee;
padding: 1em;
border-radius: 0.3em;
}
my template file has the following code to display the tree view
<!-- tree view -->
<ul class="tree">
<li>
<input type="checkbox" id="c0" />
<label class="tree_label" for="c0">Vascular Surgery</label>
<ul>
{% for k, v in group. Items %}
<li>
<input type="checkbox" checked="checked" id="c{{forloop.counter}}" />
<label for="c{{forloop.counter}}" class="tree_label">{{ k }}</label>
<ul>
{% for x in v %}
<li><span class="tree_label"><a href="#">{{ x.templateName }}</a></span></li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</li>
</ul>
<!-- tree view end-->