将 Select2 与烧瓶 wtforms 一起使用
Posted
技术标签:
【中文标题】将 Select2 与烧瓶 wtforms 一起使用【英文标题】:Using Select2 with flask-wtforms 【发布时间】:2019-01-01 08:22:22 【问题描述】:在 select2 操作下拉字段后,form.owner_id.data
的常规使用会产生 None
。如何从 select2 字段中提取所选选项。
如果我禁用 select2 javascript,wtforms 将正常工作,我将能够使用form.owner_id.data
。 (但看起来很丑)
screenshot of rendered form
forms.py
class ProjectForm(FlaskForm):
owner_id = SelectField('Owner:', [validators.Required()], choices=[], render_kw="placeholder": "Owner company *")
(为简单起见,表格的其余部分已被截断)
views.py
@app.route('/new_project/<int:company_id>', methods=('GET', 'POST'))
def new_project(company_id):
membership = Membership.query.filter_by(user_id=current_user.id, company_id=company_id).first()
company = Company.query.filter_by(id=company_id).first_or_404()
form = ProjectForm()
form.owner_id.choices = [(str(comp.id), repr(comp)) for comp in Company.query.all()]
form.client_id.choices = [(str(comp.id), repr(comp)) for comp in Company.query.all()]
form.contractor_id.choices = [(str(comp.id), repr(comp)) for comp in Company.query.all()]
form.membership_id.choices = [(str(comp.id), repr(comp)) for comp in Company.query.all()]
if request.method == 'POST':
flash(str(form.owner_id.data), 'success')
if form.validate_on_submit():
project = Project()
connection = Assignment()
# PROJECT DETAILS
project.title = form.title.data
project.description = form.description.data
project.owner_id = int(form.owner_id.data)
_宏
% macro render_select_field(field, placeholder='Select...', label='Select an option below') %
<div class="form-group">
<label> label </label>
<select data-placeholder=" placeholder " class="select-size-xs">
<option></option>
% for choice in field.choices %
<option value=" choice[0] "> choice[1] </option>
% endfor %
</select>
% if field.errors %
% for error in field.errors %
<span class="help-block text-danger"><i class="icon-cancel-circle2 position-left"></i> error </span>
% endfor %
% endif %
</div>
% endmacro %
html
<form method="POST" action=" url_for('new_project', company_id=company.id) " enctype="multipart/form-data" role="form">
<div class="panel panel-body login-form">
<div class="text-center">
<div class="icon-object text-muted"><i class="icon-plus2"></i></div>
</div>
form.hidden_tag()
<div class="text-center form-group"><span>Project details</span></div>
new_render_field(form.title, icon="icon-quill2", class_='form-control')
new_render_field(form.description, icon="icon-stack-text", class_='form-control', rows=10)
render_select_field(form.owner_id, placeholder="Who's doing the work?", label="Select the owner company")
render_select_field(form.client_id, placeholder="Where do the bills go?", label="Select the client company")
new_render_field(form.default_client_rate, icon="icon-price-tag", class_='form-control')
new_render_field(form.default_contractor_rate, icon="icon-price-tag", class_='form-control')
<!-- THE REST OF FORM HAS BEEN TRUNCATED FOR SIMPLICITY -->
<div class="form-group">
<button type="submit" class="btn bg-pink-400 btn-block">Create</button>
</div>
</div>
</form>
【问题讨论】:
在 Select2 操作 DOM 之后,您原来的<option>
s 仍然存在,隐藏在所有新代码之下。也许您可以在提交按钮中添加一些 JS,将旧选项标记为 selected="selected"
我尝试过:var selected = $('#select2-1mme-container').text() $('option:contains(selected)').setAttribute('selected', 'selected');
。但是option:contains(selected)
没有返回任何结果。还有其他想法吗?
【参考方案1】:
因此,在分析了检查窗口中的选择字段后,很明显选择字段缺少 wtforms 验证表单所需的 name=" field.name "
。在我的 _macro 中所做的简单更改来自于:
<select data-placeholder=" placeholder " class="select-size-xs">
对此:
<select data-placeholder=" placeholder " class="select-size-xs" name=" field.name ">
有了这个添加,wtforms 现在可以验证,并找到返回正确 id 的 form.owner_id.data
的选定选项。
【讨论】:
以上是关于将 Select2 与烧瓶 wtforms 一起使用的主要内容,如果未能解决你的问题,请参考以下文章
如何将 ActiveDataProvider 与 select2 一起使用?
如何将 Bloodhound 与使用烧瓶 jsonify 创建的 JSON 一起使用