Bootstrap Table 在指定列中添加下拉框控件并获取所选值


Posted in Javascript onJuly 31, 2017

背景

最近在使用Bootstrap table ,有一个在某一列添加一个下拉列表,并且通过 “getAllSelections”方法获取所选行的需求,在实现这个功能的时,走了一些弯路,遇到了一些坑。所以今天总结出来,既是自己的学习,也分享给大家,希望能够有些帮助。

如何解决

添加这个下拉列表有以下两种方法:

  • 利用Column options 中的 formatter 将数据转换成下拉列表的形式
  • 使用bootstrap-table拓展中的editable插件

这次主要介绍第一种,基本的思路为:首先通过 bootstrap-table 的Column 配置项中的formatter,将获取到的数据转换为包含数据的 select 控件。然后根据用户选择项更新对应单元格数据,最后通过getallselection方法获取所选行数据。

formatter,其配置项为function,有三个参数:(value,row,index)

formatter: setSelect
function setSelect(value, row, index) 
{
  var strHtml = "";
  if (value == "Item 1") 
  {
    strHtml = "<select class='ss'><option value='Item 1' selected='selected'>Item 1</option><option value='Item 2'>Item 2</option></select>";
   } 
   else 
   {
    strHtml = "<select class='ss'><option value='Item 1' >Item 1</option><option value='Item 2' selected='selected'>Item 2</option></select>";
   }
   return strHtml;
}

到这里,下拉列表已经可以显示出来了,但是如果直接使用 getallselection 方法获取所选内容会有问题:获取到的数据是默认表格初始化加载的内容,并不是重新选择的内容。

  bootstrap-table是一个jQuery插件,直接在html上面修改是获取不到的,要修改需要通过它自己的方法。bootstrap-table 在Methods 中提供了一个updateCell的方法。

updateCell ,包含了三个参数(index,field,value),在某一行的某一列更新value。

$('#table').bootstrapTable('updateCell', {
  index: indexSelected,
  field: 'name',
  value: valueSelected
 })

events

完成了下拉列表的显示,有了更新单元格值的方法,还需要做的是为下拉列表的选择绑定事件,实现下拉列表选择->改变单元格值。

我们可以在select元素上绑定onchange事件,或者使用jquery的change 事件。

$(".ss").change(function() {
 var indexSelected = $(this).parent().parent()[0].rowIndex - 1;
 var valueSelected = $(this).children('option:selected').val();
 $('#table').bootstrapTable('updateCell', {
  index: indexSelected,
  field: 'name',
  value: valueSelected
 })
});

但是经过测试,发现$(“.ss”).change()只是在页面加载后第一次选择可以触发,后来在bootstrap-table的文档中发现了events项,可以监听单元格事件,和formatter 配合着用。

events: {'change .ss': function (e, value, row, index) {}};
//value是当前单元格的值,row是当前行,index是当前行的索引值
  • change 传递的是jQuery事件
  • .ss 是jQuery的类选择器

上面是在JSFiddle做的一个小Demo,有源码和显示效果,可以参考一下。

小结

有的时候,我们会遇到一个别人没有遇到过的问题,并没有在网上找到直接的解决方案。那么一定要去关注他的官方文档,甚至可以直接联系作者。

还有以bootstrap-table来说,它本身是一个jQuery插件,如果理解了一个jQuery插件具体是如何工作的,对于解决问题会是非常有帮助的。

以上所述是小编给大家介绍的Bootstrap Table 在指定列中添加下拉框控件并获取所选值,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用javascript实现画板的代码
Sep 05 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 Javascript
小程序实现列表倒计时功能
Jan 29 Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 #Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 #Javascript
Kindeditor单独调用多图上传实例
Jul 31 #Javascript
老生常谈ES6中的类
Jul 31 #Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 #Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 #Javascript
深入理解Vue transition源码分析
Jul 30 #Javascript
You might like
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
php缓存技术详细总结
2013/08/07 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
python 图片验证码代码分享
2012/07/04 Python
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
Python Merge函数原理及用法解析
2020/09/16 Python
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
村长反四风问题个人对照检查材料
2014/09/21 职场文书
篮球拉拉队口号
2015/12/25 职场文书
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers