Question

我正在构建一个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来抓取已更改的单元格并识别它所在的行即可。

Answer 1

将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，该ID会告诉您要更新哪个sqlite行的价格。请注意，在home中，由enumerate获取的行ID对应用程序至关重要，因为它使jquery知道要更新的表和sqlite行。

演示：

如何使用Flask和JINJA2获取python从动态表中检索用户输入的数据

1 个答案: