Django前端动态生成匹配Model字段名的表单并动态存储数据实现方法

1. 前端动态表单实现 #

核心逻辑是提前维护所有允许的费用字段的「字段名-显示名」映射，用户点击添加字段时，生成对应输入框，输入框的name属性和Model字段名保持完全一致。
最简实现代码参考：

<!-- 固定公共字段 -->
<div>
  <label>支付人:</label>
  <select name="paid_by" required>
    {% for p in paidby_list %}
    <option value="{{p.id}}">{{p.name}}</option>
    {% endfor %}
  </select>
</div>
<div>
  <label>所属项目:</label>
  <select name="pname" required>
    {% for p in project_list %}
    <option value="{{p.id}}">{{p.name}}</option>
    {% endfor %}
  </select>
</div>
<div>
  <label>支出日期:</label>
  <input type="date" name="date" required>
</div>

<!-- 动态字段容器 -->
<div id="dynamic-fields"></div>
<button type="button" id="add-field-btn">添加支出项</button>

<script>
// 所有支出项的映射，可由后端遍历Model字段直接渲染生成，不需要手动写500+条
const allExpenseFields = [
  {value: 'food', label: '餐饮费'},
  {value: 'petrol', label: '油费'},
  {value: 'rent', label: '房租'},
  {value: 'cement', label: '水泥费'},
  {value: 'steel', label: '钢材费'},
  // 剩余字段直接补充到该数组即可
]

// 添加字段逻辑
document.getElementById('add-field-btn').addEventListener('click', () => {
  const fieldWrap = document.createElement('div')
  // 支出项选择器
  const select = document.createElement('select')
  allExpenseFields.forEach(item => {
    const opt = document.createElement('option')
    opt.value = item.value
    opt.textContent = item.label
    select.appendChild(opt)
  })
  // 数值输入框，name与选中的Model字段名同步
  const input = document.createElement('input')
  input.type = 'number'
  input.required = true
  input.name = select.value
  select.addEventListener('change', () => input.name = select.value)
  // 删除按钮
  const delBtn = document.createElement('button')
  delBtn.type = 'button'
  delBtn.textContent = '删除'
  delBtn.addEventListener('click', () => fieldWrap.remove())

  fieldWrap.append(select, input, delBtn)
  document.getElementById('dynamic-fields').appendChild(fieldWrap)
})
</script>

可自行扩展逻辑，比如添加同名字段去重、输入值校验等功能。

2. 后端动态处理逻辑 #

核心思路是提前过滤出Model中所有合法的费用字段，遍历取值时不存在的字段默认赋值为0，最后通过关键字参数解包直接创建Model实例，不需要逐个写字段赋值逻辑。
代码实现参考：

# 提前定义非费用字段的排除列表，和你的Model字段对应即可
EXCLUDE_FIELDS = {'id', 'date_of_expense', 'PaidByName', 'expenses_in_project'}
# 动态获取ProjectExpenses模型的所有合法费用字段，不需要手动维护500+字段列表
ALLOWED_EXPENSE_FIELDS = {f.name for f in ProjectExpenses._meta.get_fields() if f.name not in EXCLUDE_FIELDS}

def your_view(request):
    if request.method == 'POST':
        # 先处理公共字段
        paidby = PaidBy.objects.get(id=request.POST['paid_by'])
        project = ProjectName.objects.get(id=request.POST['pname'])
        expense_date = request.POST['date']

        # 构造费用参数字典
        expense_params = {}
        for field in ALLOWED_EXPENSE_FIELDS:
            # 提交了的字段取提交值转数值，没提交的默认赋值0
            expense_params[field] = int(request.POST.get(field, 0))

        # 解包参数直接创建实例，不需要逐个写字段赋值
        inst = ProjectExpenses(
            **expense_params,
            date_of_expense=expense_date,
            PaidByName=paidby,
            expenses_in_project=project
        )
        inst.save()

说明：如果字段包含非数字类型，自行调整类型转换规则即可；后续Model新增字段时，这段逻辑不需要修改，自动适配新字段。

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