Поле множественного выбора в колбе

Question

Я пытаюсь использовать множественное поле для перемещения данных слева направо с помощью колбы.Я могу легко отображать и перемещать данные слева направо, но когда я отправляю форму, у меня возникает ошибка, связанная с тем, что в поле нет правильных вариантов выбора.

Я делаю так, как мог?Есть еще один способ сделать это?

Это мой код:

forms.py:

class MigrateUsersForm(FlaskForm):
    multiselect = SelectMultipleField("Utilisateurs des anciennes campagne")
    multiselect_to = SelectMultipleField("Utilisateurs de la campagne en cours")
    submit = SubmitField('Valider')

    def __init__(self, *args, **kwargs):
        super(MigrateUsersForm, self).__init__(*args, **kwargs)
        self.multiselect.choices = [(s.id, s.nom_agent+" "+s.prenoms_agent) for s in (User.query.filter(User.id!=current_user.id, User.id.in_(db.session.query(Users_Campagne.users_id).join(Campagnes).filter(Users_Campagne.campagne_id==Campagnes.campagne_id, Campagnes.isActive==0))).order_by(User.nom_agent).all())]
        self.multiselect_to.choices = [(s.id, s.nom_agent+" "+s.prenoms_agent) for s in (User.query.filter(User.id!=current_user.id, User.id.in_(db.session.query(Users_Campagne.users_id).join(Campagnes).filter(Users_Campagne.campagne_id==Campagnes.campagne_id, Campagnes.isActive==1))).order_by(User.nom_agent).all())]

template.html:

<form action="" method="post" class="" autocomplete="off">
                    {{ form.csrf_token }}
                        <div class="row">
                            <div class="col-xs-5 col-md-5 col-sm-5">
                                <div class="form-group ">
                                    <label for="multiselect" class="col-form-label">Anciens utilisateurs *</label>
                                    {{ form.multiselect(size=10, class='form-control',  multiple="multiple") }}
                                    <span style="color: #f00"> {% if form.multiselect.errors %}{{ form.multiselect.errors[0] }}{% endif %}</span>
                                </div>
                            </div>
                            <div class="col-xs-2 col-md-2 col-sm-2" style="padding-top: 7%;">
                                <button type="button" id="multiselect_rightAll" class="btn btn-block"><span class="icon-forward3"></span></button>
                                <button type="button" id="multiselect_rightSelected" class="btn btn-block"><span class="icon-cheveron-right"></span></button>
                                <button type="button" id="multiselect_leftSelected" class="btn btn-block"><span class="icon-cheveron-left"></span></button>
                                <button type="button" id="multiselect_leftAll" class="btn btn-block"><span class="icon-backward2"></span></button>
                            </div>
                            <div class="col-xs-5 col-md-5 col-sm-5">
                                <div class="form-group ">
                                    <label for="multiselect_to" class="col-form-label">Nouveau utilisateurs *</label>
                                    {{ form.multiselect_to(size=10, class='form-control',  multiple="multiple") }}
                                    <span style="color: #f00"> {% if form.multiselect_to.errors %}{{ form.multiselect_to.errors[0] }}{% endif %}</span>
                                </div>
                            </div>
                        </div>
                        <div class="text-right">
                           <button type="submit" class="btn btn-primary">Valider</button>
                        </div>
                    </form>

views.py

@login_required
def migrate_users():
    form = MigrateUsersForm()
    if request.method == "POST" and form.validate_on_submit():
        print("Here am i")
        '''multiselect = ', '.join(form.multiselect.data)
        multiselect_to = ', '.join(form.multiselect_to.data)
        print(multiselect)
        print(multiselect_to)'''
    return render_template('admin/migrate_users.html', form=form)

Вот как отображается шаблон

Когда я выбираю элемент слева направо, у меня появляется это

И когда я нажимаю на "Подтвердить", это ошибка, с которой я сталкиваюсь Ошибка, с которой я сталкиваюсь

Answer 1

Я заменил self.multiselect.choices и self.multiselect_to.choices с фиксированным списком значений и могу получить выбранные несколько значений в отправленном POST запросе.

Структура каталога:

├── multi_select_app.py
├── multi_select_form.py
└── templates
    └── multi_select.html

multi_select_app.py:

from flask import Flask, request, render_template, jsonify
from multi_select_form import MigrateUsersForm

app = Flask(__name__)
# Set the secret key to some random bytes. Keep this really secret!
app.secret_key = b'_5#y2L"F4Q8z\n\xec]/'

