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 相关文章推荐
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
Bootstrap表单布局
Jul 19 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
js中的闭包学习心得
Feb 06 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
JavaScript 对象模型 执行模型
2010/10/15 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
在Python中移动目录结构的方法
2016/01/31 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
Django中create和save方法的不同
2019/08/13 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
Python中的Cookie模块如何使用
2020/06/04 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
python各种excel写入方式的速度对比
2020/11/10 Python
函授毕业生的自我鉴定
2013/11/26 职场文书
测绘工程专业个人自我评价
2013/12/01 职场文书
认识深刻的检讨书
2014/02/16 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
医院节能减排方案
2014/06/13 职场文书
国庆节标语大全
2014/10/08 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server