哈嘍大家好,我是鵬哥。
今天我想寫的內容是 —— 基於Flask實現網頁表格的批量刪除。
~~~上課鈴~~~
LiberatorsEpic Score - Vengeance - ES033
1
寫在前面
由於近期有同事在工作中向我求助網頁可視化怎麼做,對於從來沒有學過html/vue/javascript等框架開發的我來說,只能說我試試吧。所以針對他的訴求“通過複選框進行批量操作”,我自己就百度學習。然後寫點東西記錄下,或者對以後的同學有所幫助。
2
效果展示
3
知識串講(敲黑板啦)
由於之前我寫過 基於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 "刪除數據成功!"
4
示例代碼
由於代碼內容不對,我直接把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>
5
總結
內容不多,但也是自己從零開始學習整理的知識點。
~~~下課鈴~~~
【往期熱門文章】:
【Python成長之路】10行代碼教你免費觀看無廣告版的《慶餘年》騰訊視頻
【Python成長之路】如何用python開發自己的iphone應用程序,並添加至siri指令
【Python成長之路】從 零做網站開發 -- 基於Flask和JQuery,實現表格管理平臺
點擊下方詩句,可以留言互動喔
【關注“鵬哥賊優秀”公衆號,回覆“python學習材料”,將會有python基礎學習、機器學習、數據挖掘、高級編程教程等100G視頻資料,及100+份python相關電子書免費贈送!】
掃描二維碼
與鵬哥一起
學python吧!