将条目添加到选择字段烧瓶WTForms

Question

我有以下数据库模型：

class FlashcardCollection(db.Model):
    __tablename__ = 'flashcardcollection'
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(64), index=True)
    timestamp = db.Column(db.DateTime, index=True, default=datetime.utcnow)
    user_id = db.Column(db.Integer, db.ForeignKey('users.id'))
    flashcards = db.relationship('Flashcard', backref='collection', lazy='dynamic')
    categories = db.relationship('Category',
                             secondary=has_category,
                             backref=db.backref('collections', lazy='dynamic'),
                             lazy='dynamic')

class Category(db.Model):
    __tablename__ = 'category'
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(64), unique=True, index=True)

has_category = db.Table('has_category',
                    db.Column('category_id', db.Integer, db.ForeignKey('category.id')),
                    db.Column('flashcardcollection_id', db.Integer, db.ForeignKey('flashcardcollection.id')))

我有以下表单类：

class FlashcardCollectionForm(FlaskForm):
    name = StringField('Collection name', validators=[DataRequired()])
    category = SelectField('Category', choices=[])
    submit = SubmitField('Add')

通过此表格，我将添加一个新的抽认卡集合。 我也将允许用户在创建集合时为抽认卡集合添加新的类别。

查看功能如下（现在什么也不做）

@main.route('/add-collection', methods=['GET', 'POST'])
@login_required
def add_collection():
   form = FlashcardCollectionForm()
   if form.validate_on_submit():
       flash('Flashcard Collection added.')
       return redirect(url_for('.index'))
   return render_template('add_collection.html', form=form)

在此功能视图中，将创建新的Flashcardcollection并将其添加到数据库中。

这是模板：

{% block page_content %}
    <div class="page-header">
        <h1>Add a new Flashcard Collection</h1>
    </div>
    <div class="col-md-4">

        <form action="#" method="post">
            {{ form.csrf_token }}
            {{ form.name.label }} {{ form.name(size=20) }}
            {{ form.category.label }} {{ form.category(id="test") }}
            <button>Add</button>
            <input type="submit" value="Go">
        </form>
    </div>
{% endblock %}

单击“添加”按钮应提示用户输入新类别。 然后应将此类别添加到数据库中并显示在“选择”字段中。 单击“提交”按钮应将抽认卡集合添加到数据库中。

问题是第一部分。 创建新的抽认卡集合时，如何动态添加新类别？ 有没有Javascript的解决方案，还是我应该使用JavaScript？ 如果是，函数的外观如何？

Answer 1

使用flask_sqlalchemy可以轻松创建模型并填充选择标签。 接下来，添加__init__方法以形成类以填充数据库中的值：

class FlashcardCollectionForm(FlaskForm):
    ...
    def __init__(self, *args, **kwargs):
        super(FlashcardCollectionForm, self).__init__(*args, **kwargs)
        self.category.choices = [(card.id)(card.category) for card in Card.query.all()]

使用__init__ ，我们为选择字段设置所有来自数据库的选项。 最后，保存条目：

def add_collection():
   form = FlashcardCollectionForm()
   if request.method == 'POST':
       c = Category(name=form.name.data)
       f = FlashcardCollection(...)
       has_category(category_id=c.id, flashcardcollection_id=f.id)
       db.session.add_all([c, f])
       db.session.commit()