如何更新Django FormSet与jQuery-UI Sortable排序后的HTML表单项

核心思路 #

排序完成后，遍历所有表单项，批量替换每个表单控件id和name属性中的旧序号，用当前排序后的索引（从0开始）替代，同时按需同步排序字段或管理表单值，确保Django后端能识别正确的表单顺序。

假设你的HTML结构 #

先模拟常见的FormSet渲染结构（如果你的结构不同，调整选择器即可）：

<!-- 可排序的FormSet容器 -->
<div id="sortable-formset">
  {% for form in formset %}
    <div class="form-item">
      {{ form.title }}
      {{ form.description }}
      {{ form.id }} <!-- Django自动生成的隐藏主键字段 -->
    </div>
  {% endfor %}
</div>
<!-- FormSet必填的管理表单 -->
{{ formset.management_form }}

修改后的jQuery排序代码 #

$(function() {
  $("#sortable-formset").sortable({
    // 可选：设置拖拽时的视觉效果
    placeholder: "form-item-placeholder",
    cursor: "move",
    // 排序完成后触发更新逻辑
    update: function() {
      // 遍历排序后的每个表单项，从0开始重新编号
      $(this).find(".form-item").each(function(index) {
        const $formContainer = $(this);
        // 更新容器内所有表单控件的id和name
        $formContainer.find("input, select, textarea").each(function() {
          const $elem = $(this);
          // 替换id中的旧序号：匹配form-数字-前缀
          const newId = $elem.attr("id").replace(/form-\d+-/, `form-${index}-`);
          $elem.attr("id", newId);
          // 替换name中的旧序号
          const newName = $elem.attr("name").replace(/form-\d+-/, `form-${index}-`);
          $elem.attr("name", newName);
        });

        // 可选：如果你的模型有专门的position字段，同步更新其值（双重保险）
        // $formContainer.find('[name$="-position"]').val(index);
      });

      // 可选：如果动态增删过表单，更新管理表单的INITIAL_FORMS值
      // $('input[name="form-INITIAL_FORMS"]').val($(".form-item").length);
    }
  }).disableSelection();
});

关键细节 #

1. 正则替换逻辑：用/form-\d+-/匹配Django自动生成的表单前缀（比如form-0-title里的form-0-），确保所有控件的序号统一更新。
2. 触发时机：用update回调而非sort，避免拖拽过程中频繁触发无效更新，只在排序完成后执行一次。
3. 管理表单处理：通常form-TOTAL_FORMS不需要修改，但如果动态增删过表单，要同步更新form-INITIAL_FORMS的值。

后端保存注意事项 #

如果你的模型没有专门的排序字段，只要前端的name属性正确，Django FormSet会按POST提交的顺序处理表单。如果需要持久化排序位置，可以在视图中手动设置：

def my_view(request):
    FormSetClass = modelformset_factory(MyModel, form=MyForm, extra=0)
    if request.method == "POST":
        formset = FormSetClass(request.POST)
        if formset.is_valid():
            # 先获取未保存的实例
            instances = formset.save(commit=False)
            # 遍历设置排序位置
            for idx, instance in enumerate(instances):
                instance.position = idx
                instance.save()
            return redirect("success-page")
    else:
        formset = FormSetClass(queryset=MyModel.objects.order_by("position"))
    return render(request, "my_template.html", {"formset": formset})

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