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

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

0 голосов
/ 26 июня 2019

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

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

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

backend.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)

models.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)

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

1 Ответ

0 голосов
/ 26 июня 2019

Вы должны использовать 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 %}
...