基于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 : PyCharmfrom flask import Flask, render_template,request
import sqlite3app = 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>

作者：华为云特约供稿开发者鹏哥贼优秀