使用Bootstrap 与Bootstrap Multiselect在bootstrap表格中实现选择刷新效果

背景：因公司项目需要，需要对app的模块信息做展示，利用bootstrap table做出的表格具有实现代码简单，美观的特点。但app的模块信息较多，而且模块的版本一直在跌进，若将所有信息都展示在表格中，后续数据量会越来越大。因此，我们使用bootstrap table的formatter来动态添加select元素，并使用multislect控件来实现下拉的样式与效果。最后达成只显示所有模块部分版本信息，支持选择查看特定版本信息的功能。代码实现的逻辑大体如下图所示，下面将一步步讲解。

搭建html骨架

具体代码如下所示，我们引入必须的css样式和js代码，并在html代码里放置table元素。 

使用bootstrap table定义表格并加载数据

表格定义与加载的代码如下所示：

bootstrap table文档地址http://bootstrap-table.wenzhixin.net.cn/

需要注意的是，我们在fromatter处调用函数version_formatte()来给每个版本（version字段）添加select元素，并给每个select添加id，以便后续获取选中的select值。version_formatte()函数代码如下：

实现select效果

接下来，只需要往select里填值，我们代用函数appendSelct()来实现此功能，在appendSelct()函数中调用multiselect()函数来实现表格所示的效果，默认情况下，会选中select第一个option的值。appendSelct()函数代码如下所示：

Bootstrap Multiselect文档地址http://www.kuitao8.com/demo/20140224/1/bootstrap-multiselect-master/index.html

实现的表格如下图所示

实现选择模块版本刷新表格功能

当我们选择查看模块不同版本信息后刷新表格数据时，select会默认选中第一个option的值，若不做处理，实际的数据就与版本对应不上。为此，我们定义了两个全局变量selectArray和drapdownValueArray，分别存放所有select当前选中的option值以及select的所有option值。在函数collect_selectValue()中，收集了刷新表格前选中的版本值，之后，我们调用load_demoTableQuote()重组表格，调用appendSelctValue2()函数来选中版本正确的值。

在appendSelctValue2()函数中，我们分别使用$("#"+versionId).multiselect('deselect', drapdownValueArray[round])来清除select默认选中的版本值，再使用$("#" + versionId).multiselect('select', selectArray[round])语句选中对应的版本值，从而实现表格信息与版本信息的一致。

我们选择模块1的2.0版本后刷新表格，最终实现的效果如下图所示。