前言

批量删除bootstrap-table数据，需先弹出确认删除框，提醒用户是否确定删除。
点确定按钮的时候需获取到table表格中选中的数据id数据。

确认删除

期望实现的效果，选中一行或多行可以删掉单个或者批量删除

点删除按钮后可以弹一个模态框，让用户点确定和取消按钮

<div id="toolbar" class="btn-group"><button id="btn_add" type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增</button><button id="btn_edit" type="button" class="btn btn-default"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改</button><button id="btn_delete" type="button" class="btn btn-default"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</button></div>//删除按钮模态框<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="delModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title" id="delModalLabel">操作提示:</h4></div><div class="modal-body"><h5 id="delBody">确定要删除选中的数据？</h5></div><div class="modal-footer"><button type="button" class="btn btn-primary" id="deleteIds">确定删除</button><button type="button" class="btn btn-default" data-dismiss="modal">取消</button></div></div><!-- /.modal-content --></div><!-- /.modal --></div>

页面显示效果

删除按钮事件

写一个javascript绑定删除按钮事件

<script>
//删除表格数据
$("#btn_delete").click(function(){var rows = $("#table").bootstrapTable('getSelections');alert(JSON.stringify(rows));if (rows.length == 0 ) {alert("请至少选中一行删除!");}else {//显示模态框$("#delModal").modal('show');}
});
</script>

弹出的模态框点确定按钮，先得到勾选的表格里面id，通过ajax发一个delete请求给到后端


//作者-上海悠悠 QQ交流群:717225969
//blog地址 https://www.cnblogs.com/yoyoketang/
<script>
// 点确定按钮发delete请求
$("#deleteIds").click(function() {var rows = $("#table").bootstrapTable('getSelections');
{#    alert(JSON.stringify(rows));#}var ids = [];// 循环筛选出idfor (var i = 0; i < rows.length; i++) { //循环筛选出idids.push(rows[i].id);}// 添加后查看ids
{#    alert(JSON.stringify(ids));#}// 发delete请求$.ajax({cache: false,url: "/teacher/info", //urltype: "DELETE",  //方法类型contentType:"application/json",//设置请求参数类型为json字符串dataType: "json",  //预期服务器返回的数据类型data: JSON.stringify({ids: ids}),success: function (result) {//隐藏模态框$("#delModal").modal('hide');if (result.msg == "success"){// 此处可以显示一个toastr消息alert('删除成功！')}else {alert("删除失败")}},error: function () {$("#delModal").modal('hide');// 此处可以显示一个toastr消息console.log('服务器异常')}});
})
</script>

ajax发delete请求需注意

type方法类型为DELETE
设置请求参数类型为json类型 contentType:"application/json"
data请求发出去的参数必须是json类型，通过JSON.stringify把javascript对象转json

接口请求实现效果

请求参数：{“ids”: [1, 2, 3}

接口发出去了，后端写个视图函数处理拿到的ids参数就可以执行删除sql了

python测试开发django-124.bootstrap点删除按钮弹确认删除相关推荐

python测试开发django -141.Bootstrap 面板(Panels)
前言面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向元素添加 class .panel 和 class .panel-default 即可基础面板不带标题的基本面板 ...
python测试开发django（8）--django连接mysql
前言 Django对各种数据库提供了很好的支持,包括:PostgreSQL.MySQL.SQLite.Oracle.本篇以mysql为例简单介绍django连接mysql进行数据操作 Django连m ...
python测试开发django（9）--模型models详解
前言 Django模型是与数据库相关的,与数据库相关的代码一般写在models.py中,Django支持sqlite3,MySQL,PostgreSQL等数据库只需要在settings.py中配置即 ...
python测试开发django（20）--admin首页和title修改
前言 django的admin首页默认显示的"Django管理",title显示的是"Django站点管理员",这里的文案内容可以修改成自己项目的后台页面内容 ...
python测试开发自学教程-2019第一期《python测试开发》课程，10月13号开学
2019第一期<python测试开发>课程,10月13号开学! 主讲老师:上海-悠悠上课方式:QQ群视频在线教学,方便交流本期上课时间:10月13号-12月8号,每周六.周日晚上20: ...
可爱的python测试开发库及项目(python测试开发工具库汇总)
转载: https://www.jianshu.com/p/ea6f7fb69501 可爱的python测试开发库及项目(python测试开发工具库汇总) github地址相关书籍下载 Python ...
可爱的python测试开发库(python测试开发工具库汇总)
2019独角兽企业重金招聘Python工程师标准>>> 欢迎转载,转载请注明来源: github地址谢谢点赞本文地址 Python测试开发库参考资料 https://githu ...
Python测试开发django5.urls.py参数name与a标签的引用
上一篇,我们学习了Python测试开发django5.templates模板变量传参如果我们有2个页面home.html和demo.html,两个页面是独立的没有关系的,现在需要从home.html ...
Python测试开发django5.templates模板变量传参
上一篇,我们学习了Python测试开发django4.templates模板配置 templates模板中html文件是一个静态页面,写四的,如果有时我们想动态的传入一些不同的参数,想实现在一个固定的 ...

python测试开发django-124.bootstrap点删除按钮弹确认删除

前言

确认删除

删除按钮事件

python测试开发django-124.bootstrap点删除按钮弹确认删除相关推荐

最新文章

热门文章