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 操作select相关方法函数
Dec 06 Javascript
纯js实现背景图片切换效果代码
Nov 14 Javascript
关于js获取radio和select的属性并控制的代码
May 12 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 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
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
PHP nl2br函数 将换行字符转成 <br>
2009/08/21 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
php中session退出登陆问题
2014/02/27 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
php经典趣味算法实例代码
2020/01/21 PHP
input 输入框内的输入事件详细分析
2010/03/17 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
详解vue组件基础
2018/05/04 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
sublime python3 输入换行不结束的方法
2018/04/19 Python
Python 切分数组实例解析
2019/11/07 Python
基于python实现文件加密功能
2020/01/06 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
团日活动总结范文
2014/04/25 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
JS 基本概念详细介绍
2021/10/16 Javascript
python实现双链表
2022/05/25 Python