django - 多对多关系的 Django 动态表单
问题描述
我正在尝试制作一个包含Add/Delete Row
. 我正在关注本教程。
我面临的问题是我无法在表单中显示Add
orremove
按钮以及输入字段。
截屏:
这是模板:
<html>
<head>
<title>gffdfdf</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="" method="post" class="">
{% csrf_token %}
<h2> Team</h2>
{% for field in form %}
{{ field.errors }}
{{ field.label_tag }} : {{ field }}
{% endfor %}
{{ form.players.management_form }}
<h3> Product Instance(s)</h3>
<table id="table-product" class="table">
<thead>
<tr>
<th>player name</th>
<th>highest score</th>
<th>age</th>
</tr>
</thead>
{% for player in form.players %}
<tbody class="player-instances">
<tr>
<td>{{ player.pname }}</td>
<td>{{ player.hscore }}</td>
<td>{{ player.age }}</td>
<td><input id="input_add" type="button" name="add" value=" Add More "
class="tr_clone_add btn data_input"></td>
</tr>
</tbody>
{% endfor %}
</table>
<button type="submit" class="btn btn-primary">save</button>
</form>
</div>
<script>
var i = 1;
$("#input_add").click(function () {
$("tbody tr:first").clone().find(".data_input").each(function () {
if ($(this).attr('class') == 'tr_clone_add btn data_input') {
$(this).attr({
'id': function (_, id) {
return "remove_button"
},
'name': function (_, name) {
return "name_remove" + i
},
'value': 'Remove'
}).on("click", function () {
var a = $(this).parent();
var b = a.parent();
i = i - 1
$('#id_form-TOTAL_FORMS').val(i);
b.remove();
$('.player-instances tr').each(function (index, value) {
$(this).find('.data_input').each(function () {
$(this).attr({
'id': function (_, id) {
var idData = id;
var splitV = String(idData).split('-');
var fData = splitV[0];
var tData = splitV[2];
return fData + "-" + index + "-" + tData
},
'name': function (_, name) {
var nameData = name;
var splitV = String(nameData).split('-');
var fData = splitV[0];
var tData = splitV[2];
return fData + "-" + index + "-" + tData
}
});
})
})
})
} else {
$(this).attr({
'id': function (_, id) {
var idData = id;
var splitV = String(idData).split('-');
var fData = splitV[0];
var tData = splitV[2];
return fData + "-" + i + "-" + tData
},
'name': function (_, name) {
var nameData = name;
var splitV = String(nameData).split('-');
var fData = splitV[0];
var tData = splitV[2];
return fData + "-" + i + "-" + tData
}
});
}
}).end().appendTo("tbody");
$('#id_form-TOTAL_FORMS').val(1 + i);
i++;
});
</script>
</body>
</html>
请帮我找出缺少的代码,我也尝试了评论中给出的解决方案,但这只能解决input
字段问题
解决方案
我没有复制您的代码,所以我不能确定,但是当我查看您的模型时,我读到:
class PlayerForm(forms.Form):
pname = forms.CharField()
hscore= forms.IntegerField()
age = forms.IntegerField()
PlayerFormset= formset_factory(PlayerForm)
class TeamForm(forms.Form):
tname= forms.CharField()
player= PlayerFormset()
您将 Teamform 传递给变量表单中的模板。这意味着您可以通过以下方式访问个人玩家表格:
{% for player in form.player %}
...
{% endfor %}
在您的代码中,我读的是 form.players 而不是 form.player。同样在顶部,我阅读了 form.players.management_form。Django 将无法识别这些变量,因此返回空值。您可以通过查看浏览器中的 HTML 元素来检查这一点。在您提供的链接中的评论示例中,它正确显示了form.player。我不确定为什么在这种情况下添加/删除按钮不会显示。
推荐阅读
- java - Mongock 迁移无法运行 mongockSpringLegacyMigration
- php - 如何在不更改其属性的情况下更改短代码中的内容?
- powershell - Get-Command 的过滤输出
- node.js - 如何将 Azure DevOps 构建管道连接到专用终结点
- javascript - Vuetify 布局有两个选择或输入框,用连字符很好地分隔,我该如何正确对齐?
- php - 从 Laravel 控制器在控制台上输出数据
- java - Netbeans 无法安装,在 MacOS 上找不到 JDK
- reactjs - google-map-react 可拖动标记 - onChildMouseMove 在移动设备上不起作用
- c# - 有没有办法能够在后面的代码中使用 CollectionView 的相同 ItemsSource 并同时在 ViewModel 中使用它?
- sql - 将视图从当前数据库复制到另一个数据库的存储过程