BootstrapTable在指定列中添加下拉框控件并获取所选值背景
最近在使⽤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")
{
jquery获取下拉框选中值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 在指定列中添加下拉框控件并获取所选值，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。