5

Según lo que entiendo de la documentación los formsets te permiten trabajar con múltiples formularios en una misma página.

Por ejemplo, en este fragmento de código se estan creando 4 formularios basados en los modelos Invoice e Item,

ItemFormSet = inlineformset_factory(
    Invoice,
    Item,
    form=ItemForm,
    fields=('description', 'quantity', 'rate', 'amount'),
    extra=4
)

Sin embargo, si quiero crear contenido de forma dinámica, por ejemplo en mi caso agregar más items a una factura, ¿es posible utilizar formsets?

Si es posible agradezco me regalen un pequeño ejemplo.

1
  • Javier, me comentas si te ayudó mi respuesta.
    – César
    el 2 ene. 2016 a las 2:08

1 respuesta 1

4

Si, es posible. Hasta ahora la mejor forma que he encontrado de hacerlo es usando JavaScript / jQuery, no he encontrado la forma de hacer esto dinámicamente usando solo Django.

Imagino que en tu template, estás haciendo algo como esto:

...

{{ formset.management_form }}
{% for form in formset %}
    {{ form.id }}
    {{ form.description }}
    {{ form.quantity }}
    {{ form.rate }}
    {{ form.amount }}
{% endfor %}

...

Esto te debe estar mostrando cuatro formularios para cada Item de tu Invoice. Ahora lo que necesitamos son un par de botones para agregar o quitar formularios dinámicamente, observa como estoy usando un <table></table>:

{{ formset.management_form }}
<table class="table">
    <thead>
        <tr>
            <th>Description</th>
            <th>Quantity</th>
            <th>Rate</th>
            <th>Amount</th>
        </tr>
    </thead>
    <tbody>            
        {% for form in formset %}
            <tr>
                <td>{{ form.id }}</td>
                <td>{{ form.description }}</td>
                <td>{{ form.quantity }}</td>
                <td>{{ form.rate }}</td>
                <td>{{ form.amount }}</td>
            </tr>
        {% endfor %}
    </tbody>
</table>
<button id="add-item" type="button">Agregar</button>
<button id="remove-item" type="button">Quitar</button>

La función que siempre he usado para agregar formularios dinámicamente es la recomendada en la repuesta de Paolo Bergantino. Veamos como crear la funcionalidad de los botones en JavaScript:

<script type="text/javascript">
    $(document).ready(function() {
        $("#add-item").on("click", addItem);
        $("#remove-item").on("click", removeItem);
    });

    function addItem() {
        // Clonamos la ultima fila de la tabla
        var newElement = $(".table tr:last").clone(true);
        // Necesitamos aumentar en 1 el total de los formularios
        // por eso obtenemos el total actual, debería ser 4
        var total = $("#id_item-TOTAL_FORMS").val();
        // Cuando se usan formsets, los elementos del formulario 
        // son enumerados (id_item-0-rate, id_item-1-rate, etc.)              
        // entonces necesitamos que el nuevo elemento siga esa 
        // numeración
        newElement.find(":input").each(function() {
            var name = $(this).attr("name").replace("-" + (total-1) + "-", "-" + total + "-");
            var id = "id_" + name;
            // Seteamos los atributos y limpiamos los valores
            $(this).attr({"name": name, "id": id}).val("");
        });
        // Aumentamos en 1 la cantidad de formularios en el formset
        total++;
        $("#id_item-TOTAL_FORMS").val(total);
        // Insertamos el nueva formulario al final
        $(".table tr:last").after(newElement);
        // Solo mostramos el botón para quitar si hay mas de un formulario
        if (total > 1) {
            $("#remove-item").show();
        }
    }

    function removeItem() {
        // Obtenemos el último formulario de la tabla
        var lastElement = $(".table tr:last");
        // Obtenemos el total de formularios ya que ahora tenemos
        // que descontar un formulario
        var total = $("#id_item-TOTAL_FORMS").val();
        $(lastElement).remove();
        // Actualizamos el total de los formularios
        total--;
        $("#id_item-TOTAL_FORMS").val(total);
        // Solo mostrar el botón si existe por lo menos un formulario
        if (total < 2) {
            $("#remove-item").hide();
        }
    }
</script>

Puede parecer un poco complicado al principio, pero en general lo que se está haciendo es actualizar las cantidades de los formularios, ya que el ManagementForm lleva la cuenta de los formularios totales. De igual manera es necesario actualizar el contador de los elementos de los formularios, como mencionaba en el JavaScript, los elementos de los formularios son enumerados:

<tr>
    <td>
        <input id="id_item-0-description" name="item-0-description">
    </td>
    <td>
        <input id="id_item-0-quantity" name="item-0-quantity">
    </td>
    <td>
        <input id="id_item-0-rate" name="item-0-rate">
    </td>
    <td>
        <input id="id_item-0-amount" name="item-0-amount">
    </td>
</tr>
<tr>
    <td>
        <input id="id_item-1-description" name="item-1-description">
    </td>
    <td>
        <input id="id_item-1-quantity" name="item-1-quantity">
    </td>
    <td>
        <input id="id_item-1-rate" name="item-1-rate">
    </td>
    <td>
        <input id="id_item-1-amount" name="item-1-amount">
    </td>
</tr>
<tr>
    ...
</tr>

Por lo que si agregas un quinto formulario debería respetar ese orden y quedar de la siguiente forma:

<tr>
    <td>
        <input id="id_item-4-description" name="item-4-description">
    </td>
    <td>
        <input id="id_item-4-quantity" name="item-4-quantity">
    </td>
    <td>
        <input id="id_item-4-rate" name="item-4-rate">
    </td>
    <td>
        <input id="id_item-4-amount" name="item-4-amount">
    </td>
</tr>

Nota final:

Estoy asumiendo que el prefijo de tu formulario es 'item', de no ser el caso puedes forzar a que así sea en la definición de tu formset:

formset = ItemFormSet(prefix='item')

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.