web-dev-qa-db-ja.com

Flask、Jinja2テンプレートを使用して編集可能なテーブルをレンダリングし、返されたフォームデータを処理します

FlaskとJinja2を使用しており、複数の行を持つ編集可能なテーブルを作成する必要があります。

テーブルは次のようになります。

img

そして、そのためのHTMLは次のとおりです。

<form action="/support/team-members-update" method="post">
<table>
  <tbody><tr>
    <th>Name</th>
    <th>Id</th>
    <th>Inbox Share</th>
  </tr>
  <tr>
    <td>Ben</td><td>55555</td><td><input type="text" name="share_55555" value="0"></td></tr>  <tr>
    <td>Steve</td><td>66666</td><td><input type="text" name="share_66666" value="1"></td></tr> <tr>
    <td>Harry</td><td>77777</td><td><input type="text" name="share_77777" value="1"></td></tr>  <tr>
    <td>Sally</td><td>88888</td><td><input type="text" name="share_88888" value="1"></td></tr></tbody></table>
  <button type="submit">Send</button>
</form>

私の現在の実装はLuaにあり、文字列の束をハードコーディングし、投稿データをネイティブのLuaタイプに手動で接続しています（楽しいです！）。必要に応じて、Pythonでフォームデータを手動で処理することもできますが、おそらくもっと良い解決策があると思います。

WTFormsについて少し調べましたが、正しく機能させることができませんでした。

FieldList を見つけましたが、まったく同じフィールドを持つ複数の行ではなく、同じフィールドのリストを処理しているようです。

TableWidget も見つかりましたが、ドキュメントがまばらで、それを実装して、私が探していることを実行できるかどうかを判断する方法がわかりません。

pythonflaskjinja2wtforms
10
Ben McCormack

FieldListは機能します。 FormField のリストを作成する必要があります。次のようにFormFieldを指定します。

class MemberForm(Form):
    name = StringField('name')
    member_id = StringField('member_id')
    inbox_share = IntegerField('inbox_share')
    # etc.

class TeamForm(Form):
    title = StringField('title')
    teammembers = FieldList(FormField(MemberForm))

次に、次のようなビュー関数でデータベースからフォームを作成できます。

@app.route('/support/team-members-update', methods=['GET','POST'])
def update_team_members():
    teamform = TeamForm()
    teamform.title.data = "My Team" # change the field's data
    for member in DB.get('teammembers') # some database function to get a list of team members
        member_form = MemberForm()
        member_form.name = member.name # These fields don't use 'data'
        member_form.member_id = member.id
        member_form.inbox_share = member.share

        teamform.teammembers.append_entry(member_form)

    return render_template('edit-team.html', teamform = teamform)

次に、テンプレートで、テーブルの行を作成するときにteammembersの各アイテムを反復処理できます。

<html>
    <head>
        <title>Edit Team Members</title>
    </head>
    <body>
        <h1>Edit Team</h1>
        <div>
            <form action="" method="post" name="teamform">
                {{ teamform.hidden_tag() }}
                Team Title: {{ teamform.title }}<br>
                <div>
                    <table>
                        <tr>
                            <th> Name </th>
                            <th> ID </th>
                            <th> Inbox Share </th>
                        </tr>
                        {% for member in teamform.teammembers %}
                        <tr>
                            <td>{{ member.name }}</td>
                            <td>{{ member.member_id }}</td>
                            <td>{{ member.inbox_share }}</td>
                        </tr>
                        {% endfor %}
                    </table>
                </div>
                <p><input type="submit" name="edit" value="Send"></p>
            </form>
        </div>
    </body>
</html>
10
Aaron D

WTFormsを思い通りに動作させることができませんでした。自分のニーズには少し重すぎると思うので、最終的には自分のJinja2テンプレートを使用してフォームを作成し、formencodeライブラリを使用して投稿変数をdictに解析しました。これは私にとっては十分に機能します。 （ この質問formencodeライブラリを指定してくれてありがとう）。

私が使用しているさまざまなファイルを大まかに見てから、下部にある重要な部分について説明します。

app.py：

_from flask import Flask, render_template, request
from formencode import variabledecode
import pickledb

app = Flask(__name__)   

DB = pickledb.load('data/data.db', False)

