Django中如何将Bootstrap模态框表单数据传递至主页面表单

首先修正现有模板的硬编码问题——当前循环生成元素时id全为写死值，比如模态框所有行的输入框id都是prvs_m0、prvs_ck_m0，主表行也没绑定所属产品类型标识，无法做元素匹配和值同步，先按以下步骤调整： #

1. 模板元素属性修正 #

模态框部分 #

把循环生成的产品类型行、内部输入框改成动态绑定属性，去掉硬编码id：

{% for family in families %}
<!-- 行上绑定当前产品类型的id，用于匹配主表产品 -->
<tr class="family-row" data-family-id="{{ family.id }}">
    <th scope="row" class="text-uppercase">{{family.name}}</th>
    <td class="text-center">KG</td>
    <td class="text-center">{{family.five_back}}</td>
    <td class="text-center">{{family.four_back}}</td>
    <td class="text-center">{{family.months_first}}</td>
    <td class="text-center">{{family.months_second}}</td>
    <td class="text-center">{{family.months_third}}</td>
    <td class="text-center">{{family.months_fourth}}</td>
    <td class="text-center">{{family.wallet}}</td>
    <td class="text-center">{{family.med3}}</td>
    <td class="text-center">{{family.med6}}</td> <!-- 原硬编码346替换为对应后端字段 -->
    <td class="text-center">{{family.total_amount}}</td> <!-- 原硬编码0替换为对应后端字段 -->
    <td class="text-center">
        <!-- 用class和data-month标记月份预测输入框，无需硬编码id -->
        <input type="text" class="form-control input-td border-0 bg-danger bg-opacity-25 forecast-input" data-month="0">
    </td>
    <td class="align-middle">
        <div class="form-check">
            <!-- 复选框加class和data-month，标记该月数值是否同步到主表 -->
            <input class="form-check-input apply-check" type="checkbox" data-month="0">
        </div>
    </td>
    <td class="text-center">
        <input type="text" class="form-control input-td border-0 bg-warning bg-opacity-25 forecast-input" data-month="1">
    </td>
    <td class="align-middle">
        <div class="form-check">
            <input class="form-check-input apply-check" type="checkbox" data-month="1">
        </div>
    </td>
    <!-- 后续m2到m6的输入框、复选框按同样规则加data-month属性即可，值对应2-6 -->
</tr>
{% endfor %}

主表部分 #

给产品行绑定所属产品类型id，给预测输入框加月份标记：

{% for product in products %}
<!-- 行上绑定当前产品所属的family id -->
<tr id="{{ product.code }}" name="{{product.code}}" class="product-row" data-family-id="{{ product.family_id }}">
    <td scope="row">{{ product.origin_sale }}</td>
    <td>{{ product.code }}</td>
    <td>{{ product.name }}</td>
    <!-- 其他历史数据列保持原有逻辑不变 -->
    <td class="text-center">
        <input type="number" 
        class="form-control input-td border-0 bg-opacity-10 product-forecast" 
        style="background-color: white" 
        id = "{{ product.code }}_forecast_m0" 
        name="forecast_m0" 
        value="{{product.current_month}}" 
        min="{{product.limitmin}}"
        max="{{product.limitmax}}"
        data-month="0"
        onchange="updateInput(this.value, this.id, this.name, this.min, this.max)">
    </td>
    <!-- 后续m1到m6的预测输入框同样加class="product-forecast"和对应data-month属性即可 -->
</tr>
{% endfor %}

2. 编写同步填充JS逻辑 #

Bootstrap本身依赖jQuery，直接给模态框的提交按钮绑定点击事件，按family id匹配规则，把勾选了的月份数值填充到对应产品的输入框中，同时触发原有输入校验逻辑：

// 把#modalSubmitBtn替换为模态框实际的提交/确认按钮id
$('#modalSubmitBtn').on('click', function() {
    // 遍历模态框内每一个产品类型行
    $('.family-row').each(function() {
        const familyId = $(this).data('family-id');
        // 遍历当前行所有勾选了同步标记的复选框
        $(this).find('.apply-check:checked').each(function() {
            const month = $(this).data('month');
            // 获取当前月份录入的预测值
            const inputVal = $(this).closest('tr').find(`.forecast-input[data-month="${month}"]`).val().trim();
            if (!inputVal || isNaN(Number(inputVal))) return;
            
            // 匹配主表中所有属于当前产品类型的产品行
            $(`.product-row[data-family-id="${familyId}"]`).each(function() {
                // 定位到对应月份的预测输入框
                const targetInput = $(this).find(`.product-forecast[data-month="${month}"]`);
                if (!targetInput.length) return;
                
                // 做数值范围校验，避免超出原有min/max限制
                let val = Number(inputVal);
                const min = Number(targetInput.attr('min'));
                const max = Number(targetInput.attr('max'));
                val = Math.max(min, Math.min(max, val));
                
                // 赋值并触发原有更新逻辑
                targetInput.val(val).trigger('change');
            })
            // 同步完成后取消复选框勾选，方便下次操作
            $(this).prop('checked', false);
        })
    })
    // 填充完成后如果需要自动关闭模态框，解开下面注释，把id替换为实际模态框id即可
    // $('#forecastModal').modal('hide');
})

注意事项 #

• 模态框和主表的data-month值必须一一对应，比如m0代表当月、m1代表未来1个月，避免字段错位
• 如果需要按产品权重分配类型总预测值，而非所有同类型产品填充相同值，只需在主表产品行上加data-weight属性，填充值时按总预测值 * 当前产品权重 / 同类型产品权重和计算即可
• 模态框内原有写死的静态数值记得替换为后端传入的对应family字段，避免循环生成的所有产品类型统计值一致

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