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当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
Jquery 插件开发笔记整理
Jan 17 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
javascript的BOM汇总
Jul 16 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
layui内置模块layim发送图片添加加载动画的方法
Sep 23 Javascript
详解一些适用于Node.js的命名约定
Dec 08 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
咖啡的传说和历史
2021/03/03 新手入门
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
js form action动态修改方法
2008/11/04 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
python内存管理分析
2015/04/08 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
浅析使用Python搭建http服务器
2019/10/27 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
python 循环数据赋值实例
2019/12/02 Python
python装饰器使用实例详解
2019/12/14 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
python中有函数重载吗
2020/05/28 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
流行文化收藏品:Sideshow(DC漫画,星球大战,漫威)
2019/03/17 全球购物
总监职责范文
2013/11/09 职场文书
大学生新闻专业个人自我评价
2013/11/12 职场文书
资料员岗位职责
2013/11/17 职场文书
户外活动策划方案
2014/03/12 职场文书
工作年限证明范本
2015/06/15 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
原生JS实现飞机大战小游戏
2021/06/09 Javascript
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python