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中对数组进行操作的方法
Apr 16 Javascript
javascript初学者常用技巧
Sep 02 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
vue实现文件上传功能
Aug 13 Javascript
Vue.js 事件修饰符的使用教程
Nov 01 Javascript
vue实现分页加载效果
Dec 24 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 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
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
splice slice区别
2006/10/09 Javascript
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
javascript中this的四种用法
2015/05/11 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
深入理解vue中的$set
2017/06/01 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
python executemany的使用及注意事项
2017/03/13 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
基于python实现查询ip地址来源
2020/06/02 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
遥感技术与仪器求职信
2014/02/22 职场文书
社会学专业求职信
2014/02/24 职场文书
培训班通知
2015/04/25 职场文书
活动总结模板大全
2015/05/11 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL