django formset作为列
我在django表单集中使用下面的html。javascript工作正常,但我希望以列格式显示表单。尝试了各种代码片段,但无法在其上使用javascript 下面是HTML代码django formset作为列,django,django-forms,formsets,Django,Django Forms,Formsets,我在django表单集中使用下面的html。javascript工作正常,但我希望以列格式显示表单。尝试了各种代码片段,但无法在其上使用javascript 下面是HTML代码 div class='col-sm-6 col-sm-offset-3'> <h1> Enter scheme of entries</h1> <form action='' method='POST'> {% csrf_token %} <
div class='col-sm-6 col-sm-offset-3'>
<h1> Enter scheme of entries</h1>
<form action='' method='POST'>
{% csrf_token %}
<div class='btn-group'>
<input class='btn btn-primary' type='submit' value='Save' />
<a class='btn btn-default' href='/'>Cancel</a>
<a class='btn btn-link add-new-form' href='#'>+ Add new Entry</a>
</div>
<br/>
{{ formset.management_form }}
{% for form in formset %}
<div class='form-row'>
{{ form.as_p }}
</div>
{% endfor %}
<div class='form-row' id='empty-row'>
{{ formset.empty_form.as_p }}
</div>
<div class='btn-group'>
<input class='btn btn-primary' type='submit' value='Save' />
<a class='btn btn-default' href='/'>Cancel</a>
<a class='btn btn-link add-new-form' href='#'>+ Add new form</a>
</div>
</form>
上面的html将以行格式显示表单
+字段-1-----
+字段2-等等
如何以列格式显示相同的字段
第1场第2场
- --
保存/添加表单
同样的JavaScript是
{% block jquery %}
function updateEmptyFormIDs(element, totalForms){
var thisInput = element
// get current form input name
var currentName = element.attr('name')
// replace "prefix" with actual number
var newName = currentName.replace(/__prefix__/g, totalForms)
// console.log(newName)
// update input with new name
thisInput.attr('name', newName)
thisInput.attr('id', "id_" + newName)
// create a new form row id
var newFormRow = element.closest(".form-row");
var newRowId = "row_id_" + newName
newFormRow.attr("id", newRowId)
// add new class for basic graphic animation
newFormRow.addClass("new-parent-row")
// update form group id
var parentDiv = element.parent();
parentDiv.attr("id", "parent_id_" + newName)
// update label id
var inputLabel = parentDiv.find("label")
inputLabel.attr("for", "id_" + newName)
// return created row
return newFormRow
}
$('.add-new-form').click(function(e) {
e.preventDefault()
// form id like #id_form-TOTAL_FORMS
var formId = "id_form-TOTAL_FORMS"
// copy empty form
var emptyRow = $("#empty-row").clone();
// remove id from new form
emptyRow.attr("id", null)
// Insert row after last row
// get starting form count for formset
var totalForms = parseInt($('#' + formId).val());
// create new form row from empty form row
var newFormRow;
emptyRow.find("input, select, textarea").each(function(){
newFormRow = updateEmptyFormIDs($(this), totalForms)
})
// insert new form at the end of the last form row
$(".form-row:last").after(newFormRow)
// update total form count (to include new row)
$('#'+ formId).val(totalForms + 1);
// scroll page to new row
$('html, body').animate({
scrollTop: newFormRow.offset().top - 100
}, 500, function(){
// animate background color
// requires: jQuery Color: https://code.jquery.com/color/jquery.color-2.1.2.min.js
newFormRow.animate({
backgroundColor: "#fff"
}, 1500)
});
});
{% endblock %}
</script>
您可以迭代表单,而不使用form.as\p 像这样
{% for field in form %}
{{ field }}
{% endfor %}
然后,您可以使用字段添加div或任何您想要添加的内容
还可以将field.errors等用于django表单。
请查看更多信息
+我更喜欢使用html本身,只是将输入名称字段与django表单匹配。然后,您可以在不使用{{form}的情况下创建自己的模板,例如,我使用2单元格表在2列中显示16个字段。关键字是“切片”
<table>
<tr>
<td style='width:50%'>
{% for field in form|slice:":8" %}
<label>{{field.label}}</label>
{{ field }}
{% endfor %}
</td>
<td style='width:50%'>
{% for field in form|slice:"8:16" %}
<label>{{field.label}}</label>
{{ field }}
{% endfor %}
</td>
</tr>
</table>