Django中如何按section_order排序获取数据并渲染到Bootstrap折叠面板？

1. 更新视图函数 #

在casestudy视图中，获取当前案例对应的所有内容数据，并按section_order升序排序后传入模板上下文：

def casestudy(request, id):
    casestudy_obj = casestudy_list.objects.get(id=id)
    # 按section_order升序筛选对应案例的内容
    case_contents = CaseStudyContent.objects.filter(case_study=casestudy_obj).order_by('section_order')
    template = loader.get_template('casestudy.html')
    context = {
        'casestudy_obj': casestudy_obj,
        'case_contents': case_contents,
    }
    return HttpResponse(template.render(context, request))

2. 模板渲染Bootstrap折叠面板 #

在casestudy.html中，遍历排序后的内容生成折叠面板，确保每个面板的标识唯一，且第一个面板默认展开：

<div class="container mt-4">
    <h1>{{ casestudy_obj.title }}</h1>

    <div class="accordion" id="caseStudyAccordion">
        {% for content in case_contents %}
            <div class="accordion-item">
                <h2 class="accordion-header" id="heading{{ content.id }}">
                    <button class="accordion-button {% if not forloop.first %}collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ content.id }}" aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}" aria-controls="collapse{{ content.id }}">
                        {{ content.section_title }}
                    </button>
                </h2>
                <div id="collapse{{ content.id }}" class="accordion-collapse collapse {% if forloop.first %}show{% endif %}" aria-labelledby="heading{{ content.id }}" data-bs-parent="#caseStudyAccordion">
                    <div class="accordion-body">
                        {% if content.content_img %}
                            <img src="{{ content.content_img.url }}" class="img-fluid mb-3" alt="{{ content.section_title }}">
                        {% endif %}
                        <p>{{ content.content_text }}</p>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

关键说明 #

• order_by('section_order')确保内容严格按照排序号从小到大排列，section_order=1的内容会显示在最顶部。
• 用内容的id作为折叠面板的唯一标识，避免不同面板之间的交互冲突。
• 通过forloop.first控制第一个面板默认展开，优化用户初始浏览体验。

内容的提问来源于stack exchange，提问作者Abheer Mehrotra