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 学习笔记 选择器之三
Jul 23 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
微信小程序switch组件使用详解
Jan 31 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 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 win下Socket方式发邮件类
2009/08/21 PHP
php实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
PHP7 其他修改
2021/03/09 PHP
jquery 的 $("#id").html() 无内容的解决方法
2010/06/07 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
python的几种开发工具介绍
2007/03/07 Python
Python中http请求方法库汇总
2016/01/06 Python
Python数据结构之翻转链表
2017/02/25 Python
Python 登录网站详解及实例
2017/04/11 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
使用Python实现分别输出每个数组
2019/12/06 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
婚前保证书
2014/04/29 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
大专护理专业自荐信
2015/03/25 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
高二数学教学反思
2016/02/18 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android