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 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
用js生产批量批处理执行命令
Jul 28 Javascript
五段实用的js高级技巧
Dec 20 Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 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二分查找二种实现示例
2014/03/12 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
Javascript 构造函数 实例分析
2008/11/26 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中获取对象信息的方法
2015/04/27 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
Python 函数返回值的示例代码
2019/03/11 Python
django用户登录验证的完整示例代码
2019/07/21 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
个人教师自我评价范文
2013/12/02 职场文书
幼儿园教师工作制度
2014/01/22 职场文书
留学经费担保书
2014/05/12 职场文书
师德师风自我评价范文
2014/09/11 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
python中对列表的删除和添加方法详解
2022/02/24 Python
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android