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") 
  {
    strHtml = "Item 1Item 2";
   } 
   else 
   {
    strHtml = "Item 1Item 2";
   }
   return strHtml;
}

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。