Автоматический выбор значения из выпадающего списка при редактировании существующего значения - толкатель фляги

Я создал веб-сайт на основе «Построить живую таблицу с помощью Flask» с толкателем из этого примера: https://pusher.com/tutorials/live-table-flask

Все работает фантастически, за исключением одного. Для некоторых из моих значений вместо того, чтобы пользователь вводил свое собственное значение, я использую раскрывающийся список значений, чтобы они могли выбирать между ними. Когда они переходят к редактированию записи, все значения запоминаются, кроме этого, которое возвращается к значению по умолчанию. Мне нужен способ, чтобы это значение запоминалось и выбиралось, когда они переходят к редактированию части.

Код, используемый для создания/редактирования задания (одинаков для обоих html)

бэкенд.html

    {% extends 'base.html' %}

    {% block content %}

        <form method="POST" id="target"> 
            <div class="form-group">
                <input type="text" class="form-control" name="work" placeholder="Work No">
            </div>
            <div class="form-group">
                <label for='opt'>Choose Option</label>
                <select name='opt'>
                    <option value='Option 1'>Option 1</option>
                    <option value='Option 2'>Option 2</option>
                    <option value='Option 3'>Option 3</option>
                    <option value='Option 4'>Option 4</option>
                </select>
            </div>
            <button type="submit" class="btn btn-block btn-primary">Submit</button>
        </form>
    {% endblock %}

update.html

    {% extends 'base.html' %}

    {% block content %}

        <form method="POST" id="target"> 
            <div class="form-group">
                <input type="text" class="form-control" name="work" value="{{ data.work }}">
            </div>
            <div class="form-group">
                <label for='opt'>Choose Option</label>
                <select name='opt'>
                    <option value='Option 1'>Option 1</option>
                    <option value='Option 2'>Option 2</option>
                    <option value='Option 3'>Option 3</option>
                    <option value='Option 4'>Option 4</option>
                </select>
            </div>
            <button type="submit" class="btn btn-block btn-primary">Submit</button>
        </form>
    {% endblock %}

app.py

    from flask import Flask, request, jsonify, render_template, redirect
    import pusher
    from database import db_session
    from models import Work
    import os

    app = Flask(__name__)
    ...
    @app.route('/edit/<int:id>', methods=["POST", "GET"])
    def update_record(id):
        if request.method == "POST":
            work = request.form["work"]
            opt = request.form["opt"]

            update_work = Work.query.get(id)
            update_work.work = work
            update_work.opt = opt
            db_session.commit()

            data = {
                "id": id,
                "work": work,
                "opt": opt}
            pusher_client.trigger('table', 'update-record', {'data': data })
            return redirect("/active", code=302)
        else:
            new_work = Work.query.get(id)
            new_work.opt = new_work.opt     #do I need this?
            return render_template('update.html', data=new_work)

модели.py

    from sqlalchemy import Column, Integer, String, DateTime
    from database import Base

    class Work(Base):
        __tablename__ = 'works'

        id = Column(Integer, primary_key=True)
        work = Column(String(50))
        opt = Column(String(120))

        def __init__(self, work=None, opt=None):
            self.work = work
            self.opt = opt

        def __repr__(self):
            return '<Work %r>' % (self.work)

Желание иметь возможность редактировать записи и автоматически выбирать правильный параметр в раскрывающемся списке, а не параметр по умолчанию, поэтому при редактировании вам не нужно повторно вводить все значения снова.


person Zanatos    schedule 26.06.2019    source источник


Ответы (1)


Вы должны использовать WTForms вместо создания этой формы самостоятельно. Он имеет встроенный SelectField. Как только вы это сделаете, вы сможете заполнить параметры либо там, где определена форма (если параметры являются статическими), либо в рассматриваемом представлении (здесь update_record). Пример:

from flask import request, redirect
from flask_wtf import FlaskForm
from wtforms import SelectField

from operator import itemgetter

class WorkForm(FlaskForm):
    opt = SelectField('Choose Option', coerce=int, choices=[(num, f"Option {num}") for num in range(1, 5)])
    # ... etc ...

@app.route('/edit/<int:id>', methods=["POST", "GET"])
def edit(id):
    form = WorkForm(request.form)

    if form.validate_on_submit():
        # Do things
        return redirect(url_for('active'), code=302)

    new_work = Work.query.get(id)
    opt_id = 0

    for choice in form.opt.choices:
        if choice[1] == new_work.opt:
            opt_id = choice[0]

    form.opt.data = opt_id
    return render_template('update.html', data=new_work)

Не забудьте использовать {{ form.hidden_tag() }} в шаблоне внутри формы. Это даст вам защиту CSRF, которой нет у вашей нынешней формы.

Кроме того, backend.html и update.html кажутся почти идентичными. Не должно быть сложно использовать для них один файл. Например.:

{% if data is defined %}
<input type="text" class="form-control" name="work" value="{{ data.work }}">
{% else %}
<input type="text" class="form-control" name="work" placeholder="Work No">
{% endif %}
person Nick K9    schedule 26.06.2019