Pilih nilai secara otomatis dari daftar dropdown saat mengedit nilai yang ada - pendorong labu

Saya telah membuat situs web berdasarkan 'Bangun Tabel Langsung Menggunakan Flask' dengan pendorong dari contoh ini: https://pusher.com/tutorials/live-table-flask

Semuanya bekerja dengan luar biasa kecuali satu hal. Untuk beberapa nilai saya alih-alih meminta pengguna memasukkan nilainya sendiri, saya menggunakan daftar dropdown nilai untuk mereka pilih. Saat mereka mengedit entri, semua nilai diingat kecuali nilai ini yang diubah kembali ke nilai default. Saya memerlukan cara agar nilai ini diingat dan dipilih saat mereka mengedit bagian tersebut.

Kode yang digunakan untuk membuat/mengedit pekerjaan (sama untuk kedua 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 %}

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

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

Ingin dapat mengedit entri dan membuat daftar dropdown otomatis memilih opsi yang benar, bukan opsi default, jadi saat mengedit Anda tidak perlu memasukkan kembali semua nilai lagi.


python-3.x flask dropdown pusher
person Zanatos    schedule 26.06.2019    source sumber

Jawaban (1)


arrow_upward
1
arrow_downward

Anda harus menggunakan WTForms daripada membuat formulir ini sendiri. Ia memiliki SelectField bawaan. Setelah melakukannya, Anda akan dapat mengisi opsi di tempat formulir ditentukan (jika opsinya statis) atau dalam tampilan yang dimaksud (update_record di sini). Contoh:

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)

Jangan lupa untuk menggunakan {{ form.hidden_tag() }} pada template di dalam formulir Anda. Ini akan memberi Anda perlindungan CSRF, yang tidak dimiliki formulir Anda saat ini.

Selain itu, backend.html dan update.html tampaknya hampir identik. Seharusnya tidak sulit menggunakan satu file untuk ini. Misalnya.:

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