如何让python使用Flask&Jinja 2从动态表中检索用户输入的数据?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (535)

我正在构建一个Flask应用程序,其中包括一个表,用户可以在其中更改一个单元格,并将这些更改“应用”,例如在数据库中更新这些更改。

图片如下:

我有问题,得到烧瓶,以检索这个数据,已提交的形式。

行数是动态的,取决于列表中ID的数量。

这是我的html-对不起,我还在学习。

                            <tbody> 
                            <form method="post" name="productCost">
                        {% for n in range(name_list | length) %}
                            <tr> 
                                <th scope="row" >{{name_list[n]}}</th> 
                                <td>{{ID_list[n]}}</td> 
                                <td id="cost{{n}}">${{cost_list[n]}}</td> 
                                <td>---</td>
                                <td id="changes{{n}}"><button onclick="costChanges{{n}}()">Edit</button></td> 
                            </tr> 
                        <script>
                            function costChanges{{n}}() {
                                document.getElementById("cost{{n}}").innerHTML = "<input placeholder='{{cost_list[n]}}' name={{ID_list[n]}}>";
                                document.getElementById("changes{{n}}").innerHTML = "<button onclick='applyChanges{{n}}()' type='submit'>Apply</button><button onclick='cancelChanges{{n}}()'>Cancel</button>";

                            }
                            function applyChanges{{n}}() {
                                docuemnt.getElementById("cost{{n}}").innerHTML = document.forms["productCost"]["{{ID_list[n]}}"]
                            }
                            function cancelChanges{{n}}() {
                                document.getElementById("cost{{n}}").innerHTML = "{{cost_list[n]}}";
                                document.getElementById("changes{{n}}").innerHTML = "<button onclick='costChanges{{n}}()'>Edit</button>";

                            }
                        </script>
                        {%endfor%}
                    </form>
                        </tbody>

下面是我的python/烧瓶代码:

app.route('/expenses', methods=['GET', 'POST'])
def expenses():
    if 'email' not in session:
        return redirect(url_for('login_now'))

    list_of_product_dicts = get_name_id()
    name_list = []
    asin_list =[]
    cost_list=[]
    for p in list_of_product_dicts:
        name_list.append(p['name'])
        id_list.append(p['id'])
        cost = get_landing_cost(p['id'])
        cost_list.append(cost)

    if request.method == 'POST':
            print(request.form['name']) 
    return flask.render_template('expenses.html', name_list = name_list, id_list=id_list,
        cost_list=cost_list)

我需要python识别已经做出的更改,并将其存储在变量中。这是为了在数据库中更新它-但我不需要数据库代码方面的帮助。我只需要帮助python获取已更改的单元格并识别它所在的行。

提问于
用户回答回答于

它使用起来有点简单。jquery带着ajax。后者使你能够通过与后端脚本通信来动态更新表来更新数据库。

首先,创建HTML脚本(下面的代码为本例创建了不同的表布局,但是,您可以根据下面的代码替换自己的表布局)。jQuery干净地处理Apply、Cancel和Edit按钮功能,并通过ajax:

tables.html

<html>
  <body>
   <table>
   <tr>
     <th>ID</th>
     <th>Cost</th>
     <th>Effective Date</th>
     <th>Make Changes</th>
   </tr>
  {%for row in data%}
  <tr>
    <td>{{row.id}}</td>
    <td class='cost{{row.rowid}}'>{{row.price}}</td>
    <td>{{row.date}}</td>
    <td>
      <div id='options{{row.rowid}}'>
        <button id='mutate{{row.rowid}}'>Edit</button>
      </div>
    <td>
  </tr>
  {%endfor%}
 </table>
 </body>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
 $(document).ready(function() {
  $("div[id^='options']").on('click', 'button', function(){
   var the_id = this.id.match('\\d+');
   var the_type = this.id.match('[a-zA-Z]+');
   if (the_type == "mutate"){
    $('#options'+the_id).html('<button id="cancel'+the_id+'">Cancel</button>\n<button id="apply'+the_id+'">Apply</button>');
    var current_cost = $('.cost'+the_id).text();
    $('.cost'+the_id).html('\n<input type="text" class="newval'+the_id+'" value="'+current_cost+'">')
   }
   else if (the_type == 'cancel'){
    $('#options'+the_id).html('<button id="mutate'+the_id+'">Edit</button>');
   }
   else{
    var value = $(".newval"+the_id).val();
    $.ajax({
          url: "/update_cell",
          type: "get",
          data: {newval: value, rowid:the_id},
          success: function(response) {
            $('.cost'+the_id).html(value);
            $('#options'+the_id).html('<button id="mutate'+the_id+'">Edit</button>');
          },
          error: function(xhr) {
            //Do Something to handle error
          }
       });
     }
   });
 });
 </script>
</html>

然后,创建应用程序和路由:

import flask, sqlite3, collections
app = flask.Flask(__name__)

@app.route('/', methods=['GET'])
def home():
  dummy_data = [['hvVlNnAW', '$6.00', '--'], ['UqBzqLho', '$10.00', '--'], ['tuEdqldI', '$3.00', '--'], ['MIHLFWDS', '$1.00', '--'], ['rUnjpHiJ', '$8.00', '--'], ['lHVHxgZF', '$1.00', '--'], ['nFfaHkHj', '$3.00', '--'], ['rRWqXqVh', '$8.00', '--'], ['rdzCRozr', '$4.00', '--'], ['MGojGbtW', '$9.00', '--']]
  #substitute dummy_data with a database query
  product = collections.namedtuple('product', ['id', 'price', 'date', 'rowid'])
  return flask.render_template('tables.html', data = [product(*a, i) for i, a in enumerate(dummy_data, 1)])

@app.route('/update_cell')
def update_row():
   new_val = flask.request.args.get('newval')
   prod_id = int(flask.request.args.get('rowid[]'))
   #commit new_val to database
   return flask.jsonify({'success':True})

现在,在'/update_cell',你将获得新的价格值和产品行id,这将告诉你要更新的sqite行的价格。注意,在home获取的行id。enumerate对应用程序至关重要,因为它启用了jquery要知道要更新的表和sql行,请执行以下操作。

演示:

扫码关注云+社区

领取腾讯云代金券