Отображение данных из модели Django в виде древовидного представления

У меня есть модель Django, как показано ниже

    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)

Я хочу отобразить данные в виде древовидного представления, используя либо CSS, либо Javascript. Древовидное представление должно упорядочивать данные по "templateCategory" следующим образом

- Category1
|__Name1
|__Name2
|__Name3   
+ Category2
- Category3
|__Name6
|__Name7
|__Name9
|__Name10

Я использую Django2 и Python3.7. Заранее спасибо.

Bootstrap 4/5 Кажется, что в комплекте идет представление дерева, так что я бы сказал, что это может быть самым простым способом сделать это...

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)

Шаблон

<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 имеется следующий код

/* ————————————————————–
  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;
}

В моем файле шаблона есть следующий код для отображения вида дерева

<!-- 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-->
Вернуться на верх