基於Flask開發網站--利用複選框進行批量操作

由於近期有同事在工作中向我求助網頁可視化怎麼做，對於從來沒有學過html/vue/javascript等框架開發的我來說，只能說我試試吧。所以針對他的訴求“通過複選框進行批量操作”，我自己就百度學習。然後寫點東西記錄下，或者對以後的同學有所幫助。

效果展示

知識串講

由於之前我寫過基於Flask如何實現表格管理平臺，包括Flask框架簡單介紹、sqlite3數據庫如何操作、html如何編寫、jquery如何編碼事件。因此如果有需要，可以參考之前那篇博客：

【Python成長之路】從零做網站開發 -- 基於Flask和JQuery，實現表格管理平臺

這次寫利用複選框實現批量操作過程中，主要有以下幾個步驟：

（1）如何添加複選框

（2）如何遍歷每個複選框勾選狀態

（3）如何將勾選狀態傳遞給後臺

（4）後臺進行數據庫刪除動作

下面我就對每個步驟簡單下如何實現

（1）如何添加複選框

{% for i in content %}
  <tr>
    {% for j in i %}
      <td>{{ j }}</td>
    {% endfor %}
    <td><input type="button" id="edit" value="編輯"></td>
    <td><input type="submit" value="提交"></td>
    <td><input type="checkbox" name="ck"></td>
  </tr>

由於我設計是針對每一行數據後面添加複選框，因此我是遍歷每一行數據，並在table表裏添加。這一步在參考“編輯”“提交”按鈕的實現後，是比較容易理解的。

（2）如何遍歷每個複選框勾選狀態

這裏我是通過“批量刪除”按鈕綁定獲取每個複選框勾選狀態的事件。其中複選框狀態是通過checkbox.checked狀態來判斷，true表示勾選，false表示未勾選。

另外，這裏由於我對html獲取元素的方式不熟悉，一開始是通過var node = document.getElementsById("ck")來獲取所有複選框，結果怎麼都不對。最後發現如果要獲取多個元素最好通過getElementsByName方法，如果是獲取單個元素是通過getElementById方法。

var node = document.getElementsByName("ck");
var tab = document.getElementById("test");
var res = new Array()
for (var i = 0; i< node.length; i++){
    if (node[i].checked){
        res[i] = tab.rows[i+1].cells[1].innerHTML
        }
    else{
        res[i] = 0
    }
}

（3）如何將勾選狀態傳遞給後臺

這裏也阻塞了我挺長時間的。我一直把ajax的data數據像Python一樣進行理解，即:

var data = {
    "ip":res   # res即要刪除的IP列表
};

在Python裏像這樣的字典寫法是沒問題。最後找了度娘才知道要轉成json字符串的方式：

var data = {
    "ip":JSON.stringify(res)
};

對應在後端接受data後需要進行通過eval方法將json格式轉化成list，即

ip_str = request.args.get("ip")
ip_list = eval(ip_str)

（4）後臺進行數據庫刪除動作

這塊內容因爲是python後端處理，所以相對就熟悉了，直接上代碼：

@app.route('/delete')
def ck_test():
    ip_str = request.args.get("ip")
    ip_list = eval(ip_str)
    print(ip_list)
    for ip in ip_list:
        if ip:
            sql = "delete from material_table where 網絡IP='{}'".format(ip)
            cur = con.cursor()
            cur.execute(sql)
            con.commit()
    return "刪除數據成功！"

示例代碼

由於代碼內容不對，我直接把python和html代碼附在下方。

Python代碼：

# coding=utf-8
# @Auther : "鵬哥賊優秀"
# @Date : 2020/5/29
# @Software : PyCharm

from flask import Flask, render_template,request
import sqlite3

app = Flask(__name__)
con = sqlite3.connect('material.db', check_same_thread=False)

@app.route('/')
def Material_Mangement():
    # 獲取數據庫material_table表的內容
    cur = con.cursor()
    sql = 'select * from {0}'.format("material_table")
    cur.execute(sql)
    content = cur.fetchall()
    # 獲取數據庫表的表頭
    labels = [tuple[0] for tuple in cur.description]
    return render_template('test.html', content=content, labels=labels)



@app.route('/delete')
def ck_test():
    ip_str = request.args.get("ip")
    ip_list = eval(ip_str)
    print(ip_list)
    for ip in ip_list:
        if ip:
            sql = "delete from material_table where 網絡IP='{}'".format(ip)
            cur = con.cursor()
            cur.execute(sql)
            con.commit()
    return "刪除數據成功！"


