Django с древовидным просмотром Bootsrap

Я пытаюсь создать страницу для отображения папки и ее содержимого с помощью Tree-view Bootstrap. Папка может содержать множество вложенных папок и файлов (дочерние узлы). Я хочу реализовать один из этих примеров в приложении Django.

Страница Tree-views в стиле Bootstrap. Допустим, вот эта Анимированные Tree-views.

где находится моя модель: 

 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

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

а HTML-страница имеет вид:

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

Однако это не работает и показывает бланковую страницу!.

Затем, чтобы проверить, отображаются ли данные на странице, я проверил это, добавив этот код на страницу, и все в порядке.

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

показывает таблицу, содержащую мои данные.

Как реализовать динамическую интерактивную страницу с помощью древовидных представлений Bootstrap? enter image description here Всего наилучшего

Вернуться на верх