django formset 作为列答案

【问题标题】：django formset as columnsdjango formset 作为列
【发布时间】：2018-05-08 08:31:09
【问题描述】：

我使用下面的 html 作为 django 表单集。 javascript 工作正常，但我想以列格式显示表单。尝试了各种 sn-ps，但无法在它们上使用 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='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 将以行格式显示表单
+Field-1 ---------
+Field-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>

【问题讨论】：

标签： django django-forms formsets

【解决方案1】：

你可以迭代你的表单，而不是使用form.as_p

喜欢这个

{% for field in form %}
{{ field }}
{% endfor %}

然后您可以添加div 或任何您想使用field 的内容。

您也可以使用field.errors 等与django 形式。请查看here 了解更多信息。

+我更喜欢使用 html 本身将输入 name 字段与 django 表单匹配。然后你就可以不用{{ form }}来制作自己的模板了

【讨论】：

投了赞成票！这确实可以让人们对自己的表单进行精细控制！

【解决方案2】：

例如，我使用 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>

【讨论】：