@app.route('/edit', methods=['get'])
def edit():
    label = ['ID', '網絡IP', '地址', '責任人', '聯繫方式']
    content = [request.args.get(i) for i in label]
    print(content)
    sql = 'update {0} set {1}="{6}",{2}="{7}",{3}="{8}",{4}="{9}" where {5}={10}'.format('material_table',
          label[1], label[2], label[3],label[4],label[0],content[1],content[2],content[3],content[4],content[0])
    cur = con.cursor()
    cur.execute(sql)
    con.commit()
    return "數據寫入成功！"

if __name__ == '__main__':
    app.run(host="11.240.65.176",debug=True)

test.html代碼：

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>表格管理平臺</title>
</head>
<body>
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3>表格管理平臺</h3>
                <td><input type="button" value="批量刪除" id="ck_test"></td>
            </div>
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered table-hover" id="test">
                        <thead>
                        <tr>
                            {% for i in labels %}
                                <td>{{ i }}</td>
                            {% endfor %}
                        </tr>
                        </thead>
                        <tbody>
                        {% for i in content %}
                            <tr>
                                {% for j in i %}
                                    <td>{{ j }}</td>
                                {% endfor %}
                                <td><input type="button" id="edit" value="編輯"></td>
                                <td><input type="submit" value="提交"></td>
                                <td><input type="checkbox" name="ck"></td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
    (function(){
            <!--定義屬性是button的按鈕在點擊後，產生下面的function功能-->
      $('input[id="edit"]').on('click', function(){
            <!--獲取當前事件，並進行當前按鈕的狀態，如果是編輯狀態，就進行將每個單元格設置成可輸入狀態-->
        var $this = $(this),
          edit_status = $this.attr('edit_status'),
          status_value = edit_status && 1 == edit_status ? 0 : 1,
          $td_arr = $this.parent().prevAll('td');
        $this.val(1 == status_value ? '完成' : '編輯').attr('edit_status', status_value);
            <!--如果單元格是可編輯狀態，獲取每列元素的值，並在最後html表格上進行展示-->
        $.each($td_arr, function(){
          var $td = $(this);
          if(1 == status_value) {
            $td.html('<input type="text" value="'+$td.html()+'">');
            <!--如果按鈕狀態是完成狀態，直接展示單元內的值-->
          } else if(0 == status_value){
            $td.html($td.find('input[type=text]').val());
          }
        });
      });
    })();
</script>
<script>
    (function(){
            <!--定義屬性是submit的按鈕在點擊後，產生下面的function功能-->
      $('input[type="submit"]').on('click', function(){
                <!--獲取當前行的id -->
                var td = event.srcElement.parentElement;
                var rownum = td.parentElement.rowIndex;
                alert(td.innerHTML)
                <!--獲取html表格元素 -->
                var tab = document.getElementById("test");
                <!--將每個單元格元素進行取值，並以字典形式傳給後臺 -->
                var data = {
                    "ID":tab.rows[rownum].cells[0].innerHTML,
                    "網絡IP":tab.rows[rownum].cells[1].innerHTML,
                    "地址":tab.rows[rownum].cells[2].innerHTML,
                    "責任人":tab.rows[rownum].cells[3].innerHTML,
                    "聯繫方式":tab.rows[rownum].cells[4].innerHTML,
                };
                alert("提交成功！")
                $.ajax({
                    type: "get",
                    url: "/edit",
                    data: data,
                    dataType: "json"
                    });
        });
        })();
</script>


<script>
    (function(){
      $('input[id="ck_test"]').on('click', function(){
                var node = document.getElementsByName("ck");
                var tab = document.getElementById("test");
                var res = new Array()
                for (var i = 0; i< node.length; i++){
                    if (node[i].checked){
                        res[i] = tab.rows[i+1].cells[1].innerHTML
                        }
                    else{
                        res[i] = 0
                    }
                }
                var data = {
                    "ip":JSON.stringify(res)
                };
                alert("刪除成功，請刷新界面！")
                $.ajax({
                    type: "get",
                    url: "/delete",
                    data: data,
                    dataType: "json"
                    });
        });
        })();
</script>


</body>
</html>

作者：華爲雲特約供稿開發者鵬哥賊優秀

基於Flask開發網站--利用複選框進行批量操作

效果展示

知識串講

示例代碼

挑戰程序設計競賽 2.3章習題 poj 3046 Ant Counting

Shell/Python中的用戶名獲取

Serverless時代已來，華爲雲的思考、探索和實踐

革命性的容器集羣？嚯，好大的口氣

何以穩居中國公有云市場第二？華爲雲新掀起的這波技術浪湧值得關注

華爲雲AAAI 2021論文：一站式AI平臺ModelArts聯邦學習服務技術揭祕

2020年度十大創新先行者創新案例成果展示-中圖雲創

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結