从行数据控件中删除单选按钮

Question

我有一个表格，里面有一个表格，里面显示了数据库查询的结果。该表有一个单选控件和两个按钮：一个用于编辑，另一个用于删除。为了让我修改一行，我必须选择相应行的收音机，然后按“删除”或“编辑”按钮。我想要做的是删除该单选按钮并使按钮直接带我编辑相应的行。当我删除单选按钮（这很明显）时，每一行的每个按钮只需要我编辑/删除第一个结果。

这是我的表格：

<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>

这是我的路线：

@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)

Answer 1

假设您有一个在表中显示数据库查询结果的路由：

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

list.html 看起来像这样：

<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>

在进行编辑时，我们将用户重定向到采用参数 的路由，加载相应的行并在表单中显示所有必要的信息。

@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)

删除一行时，您可以执行相同的操作，但是您会收到一个 GET 请求，删除服务器上的某些内容，这是不应该发生的。您可以轻松地使用 jQuery 发送 DELETE 请求：

$(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()
                }
            }
        });
    });

});

当用户现在点击删除按钮时，请求现在被发送到如下所示的路由：

@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)

如果找到该行，它将被删除，并为用户重新加载窗口。

我不知道这是标准还是最好的方法，但它对我有用。