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 相关文章推荐
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
vue抽出组件并传值实例
Jul 31 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变量范围介绍
2012/10/15 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
js实现时钟定时器
2020/03/26 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
Python使用minidom读写xml的方法
2015/06/03 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
Tesserocr库的正确安装方式
2018/10/19 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
网页美工求职信
2014/02/15 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
员工年终考核评语
2014/12/31 职场文书
实习报告范文
2019/07/30 职场文书
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
python实现双向链表原理
2022/05/25 Python