Django formset增减按钮计数异常、保存时意外删除数据问题求助

故障根因 #

1. 删除动态行后未重置剩余表单的索引：Django formset要求提交的表单索引必须是从0开始的连续整数，如果你删除了中间某一行（比如索引1的行），剩余的动态行索引还是2、3，出现了索引空洞。后端会按TOTAL_FORMS的值依次读取索引0、1、2的表单，索引1不存在就会跳过，最终读取的数据量就会比实际展示的少1行，看起来就是最后一行被删了。
2. TOTAL_FORMS计数逻辑错误：
   • 删除逻辑里的actualformcount = totalForms-2计算规则错误，没有实际逻辑支撑
   • 修改TOTAL_FORMS时用attr('value', xxx)，jQuery操作输入框的实时值应该用val()方法，用attr修改属性可能出现缓存不生效的问题，导致计数异常
3. 你默认的1行没有删除按钮，只能删动态新增的行，所以删除1行后TOTAL_FORMS必须减1，但是要配合索引重排才能生效。

修复方案 #

第一步：新增索引重排方法，修改删除事件逻辑 #

把你的JS删除逻辑替换成如下代码：

// 重排所有动态行的索引，保证索引连续
function reindexForms() {
    $('#morerows .row').each(function(index) {
        // 动态行实际索引从1开始（默认固定第0行不支持删除）
        const newIndex = index + 1;
        // 批量替换所有表单相关属性里的索引
        $(this).find('input, select, label').each(function() {
            if ($(this).attr('name')) $(this).attr('name', $(this).attr('name').replace(/form-\d+/, `form-${newIndex}`));
            if ($(this).attr('id')) $(this).attr('id', $(this).attr('id').replace(/form-\d+/, `form-${newIndex}`));
            if ($(this).attr('for')) $(this).attr('for', $(this).attr('for').replace(/form-\d+/, `form-${newIndex}`));
        });
    });
    // 重排后更新TOTAL_FORMS：固定1行 + 动态行数
    const newTotal = 1 + $('#morerows .row').length;
    $('#id_form-TOTAL_FORMS').val(newTotal);
}

$(document).on('click', '#removerow', function () {
    // 先删除当前选中行
    $(this).closest('#morerows .row').remove();
    // 重排索引更新计数
    reindexForms();
    // 判断是否恢复新增按钮
    const currentDynamicCount = $('#morerows .row').length;
    const maxDynamic = parseInt($('#id_form-MAX_NUM_FORMS').val()) - 1;
    if(currentDynamicCount < maxDynamic) {
        $('#addrow').attr("disabled", false)
        $('#addrow').attr("class","btn btn-outline-success btn-rounded")
        $('#addrow i').attr("class","dripicons-plus")
        $('#addrow').html("+") 
    }  
});

第二步：修改新增行的计数逻辑 #

把新增行事件里的$('#id_form-TOTAL_FORMS').attr('value', (parseInt (totalForms))+1);替换为：

$('#id_form-TOTAL_FORMS').val(parseInt(totalForms) + 1);

第三步：修复新增行的最大限制判断 #

把原来的if(totalForms==maxrow)判断修改为：

const newTotal = parseInt(totalForms) + 1;
if(newTotal >= maxrow) {
    // 原有禁用按钮逻辑保持不变
}

验证方式 #

删除1行后打开浏览器控制台，执行$('#id_form-TOTAL_FORMS').val()查看返回值是否等于页面实际展示的行数，再查看剩余动态行的name属性是否从form-1开始连续无空洞，符合要求即可正常提交。

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