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.

Answer 1

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
  • see: https://mdbootstrap.com/docs/b4/jquery/plugins/treeview/

<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>