django实战（三）--删除和批量删除
上一节我们完成了带分页的模糊查询，本节我们继续删除操作。
同样的，先给出各个模块的代码（上一节的就不在贴出了）：
urls.py
path('curd/delete/',views.curd_delete,name='curddelete'),
path('curd/deleteall/',views.curd_delete_all,name='curddeleteall')
views.py
def curd_delete(request):
#从前端(html)获取did数据
did=request.GET.get('did')
if did:
#找到该数据，将其删除
Book.objects.get(id=did).delete()
#删除成功，返回显示页
return redirect('/curd/') def curd_delete_all(request):
#先判断发过来的是否是post请求
if request.method=="POST":
#得到要删除的id列表
values=request.POST.getlist('vals')
for i in values:
#如果id不为空，获取该字段，并将其删除，我们只删除book表，publisher表不变
if i != '':
book_obj = Book.objects.get(id=i)
book_obj.delete()
#删除成功返回显示页
return redirect('/curd/')
curd.html
使用js前记得导入相应的文件，这里我使用的是百度源
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
<script src="/static/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="/static/js/curd.js"></script>
<style>
.myul li{
list-style: none;
margin-right: 4px;
margin-bottom: 4px;
float: left;
}
</style>
<title>Document</title>
</head>
<body>
<div style="width: 100%;">
<h3 align="center">书籍列表</h3>
<table class="table" style="table-layout: fixed;">
<div>
<div style="float: left">
<ul class='myul'>
<li><a onclick="getValues()" href="" class="btn btn-danger input-sm">批量删除</a></li>
<li><a href="" class="btn btn-info input-sm">添加</a></li>
</ul>
</div>
<div style="float: right">
<form method="get" action="" >
<input type="text" name="query"/>
<input type="submit" value="查询" name="submit" class="btn btn-primary input-sm"/>
</form>
</div>
</div>
<tr>
<th width=""><input type="checkbox" id="checkAll" onclick="checkAll()"></th>
<th>id</th>
<th>title</th>
<th>publisher</th>
<th>introduce</th>
<th>操作</th>
</tr>
<tr>
{% for item in page%}
<td><input type="checkbox" onclick="checkOne()" value="{{item.id}}" name="item"></td>
<td>{{item.id}}</td>
<td>{{item.title}}</td>
<td>{{item.publisher}}</td>
<td>{{item.introduce}}</td>
<td><a onclick="return confirm('确认要删除？')" class="btn btn-danger input-sm"
href="/curd/delete/?did={{item.id}}">删除</a></td>
</tr>
{% endfor %}
</table>
</div>
<!--底部分页按钮显示-->
<div style="position: absolute;top: 30 %;left: 44%">
<nav aria-label="Page navigation">
<div class="pagination">
<ul class="pagination" >
{% if page.has_previous %}
<li><a href="/curd/{{page.previous_page_number}}?query={{query}}" aria-label="Previous">
<span aria-hidden="true">«</span></a></li>
{% endif %} {% for num in page.paginator.page_range%}
{%if pindex == page.number%}
<li><a href="">{{ num }}</a></li>
{%else%}
<li><a href="/curd/{{num}}?query={{query}}">{{ num }}</a></li>
{%endif%}
{% endfor %} {% if page.has_next %}
<li><a href="{% url 'person:curdindex' page.next_page_number%}?query={{query}}" aria-label="Next">
<span aria-hidden="true">»</span></a></li>
{% endif %}
</ul>
</div>
</nav>
</div>
</body>
</html>
curd.js
function checkAll() {
var all = document.getElementById("checkAll");
if (all.checked == true) {
var ones = document.getElementsByName("item");
for (var i = 0; i <= ones.length; i++) {
ones[i].checked = true;
}
} else {
var ones = document.getElementsByName("item");
for (var i = 0; i <= ones.length; i++) {
ones[i].checked = false;
}
}
}
function checkOne() {
var one=document.getElementsByName("item");
one.checked=true;
}
function getValues() {
var valArr=[];
var ones=document.getElementsByName('item');
for (var i=0;i<ones.length;i++){
if (ones[i].checked==true){
valArr[i]=ones[i].value
}
}
if (valArr.length!=0){
// var vals = valArr.join(',');
// alert(valArr);
$.ajax({
#地址一定要正确
url:"deleteall/",
#全部大写
type:'POST',
contenType:'application/json',
#不加这个，ajax会将结果后边加个[]，例如{'vals[]':[4,6,8]}
traditional:true,
#不加这个，会报服务器终止了一个在运行的程序
async: false,
data:{
'vals':valArr
},
success:function(){
alert("删除成功");
},
error:function(){
alert("删除失败");
}
})
}
else {
var error_m="请选择数据";
alert(error_m);
}
}
最后启动服务器：
我们跳转到最后一页，
点击删除：
点击确定。这一条数据就被删除了。总共就只有三页数据了，我们仍然跳转到最后一页：选择21,25，点击批量删除：（也可以点击id前面的多选框，实现全选）
具体流程：点击多选框--调用onclick中的函数（位于js）--得到要删除的id列表--将数据封装并通过ajax请求传给后端--后端接受请求并解析数据，对每一个id所在数据进行删除--删除成功返回显示界面。
删除成功后：
技术总结：一步一步的进行实现，首先是单条记录的删除，这还挺简单，将每条记录的id传给url地址，然后后台利用get请求获取即可。批量删除就比较麻烦了，从多选框的加入-->(全选和全不选-->部分选取（这两部分用js即可）)-->如何将js中的值传给后端(利用ajax发送请求(期间也遇到不少问题))-->后端得到值并进行删除-->返回给前端。一步一步的走过来，总会遇到不少坑（我都会慢慢总结在另一篇博客《django勘误中》）。总而言之，遇到问题不要慌张，多百度，查找解决问题的方法，另外，有的问题或者方法不可能和自己的完全一样，要学会变通。
从html-css-js-ajax-django，学得越多，越是理解知识的界限是无穷的。
下一节：对数据进行编辑。
django实战（三）--删除和批量删除的更多相关文章
- 使用thinkPHP框架实现删除和批量删除一例【原创】
本文为作者原创,转载请注明原作者及转载地址. 上一篇讲了如何用thinkPHP框架实现数据的添加,那这一篇就讲一下如何用thinkPHP实现数据的删除和批量删除吧. 预期效果图: 原谅博主对照片的处理 ...
- ajax 显示，删除，批量删除，修改反填功能实现
1.页面代码 <body> <h1>显示所有员工信息</h1> <input id="Button1" type="button ...
- bootstrapTable--4.删除和批量删除
http://blog.csdn.net/qq_26553781/article/details/78058389 ------------------------------------------ ...
- oss文件上传删除（批量删除）处理
博主用的是阿里云的oss 首先先在阿里云下载安装sdk,相关的sdk下载请自行到阿里云下载 文档地址 https://help.aliyun.com/document_detail/85580.h ...
- jdbc-批量插入、批量删除、批量更新
一.JDBC的批量插入 JDBC批量插入主要用于数据导入和日志记录因为日志一般都是先写在文件下的等. 我用Mysql5.1.5的JDBC driver 分别对三种比较常用的方法做了测试 方法 ...
- mteclipse中运行的分页，搜索，列表批量删除的界面，它的源代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(18)-过滤器的使用和批量删除数据(伪删除和直接删除)
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(18)-过滤器的使用和批量删除数据(伪删除和直接删除) ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) ...
- 5月21 汽车查询及批量删除----php方法
---恢复内容开始--- 这个与之前不同是在php中实现了页面的查询,引用AJAX实现批量删除及弹窗的显示 作业要求: 页面显示数据代码: <!DOCTYPE html PUBLIC " ...
- sql server中的大数据的批量操作（批量插入，批量删除）
首先我们建立一个测试用员工表 ---创建一个测试的员工表--- create table Employee( EmployeeNo int primary key, --员工编号 EmployeeNa ...
随机推荐
- 单独KafkaConsumer实例and多worker线程。
1.单独KafkaConsumer实例and多worker线程.将获取的消息和消息的处理解耦,将消息的处理放入单独的工作者线程中,即工作线程中,同时维护一个或者若各干consumer实例执行消息获取任 ...
- Winform中对DevExpress的RadopGroup的Description、Value、Tag、Text的理解与使用
场景 Winform中实现读取xml配置文件并动态配置ZedGraph的RadioGroup的选项: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article ...
- 如何优雅地使用腾讯云COS-.NET篇
如何优雅地使用腾讯云COS-.NET篇 代码下载地址 https://github.com/whuanle/txypx20190809 前提 创建子账号 打开 https://console.clou ...
- python实现罗汉塔破解方法
主要使用函数的递归方法,考虑过程如下:n,a,b,c(n代表罗汉塔块数,a,b,c代表三块柱子)若n=1时,只需从a>>>c若n>1时,需要把上面n-1块从a移动到b,底下1块 ...
- EntityUtils.toString(entity)处理字符集问题解决
爬取51Job和猎聘网的信息,想处理字符集问题(51job为gbk,猎聘为utf-8), 找到两个网站字符集信息都在同一标签下 就想先把网页保存成String,解析一遍获取字符集,然后将网页转换成对应 ...
- Linux磁盘系统——管理磁盘的命令
Linux磁盘系统——管理磁盘的命令 摘要:本文主要学习了Linux系统中管理磁盘的命令,包括查看磁盘使用情况.磁盘挂载相关.磁盘分区相关.磁盘格式化等操作. df命令 df命令用于显示Linux系统 ...
- 初识Android App自动化测试框架--Unittest
1.为什么需要使用框架实现自动化测试 作为测试工程师,可能在代码能力上相比开发工程师要弱一点,所以我们在写脚本的时候就会相对容易的碰到更多的问题,如果有一个成熟的框架供给我们使用的话,可以帮助我们避免 ...
- a标使用window.open()方法
<a href="javascript:window.open('../Left_B/L_Gong_gao_Index', 'TencentLogin', 'width=1920px, ...
- Jmeter参数化、检查点、集合点教程
在使用Jemeter做压力测试的时候,往往需要参数化用户名,密码以到达到多用户使用不同的用户名密码登录的目的,这个时候我们就可以使用参数化登录. 一.badboy录制需要的脚本.也可以用fiddler ...
- 个人项目wc（Java）
个人项目(Java) 一丶Github地址:https://github.com/SAH2019/S ...