@app.route('/team-members', methods=['GET', 'POST'])
def team_members():
  global DB
  teammembers = DB.get('teammembers')
  # teammembers looks like this, roughly:
  # [{"id": 55555, "name": "Ben", "share": 0},
  #  {"id": 66666, "name": "Amy", "share": 1},
  #  {"id": 77777, "name": "Ted", "share": 1}] 

  if request.method == 'POST':    
    postvars = variabledecode.variable_decode(request.form, dict_char='_')
    for k, v in postvars.iteritems():
      member = [m for m in teammembers if m["id"] == int(k)][0]
      member['share'] = v["share"]
    DB.set('teammembers', teammembers)
    DB.dump()
  return render_template('team-members.html', teammembers=teammembers) 

if __name__ == '__main__':
    import argparse
    parser = argparse.ArgumentParser()
    parser.add_argument('--debug', '-d', action='store_true')
    parser.add_argument('--port', '-p', default=5000, type=int)
    parser.add_argument('--Host', default='0.0.0.0')

    args = parser.parse_args()
    app.run(args.Host, args.port, debug=args.debug)
_

私は3つのテンプレートファイルを持っていますが、もちろんこれほど多くは必要ありません。 team-members.htmlには、この問題に関連するコードがあります。

_formhelpers.html：

_{% macro render_input(id, fieldname, value) %}<input type="text" name="{{ id  }}_{{ fieldname }}" value="{{ value }}" />{% endmacro %}
_

layout.html：

_<!doctype html>
<html>
<head>
  <title>Support Team Site</title>
</head>
<body>
<div class="page">
  <h1>Support Team Site</h1>
  {% for message in get_flashed_messages() %}
    <div class=flash>{{ message }}</div>
  {% endfor %}
  {% block body %}{% endblock %}
</div>
</body>
</html>
_

team-members.html：

_{% from "_formhelpers.html" import render_input %}

{% extends "layout.html" %}
{% block body %}

  <form action="/team-members" method="post">
    <table>
      <tr>
        <th>Name</th>
        <th>ID</th>
        <th>Inbox Share</th>
      </tr>
      {% for member in teammembers %}
      <tr>
        <td>{{member['name']}}</td>
        <td>{{member['id']}}</td>
        <td>{{ render_input(member['id'], 'share', member['share']) }}</td>
      </tr>
      {% endfor %}
    </table>
    <button type="submit">Send</button>
  </form>

{% endblock %}
_

これにより、次のHTMLがレンダリングされます。

_<!doctype html>
<html>
<head>
  <title>Support Team Site</title>
</head>
<body>
<div class="page">
  <h1>Support Team Site</h1>



  <form action="/team-members" method="post">
    <table>
      <tr>
        <th>Name</th>
        <th>ID</th>
        <th>Inbox Share</th>
      </tr>

      <tr>
        <td>Ben</td>
        <td>55555</td>
        <td><input type="text" name="55555_share" value="0" /></td>
      </tr>

      <tr>
        <td>Amy</td>
        <td>66666</td>
        <td><input type="text" name="66666_share" value="1" /></td>
      </tr>

      <tr>
        <td>Ted</td>
        <td>77777</td>
        <td><input type="text" name="77777_share" value="1" /></td>
      </tr>

    </table>
    <button type="submit">Send</button>
  </form>


</div>
</body>
</html>
_

App.pyの_if request.method == 'POST':_部分で何が起こっているかについて言及する価値があります。 _request.form_変数のタイプはImmutableMultiDictで、印刷すると次のようになります。

_ImmutableMultiDict([('55555_share', u'0'), ('66666_share', u'1'), ('77777_share', u'1')])
_

これは多少便利ですが、それを処理するには、これを手動で解析する必要があります。そこにあるキーの形式を_id_fieldname_形式でメモします（例：_55555_share_）。これは、_formhelpers.htmlテンプレートファイルに配置した_render_input_マクロのおかげです。ポストフォーム入力を処理するときは、variabledecode.variable_decode(request.form, dict_char='_')を使用します。これは、フォームデータを解析し、フォーム入力のname値に使用した命名規則に基づいて辞書に変換します。外観は次のとおりです。

_{
    "55555": {
        "share": "0"
    },
    "66666": {
        "share": "1"
    },
    "77777": {
        "share": "1"
    }
}
_

これにより、元のデータに簡単にマップして更新できます。

6
Ben McCormack