Django如何从模板表格中获取值？

我来帮你搞定这个问题——要实现点击表格按钮后在模态框里加载对应记录的关联对象，核心是要把当前行的记录ID传递给前端，再通过AJAX从后端拉取对应的数据，具体步骤如下：

1. 修改表格按钮，传递记录ID #

首先给你的按钮添加一个自定义属性data-record-id，把当前循环的记录ID传进去，这样JS就能知道用户点击的是哪一行的记录：

{% for rec in accounts %}
<tr>
    <td class="text-center">
        <input type="button" 
               data-toggle="modal" 
               data-record-id="{{ rec.id }}"  <!-- 新增：传递当前记录的ID -->
               class="document-link btn btn-primary" 
               value="{{ rec.subscriber_fields.internal_id }}">
    </td>
    <td>{{ rec.accname }}</td>
    <td>{{ rec.subscriber_fields.custom_1 }}</td>
    <!-- 其他表格列... -->
</tr>
{% endfor %}

2. 准备模态框结构 #

确保你的模态框有一个可以动态填充内容的区域（比如id="modal-body-content"）：

<div class="modal fade" id="accountModal" tabindex="-1" role="dialog" aria-labelledby="accountModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="accountModalLabel">关联对象详情</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="modal-body-content">
                <!-- 这里会动态加载关联数据 -->
                <p>加载中...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

3. 编写JS监听点击事件，发起AJAX请求 #

用jQuery监听按钮点击，拿到记录ID后，向后端请求对应关联对象的数据，再填充到模态框里：

$(document).ready(function() {
    $('.document-link').click(function(e) {
        e.preventDefault(); // 阻止默认的跳转行为
        const recordId = $(this).data('record-id'); // 获取当前记录ID
        
        // 发起AJAX请求
        $.ajax({
            url: `/get-associated-objects/${recordId}/`, // 后端接口地址，根据你的项目调整
            type: 'GET',
            success: function(response) {
                $('#modal-body-content').html(response); // 填充模态框内容
                $('#accountModal').modal('show'); // 显示模态框
            },
            error: function() {
                $('#modal-body-content').html('<p>加载失败，请重试</p>');
                $('#accountModal').modal('show');
            }
        });
    });
});

4. 后端编写视图处理请求 #

在Django里写一个视图函数，根据传入的记录ID查询关联对象，返回渲染好的HTML片段：

from django.shortcuts import render, get_object_or_404
from .models import Account  # 替换成你的实际模型

def get_associated_objects(request, record_id):
    # 获取对应的Account记录
    account = get_object_or_404(Account, id=record_id)
    # 获取关联对象，这里假设你的模型关联字段是related_objects，根据实际情况修改
    associated_objects = account.related_objects.all()
    
    # 渲染关联对象的HTML片段
    return render(request, 'associated_objects.html', {
        'account': account,
        'associated_objects': associated_objects
    })

5. 添加路由映射 #

在项目的urls.py里添加对应的路由，让AJAX请求能找到对应的视图：

from django.urls import path
from . import views

urlpatterns = [
    # 其他路由...
    path('get-associated-objects/<int:record_id>/', views.get_associated_objects, name='get-associated-objects'),
]

6. 创建关联对象的渲染模板 #

新建一个associated_objects.html模板，用来展示关联对象的内容，根据你的实际字段调整：

<h6>账号 {{ account.accname }} 的关联对象：</h6>
{% if associated_objects %}
<ul class="list-group">
    {% for obj in associated_objects %}
    <li class="list-group-item">
        <strong>{{ obj.name }}</strong> - {{ obj.description }}
        <!-- 这里替换成你关联对象的实际字段 -->
    </li>
    {% endfor %}
</ul>
{% else %}
<p class="text-muted">暂无关联对象</p>
{% endif %}

这样一来，当你点击表格里的按钮时，就会动态加载对应记录的关联对象数据到模态框里啦！

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