@app.route('/migrate', methods = ["GET", "POST"])
def migrate_users():
    form = MigrateUsersForm()
    if request.method == "POST" and form.validate_on_submit():
        multiselect = ', '.join(form.multiselect.data)
        multiselect_to = ', '.join(form.multiselect_to.data)
        posted_data = {
            "multiselect": multiselect,
            "multiselect_to": multiselect_to
        }
        return jsonify(posted_data)
    return render_template('multi_select.html', form=form)

multi_select_form.py:

from flask_wtf import FlaskForm
from wtforms import SelectMultipleField, SubmitField

class MigrateUsersForm(FlaskForm):
    multiselect = SelectMultipleField("Utilisateurs des anciennes campagne")
    multiselect_to = SelectMultipleField("Utilisateurs de la campagne en cours")
    submit = SubmitField('Valider')


    def __init__(self, *args, **kwargs):
        super(MigrateUsersForm, self).__init__(*args, **kwargs)
        self.multiselect.choices = [("py", "python"), ("rb", "ruby"), ("js", "javascript")]
        self.multiselect_to.choices = [("py", "python"), ("rb", "ruby"), ("js", "javascript")]

templates\multi_select.html:

<form action="" method="post" class="" autocomplete="off">
  {{ form.csrf_token }}
  <div class="row">
    <div class="col-xs-5 col-md-5 col-sm-5">
      <div class="form-group ">
        <label for="multiselect" class="col-form-label">Anciens utilisateurs *</label>
        {{ form.multiselect(size=10, class='form-control',  multiple="multiple") }}
        <span style="color: #f00"> {% if form.multiselect.errors %}{{ form.multiselect.errors[0] }}{% endif %}</span>
      </div>
    </div>
    <div class="col-xs-2 col-md-2 col-sm-2" style="padding-top: 7%;">
      <button type="button" id="multiselect_rightAll" class="btn btn-block"><span class="icon-forward3"></span></button>
      <button type="button" id="multiselect_rightSelected" class="btn btn-block"><span class="icon-cheveron-right"></span></button>
      <button type="button" id="multiselect_leftSelected" class="btn btn-block"><span class="icon-cheveron-left"></span></button>
      <button type="button" id="multiselect_leftAll" class="btn btn-block"><span class="icon-backward2"></span></button>
    </div>
    <div class="col-xs-5 col-md-5 col-sm-5">
      <div class="form-group ">
        <label for="multiselect_to" class="col-form-label">Nouveau utilisateurs *</label>
        {{ form.multiselect_to(size=10, class='form-control',  multiple="multiple") }}
        <span style="color: #f00"> {% if form.multiselect_to.errors %}{{ form.multiselect_to.errors[0] }}{% endif %}</span>
      </div>
    </div>
  </div>
  <div class="text-right">
    <button type="submit" class="btn btn-primary">Valider</button>
  </div>
</form>

requirements.txt (установленные пакеты):

aniso8601==6.0.0
Click==7.0
Flask==1.0.2
Flask-Cors==3.0.7
Flask-REST-JSONAPI==0.26.0
Flask-RESTful==0.3.7
Flask-WTF==0.14.2
itsdangerous==1.1.0
Jinja2==2.10
MarkupSafe==1.1.1
marshmallow==2.18.0
marshmallow-jsonapi==0.21.0
pytz==2018.9
six==1.12.0
SQLAlchemy==1.3.2
Werkzeug==0.15.0
WTForms==2.2.1

Запуск приложения:

export FLASK_ENV=development
export FLASK_APP=multi_select_app.py
flask run

Вывод:

Множественный выбор формы ввода (пропущены CSS-файлы, поэтому сломанный стиль):

Представленные значения после нажатия кнопки отправки:

Как видите,мы получаем правильные несколько выбранных значений после отправки формы.Пожалуйста, проверьте значения self.multiselect.choices и self.multiselect_to.choices в методе __init__ формы MigrateUsersForm.

Обновление: Я думаю, s.id является целочисленным полем.Когда вы отправляете форму, она обрабатывается как строковое поле.Установите coerce=int в SelectMultipleField.Заменить оба:

• multiselect = SelectMultipleField("Utilisateurs des anciennes campagne") на multiselect = SelectMultipleField("Utilisateurs des anciennes campagne", coerce=int)
• multiselect_to = SelectMultipleField("Utilisateurs de la campagne en cours") на multiselect_to = SelectMultipleField("Utilisateurs de la campagne en cours", coerce=int)

Ссылка: - SelectMultipleField Documentation