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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
javascript椭圆旋转相册实现代码
Jan 16 Javascript
JS数组的赋值介绍
Mar 10 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
微信小程序实现左侧滑栏过程解析
Aug 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
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
javascript 全角转换实现代码
2009/07/17 Javascript
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
bootstrap中的导航条实例代码详解
2019/05/20 Javascript
详解Node.js异步处理的各种写法
2019/06/09 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
Python判断有效的数独算法示例
2019/02/23 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
python虚拟环境完美部署教程
2019/08/06 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
中国电视购物:快乐购
2017/02/04 全球购物
公司晚会主持词
2014/03/22 职场文书
企业形象策划方案
2014/05/29 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js