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 validation插件表单验证的一个例子
Mar 03 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
node.js下when.js 的异步编程实践
Dec 03 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
解决js中的setInterval清空定时器不管用问题
Nov 17 Javascript
在Vue中使用mockjs代码实例
Nov 25 Vue.js
详解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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
php项目打包方法
2008/02/18 PHP
php限制文件下载速度的代码
2015/10/20 PHP
jquery 上下滚动广告
2009/06/17 Javascript
js 巧妙去除数组中的重复项
2010/01/25 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
Python数据操作方法封装类实例
2017/06/23 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
python实现顺序表的简单代码
2018/09/28 Python
Python configparser模块应用过程解析
2020/08/14 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
护士自荐信怎么写
2013/10/18 职场文书
人事主管的岗位职责
2013/11/16 职场文书
教育局长自荐信范文
2013/12/22 职场文书
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
宣传策划类求职信范文
2014/01/31 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
公司周年庆典标语
2014/10/07 职场文书
经典祝酒词大全
2015/08/12 职场文书
Java基础之this关键字的使用
2021/06/30 Java/Android