Bootstrap Table中的多选框删除功能


Posted in Javascript onJuly 15, 2018

先上代码,后面再进行详细解释:

//删除按钮事件
    $("#remove").on("click", function () {
      // $("#table").bootstrapTable('getSelections');为bootstrapTable自带的,所以说一定要使用bootstrapTable显示表格,#table:为table的id
      var rows = $("#table").bootstrapTable('getSelections');
      console.log(rows);
      if (rows.length == 0) {// rows 主要是为了判断是否选中,下面的else内容才是主要
        alert("请先选择要删除的记录!");
        return;
      } else {
        var arrays = new Array();// 声明一个数组
        $(rows).each(function () {// 通过获得别选中的来进行遍历
          arrays.push(this.cid);// cid为获得到的整条数据中的一列
        });
        var idcard = arrays.join(','); // 获得要删除的id
        console.log(idcard);
      }
    })

1. 效果图

Bootstrap Table中的多选框删除功能

2. 获得要删除的数据

Bootstrap Table中的多选框删除功能

接下来,再来看一下这一行代码的效果,把rows打印到控制台:

Bootstrap Table中的多选框删除功能

可以看到选中删除后,获得到的,就是一条完整重数据库中的查询内容,其中的cid就为每一条数据的id(主键)。

先选中多选框,当点击删除按钮时:在控制台接收到选中的cid,当然后台数据中一定要传递icd来,cid可以不用显示在表格中,

把idcard打印出来,

Bootstrap Table中的多选框删除功能

这时我们获得到的idcard 就是一个我们想要的到的数据,同时给他们中间以逗号隔开,传递到后台,执行多行删除语句:

3. 传递数据到后台执行删除sql

Bootstrap Table中的多选框删除功能

这时就可以成功获得要删除整条数据的id,当然你也可以获得其他列的数据,例如:

Bootstrap Table中的多选框删除功能

注意!

执行上面的功能,一点是要用bootstrapTable 显示的表格,要不然,没有效果,

总结

以上所述是小编给大家介绍的Bootstrap Table中的多选框删除功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
基于jQuery的ajax功能实现web service的json转化
Aug 29 Javascript
再谈JavaScript线程
Jul 10 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
详解JavaScript树结构
Jan 09 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 Javascript
vue动态改变背景图片demo分享
Sep 13 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
js实现动态时钟
Mar 12 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 #Javascript
简述JS控制台的使用
Jul 15 #Javascript
简述JS浏览器的三种弹窗
Jul 15 #Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 #Javascript
js+SVG实现动态时钟效果
Jul 14 #Javascript
vue实现通讯录功能
Jul 14 #Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 #Javascript
You might like
php Try Catch异常测试
2009/03/01 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
强制设为首页代码
2006/06/19 Javascript
javascript 短路法代码精简
2009/08/20 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
Python计算不规则图形面积算法实现解析
2019/11/22 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
python实现按日期归档文件
2021/01/30 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
专科应届生求职信
2013/11/24 职场文书
绩效专员岗位职责
2013/12/02 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
会计电算化毕业生自荐信
2014/03/03 职场文书
出国留学经济担保书
2014/04/01 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
工作失职检讨书范文
2015/05/05 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python