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

背景

最近在使用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 在指定列中添加下拉框控件并获取所选值，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# bootstrap # table # 下拉框控件 # Bootstrap Table列宽拖动的方法 # bootstrap table列和表头对不齐的解决方法 # Bootstrap Table使用方法详解 # JS组件Bootstrap Table使用方法详解 # bootstrap table实现单击单元格可编辑功能 # bootstrap table单元格新增行并编辑 # 值得分享的bootstrap table实例 # 值得分享的轻量级Bootstrap Table表格插件 # 基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortab # Bootstrap table列上下移动效果 # 单元格 # 所选 # 自己的 # 的是 # 是一个 # 给大家 # 绑定 # 小编 # 在某一 # 加载 # 文档 # 是在 # 会有 # 走了 # 在此 # 两种 # 我们可以 # 要做 # 可以直接 # 解决问题

返回目录在线咨询

上一篇：建站之星北京办公室配置系统详解：如何实现智能建站高效布局？
下一篇：什么是python的线性回归

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求