时间戳

首页 > 解决方案 > 使用 Flask 检索数据并填充网页？

python - 使用 Flask 检索数据并填充网页？

问题描述

我正在尝试从数据库中检索数据并div在我的网页中填充标签。

一些样本数据是，

TEST_ID COUNT   ALIAS       CHECK_TYPE      ITEMS
1       1       testingQA   Testing & QA    Something1
1       2       testingQA   Testing & QA    Something2
1       3       development R & D           Something3
2       4       marketing   Marketing       Something4
2       5       marketing   Marketing       Something5
3       6       marketing   Marketing       Something6

我正在尝试创建一个手风琴菜单。我显然不想对其进行硬编码，而是将其自动化。到目前为止，我有：

//Button name should be 'testingQA'
<button name='' type='button' class='drop'>{{ALIAS}}</button>
<div class='panel'>
{% for row in data 
    item_id = 'item' + {{COUNT}}
    sel_id = 'op' + {{COUNT}} %}
        <br>
            <div>
                <span name='{{item_id'}}>{{ITEMS}}</span>
                <select name='{{sel_id}}'>
                    <option value=''>--Select one--</option>
                    <option value='Yes'>Yes</option>
                    <option value='No'>No</option>
                    <option value='NA'>N/A</option>
                </select>
            </div>
        <hr>
    </div>
{% endfor %}

//Button name should be 'development'
<button name='' type='button' class='drop'>{{ALIAS}}</button>
<div class='panel'>
{% for row in data 
    item_id = 'item' + {{COUNT}}
    sel_id = 'op' + {{COUNT}} %}
        <br>
            <div>
                <span name='{{item_id}}'>{{ITEMS}}</span>
                <select name='{{sel_id}}'>
                    <option value=''>--Select one--</option>
                    <option value='Yes'>Yes</option>
                    <option value='No'>No</option>
                    <option value='NA'>N/A</option>
                </select>
            </div>
        <hr>
    </div>
{% endfor %}

理想情况下，这应该画出这个 HTML：

<button name='testingQA' type='button' class='drop'>Testing & QA</button>
<div class='panel'>
    <div>
        <br>
        <span name='item1'>Something1</span>
        <select name='op1' class='menu' style='float:right'>
            <option value=''>--Select one--</option>
            <option value='Yes'>Yes</option>
            <option value='No'>No</option>
            <option value='NA'>N/A</option>
        </select>
    </div>
    <div>
        <br>
        <hr>
        <span name='item2'>Something2</span>
        <select name='op2' class='menu' style='float:right'>
            <option value=''>--Select one--</option>
            <option value='Yes'>Yes</option>
            <option value='No'>No</option>
            <option value='NA'>N/A</option>
        </select>
    </div>
    <br>
</div>
<button name='development' type='button' class='drop'>R & D</button>
<div class='panel'>
    <div>
        <br>
        <span name='item3'>Something3</span>
        <select name='op3' class='menu' style='float:right'>
            <option value=''>--Select one--</option>
            <option value='Yes'>Yes</option>
            <option value='No'>No</option>
            <option value='NA'>N/A</option>
        </select>
    </div>

我如何才能自动实现这一目标？

标签： pythonhtmlflask

解决方案

您可以使用itertools.groupby：

import itertools 
import sqlite3, collections
class Data:
  def __init__(self, _filename='tablename.db', get_columns = ['TEST_ID COUNT', 'ALIAS', 'CHECK_TYPE', 'ITEMS']):
     _, *_data = list(sqlite3.connect(_filename).cursor().execute('SELECT {} FROM tablename'.format(', '.join(get_columns))))
     self._grouped_result = [[a, list(b)] for a, b in itertools.groupby(sorted(_data, key=lambda x:x[2]), key=lambda x:x[2])]
  def __iter__(self):
     dropdown = collections.namedtuple('dropdown', ['id', 'count', 'type', 'items'])
     alias = collections.namedtuple('alias', ['name', 'data'])
     for a, b in self._grouped_result:
        yield alias(a, [dropdown(*(i[:2]+i[3:])) for i in b])

然后，在您的应用中：

@app.route('/show_data', methods=['GET', 'POST'])
def show_data():
  return flask.render_template('show_data.html', data = Data())

最后，创建模板show_data.html：

<html>
 <body>
   {%for alias in data%}
     <button name='{{alias.name}}' type='button' class='drop'>{{alias.data[0].type}}</button>
       <div class='panel'>
      {%for _item in alias.data%} 
        <div>
         <br>
         <span name='item{{_item.count}}'>{{_item.items}}</span>
          <select name='op{{_item.id}}' class='menu' style='float:right'>
            <option value=''>--Select one--</option>
            <option value='Yes'>Yes</option>
            <option value='No'>No</option>
            <option value='NA'>N/A</option>
          </select>
        </div>
      {%endfor%}
       </div>
     </div>
   {%endfor%}
 </body> 
</html>

输出： 

 <button name="development" type="button" class="drop">R &amp; D</button>
   <div class="panel">

    <div>
     <br>
     <span name="item3">Something3</span>
      <select name="op1" class="menu" style="float:right">
        <option value="">--Select one--</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
        <option value="NA">N/A</option>
      </select>
    </div>

   </div>


 <button name="marketing" type="button" class="drop">Marketing</button>
   <div class="panel">

    <div>
     <br>
     <span name="item4">Something4</span>
      <select name="op2" class="menu" style="float:right">
        <option value="">--Select one--</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
        <option value="NA">N/A</option>
      </select>
    </div>

    <div>
     <br>
     <span name="item5">Something5</span>
      <select name="op2" class="menu" style="float:right">
        <option value="">--Select one--</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
        <option value="NA">N/A</option>
      </select>
    </div>

    <div>
     <br>
     <span name="item6">Something6</span>
      <select name="op3" class="menu" style="float:right">
        <option value="">--Select one--</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
        <option value="NA">N/A</option>
      </select>
    </div>

   </div>


 <button name="testingQA" type="button" class="drop">Testing &amp; QA</button>
   <div class="panel">

    <div>
     <br>
     <span name="item1">Something1</span>
      <select name="op1" class="menu" style="float:right">
        <option value="">--Select one--</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
        <option value="NA">N/A</option>
      </select>
    </div>

    <div>
     <br>
     <span name="item2">Something2</span>
      <select name="op1" class="menu" style="float:right">
        <option value="">--Select one--</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
        <option value="NA">N/A</option>
      </select>
    </div>

   </div>

</body></html>

推荐阅读