背景
最近在使用bootstrap table ，有一个在某一列添加一个下拉列表，并且通过 “getallselections”方法获取所选行的需求，在实现这个功能的时，走了一些弯路，遇到了一些坑。所以今天总结出来，既是自己的学习，也分享给大家，希望能够有些帮助。
如何解决
添加这个下拉列表有以下两种方法：
这次主要介绍第一种，基本的思路为：首先通过 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是当前行的索引值
上面是在jsfiddle做的一个小demo，有源码和显示效果，可以参考一下。
小结
有的时候，我们会遇到一个别人没有遇到过的问题，并没有在网上找到直接的解决方案。那么一定要去关注他的官方文档，甚至可以直接联系作者。
还有以bootstrap-table来说，它本身是一个jquery插件，如果理解了一个jquery插件具体是如何工作的，对于解决问题会是非常有帮助的。
以上所述是小编给大家介绍的bootstrap table 在指定列中添加下拉框控件并获取所选值，希望对大家有所帮助
如对本文有疑问， 点击进行留言回复！！
androidx+viewpage+tablayout+json开发（加载图片和视频）
网友评论