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 相关文章推荐
js操作iframe的一些方法介绍
Jun 25 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
聊聊JS ES6中的解构
Apr 29 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设计模式小结
2013/02/15 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
js自定义事件代码说明
2011/01/31 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
python实现哈希表
2014/02/07 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
新春联欢会主持词
2014/03/24 职场文书
小学生操行评语
2014/04/22 职场文书
婚前保证书
2014/04/29 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技