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 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
javascript之Partial Application学习
Jan 10 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 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
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
PHP自定义多进制的方法
2016/11/03 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
JavaScript与函数式编程解释
2007/04/27 Javascript
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
Python 专题四 文件基础知识
2017/03/20 Python
python使用matplotlib画饼状图
2018/09/25 Python
详解python tkinter 图片插入问题
2020/09/03 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
大专应届生个人简历的自我评价
2013/10/15 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
运动会演讲稿
2014/05/07 职场文书
欢迎横幅标语
2014/06/17 职场文书
办公经费申请报告
2015/05/15 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python