Bootstrap Table中的多选框删除功能
时间:2018-07-15
这篇文章主要介绍了Bootstrap Table中的多选框删除功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
先上代码,后面再进行详细解释:
//删除按钮事件 $("#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. 效果图
2. 获得要删除的数据
接下来,再来看一下这一行代码的效果,把rows打印到控制台:
可以看到选中删除后,获得到的,就是一条完整重数据库中的查询内容,其中的cid就为每一条数据的id(主键)。
先选中多选框,当点击删除按钮时:在控制台接收到选中的cid,当然后台数据中一定要传递icd来,cid可以不用显示在表格中,
把idcard打印出来,
这时我们获得到的idcard 就是一个我们想要的到的数据,同时给他们中间以逗号隔开,传递到后台,执行多行删除语句:
3. 传递数据到后台执行删除sql
这时就可以成功获得要删除整条数据的id,当然你也可以获得其他列的数据,例如:
注意!
执行上面的功能,一点是要用bootstrapTable 显示的表格,要不然,没有效果,
总结
以上所述是小编给大家介绍的Bootstrap Table中的多选框删除功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
- [Silverlight动画]转向行为 - 到达行为
- Asp.Net统一前后端提示信息方案
- 人工智能:未来决策制定的机遇与影响
- CaseStudy(showcase)界面篇-导出xaml以及放入Blend的技巧
- [Silverlight动画]转向行为 - 避开行为
- CaseStudy(showcase)界面篇-desing设计界面
- [Silverlight动画]转向行为 - 寻找行为
- 【数字货币】数字黄金
- [Silverlight动画]转向行为 - 转向机车
- [Silverlight动画]转向行为 - 机车
- 微信、小游戏与未来
- [Silverlight动画]转向行为 - 2D向量
- [Silverlight动画]转向行为 - 介绍
- WCF技术剖析之十七:消息(Message)详解(中篇)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Linux驱动开发入门 demo
- ES6 的内置对象扩展
- ES6相关概念及新增语法
- 支持多JDK版本下运行的Jar文件打包方式
- XFF那些事
- Nginx tcp连接反向代理配置
- [Centos 7]免密码异地备份
- smtplib bcc 密送 失败解决方案
- python sys.stdout
- 【8】进大厂必须掌握的面试题-Java面试-异常和线程
- 魔法引用函数magic_quotes_gpc和magic_quotes_runtime的区别和用法
- 在网页中动态的生成一个gif图片
- 在 Visual Basic .NET 或 JScript 代码中使用早期绑定
- 腾讯云TKE-GPU案例: TensorFlow 在TKE中的使用
- 使用pyppeteer 下载chromium 报错 或速度慢