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的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
js中new一个对象的过程
Feb 20 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
前端实现滑动按钮AJAX与后端交互的示例代码
Feb 24 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新手上路(三)
2006/10/09 PHP
Zend的MVC机制使用分析(一)
2013/05/02 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
c++生成dll使用python调用dll的方法
2014/01/20 Python
Python的类实例属性访问规则探讨
2015/01/30 Python
Python算法之图的遍历
2017/11/16 Python
Sanic框架流式传输操作示例
2018/07/18 Python
Python中logging实例讲解
2019/01/17 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
python groupby 函数 as_index详解
2019/12/16 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
python安装及变量名介绍详解
2020/12/12 Python
利用python绘制正态分布曲线
2021/01/04 Python
python wsgiref源码解析
2021/02/06 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
教师敬业奉献模范事迹材料
2014/05/18 职场文书
优秀会计求职信
2014/07/04 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
小学优秀学生评语
2014/12/29 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL