Eliminando el botón de opción del control de datos de fila

Página de inicio > Eliminando el botón de opción del control de datos de fila

Eliminando el botón de opción del control de datos de fila

Tengo un formulario con una tabla dentro que muestra los resultados de una consulta a la base de datos. Esa tabla tiene un control de radio y dos botones: uno para editar, otro para borrar. Para poder modificar una fila, tengo que seleccionar la radio de la fila correspondiente y luego presionar el botón "eliminar" o "editar". Lo que quiero hacer es eliminar ese botón de opción y hacer que los botones me lleven directamente a editar la fila correspondiente. Cuando elimino el botón de radio (es un poco obvio), cada botón de cada fila solo me lleva a editar/eliminar el primer resultado.

Este es mi formulario:

<form method="POST" id="form2" action="{{ url_for('edit_or_delete') }}">

        <table class="table" id="tableSelect">
            <tr>
                <th></th>
                <th>Manejar</th>
                <th>Cantidad</th>
                <th>Concepto</th>
                <th>Fecha</th>
                <th>Updated</th>
            </tr>

            <!-- loop for results -->
            {% for s in mov %}
            <tr><label for="id"></label>
                <td class="center-align"><input type="radio" name="id" value="{{ s.id }}" required></td>
                <td>
                    <button type="submit" name="choice" value="delete" class="btn btn-danger">Borrar</button>
                    <button type="submit" name="choice" value="edit" class="btn btn-primary">Editar</button>
                </td>
                <td>${{ s.cantidad }}</td>
                <td>{{ s.concepto }}</td>
                <td>{{ s.fecha }}</td>
                <td>{{ s.udpated }}</td></label>
            </tr>
            {% endfor %}
        </table>
<!-- end form-group -->
        </form>

Esta es mi ruta:

@app.route('/edit_or_delete', methods=['POST'])
def edit_or_delete():
    id = request.form['id']
    choice = request.form['choice']
    movs = Movs.query.filter(Movs.id == id).first()
    # two forms in this template
    form1 = AddRecord()
    form2 = DeleteForm()
    return render_template('edit_or_delete.html', movs=movs, form1=form1, form2=form2, choice=choice)

Mostrar la mejor respuesta

#flask

Publicado : 2 January, 2021 @ 06:22

brudi4550

Digamos que tiene una ruta que muestra los resultados de la consulta de la base de datos en una tabla:

@app.route('/some_route')
def some_route():
    result = Some_Database_Class.query.all()
    return render_template('list.html', result=result)

list.html se vería así:

<table class="table">
    <tr>
        <th>Some Data</th>
        <th>Edit</th>
        <th>Delete</th>
    </tr>
    {% for row in result %}
    <tr>
        <td>{{ row.some_data }}</td>
        <td>
            <a href="{{ url_for('edit_row', row_id=row.id }}">
                This links to an edit route with the row id included in the URL
            </a>
        </td>
        <td>
            <button class="delete_row" data-row-id="{{ row.id }}">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
        </td>
    </tr>
    {% endfor %}
</table>

Al hacer una edición redireccionamos al usuario a una ruta que toma un parámetro , carga la fila correspondiente y muestra toda la información necesaria en un formulario.

@app.route('/edit_row/<row_id>'), methods=['GET', 'POST'])
def edit_row(row_id):
    row = Some_Database_Class.query.filter_by(id=row_id).first()
    form = EditRowForm()
    if request.method == 'GET':
        form.some_form_field.data = row.some_data
    if form.validate_on_submit():
        row.some_data = form.some_form_field.data
        db.session.commit()
    return render_template('edit_row.html', form=form)

Al eliminar una fila, podría hacer lo mismo, pero luego tendría una solicitud GET que eliminaría algo en el servidor, lo que no debería suceder. Puede usar fácilmente jQuery para enviar una solicitud de ELIMINACIÓN:

$(document).ready(function () {

    //Delete a row on button click
    $('.delete_row').click(function () {
        var row_id = $(this).attr('data-row-id')
        var ajaxReq = $.ajax({
            url: '/delete_row/' + row_id,
            type: 'DELETE',
            statusCode: {
                200: function () {
                    window.location.reload()
                }
            }
        });
    });

});

Cuando el usuario ahora hace clic en el botón Eliminar, ahora se envía una solicitud a una ruta que se vería así:

@app.route('/delete_row/<row_id>'), methods=['DELETE'])
def delete_row(row_id):
    row = Some_Database_Class.query.filter_by(id=row_id).first()
    if row is not None:
        db.session.delete(row)
        db.session.commit()
        return Response(status=200)
    return Response(status=404)

Si se encuentra la fila, se elimina y la ventana se vuelve a cargar para el usuario.

No sé si esta es la forma estándar o la mejor de hacerlo, pero a mí me funciona.

Publicado : 4 January, 2022 @ 13:49

Carlos

¡Genio! ¡Muchas gracias!

Publicado : 5 January, 2022 @ 05:30