初学Bootstarp，个人感觉一个功能非常强大的前端框架，由于学习的路途也不是一番风顺的，难免会遇到问题，将遇到的问题整理，可以时常看看，加深记忆。
最近做表格需要在表格中加入<select>标签，将数据填充到下拉框，无奈搞了好几个小时也没有成功，最后经过请教身边的大佬，得以解决。
代码如下:https://blog.csdn.net/javadakangxiaobai/article/details/82385137
HTML页面代码
<!-- 查询条件 -->
<div class="col-sm-12">
<div class="panel panel-default" style="margin-top: 10px">
<div class="panel-heading">
<h3 class="panel-title">查询条件</h3>
</div>
<div class="panel-body">
<form id="formSearch" class="form-inline">
<div class="form-group">
<label for="countySearch" class="control-label mglf5" style="font-size:15px;">区域</label>
<select class="form-control mglf3" id="countySearch" style="width:160px;"></select>
</div>
<div class="form-group">
<label for="pollSourceSearch" class="control-label mglf5" style="font-size:15px;">企业名称</label>
<select class="form-control mglf3" id="pollSourceSearch" style="width:160px;"></select>
</div>
<div class="form-group">
<div class="input-append date form_datetime" data-date-format="yyyy-mm-dd">
<label for="erbStartTime" class="control-label mglf5" style="font-size:15px;">时间</label>
<input id="erbStartTime" readonly size="16" type="text" value="" class="form-control mglf3"/>
<span class="add-on"><i class="icon-th"></i></span>
</div>
</div>
<div class="form-group">
<div class="input-append date form_datetime" data-date-format="yyyy-mm-dd">
<label for="erbEndTime" class="control-label mglf5">- - </label>
<input id="erbEndTime" readonly size="16" type="text" value="" class="form-control mglf3"/>
<span class="add-on"><i class="icon-th"></i></span>
</div>
</div>
<button type="button" class="btn btn-default mglf5" id="search">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询
</button>
<button id="btn_export" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-export" aria-hidden="true"></span>导出
</button>
</form>
</div>
</div>
<input type="hidden" id="moveToControlId">
<table id="tb_evokeReceBoxList" style="table-layout:fixed"></table>
</div>
其中<table id="tb_evokeReceBoxList" style="table-layout:fixed"></table>是Bootatrp Table的表格数据展示及分页;
JS代码
function showFeedBack() {
$("#tableList").bootstrapTable({
url : '', //请求后台的url(*)
method : 'post', //请求方式(*)
toolbar : '#toolbar', //工具按钮用哪个容器
striped : true, //是否显示行间隔色
contentType : 'application/x-www-form-urlencoded;charset=UTF-8',
cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性(*)
dataType : "json",
pagination : true, //是否显示分页(*)
sortable : true, //是否启用排序
sortOrder : "asc", //排序方式
queryParams : queryContentParams, //传递参数(*)
sidePagination : "server", //分页方式：client客户端分页，server服务端分页(*)
pageNumber : 1, //初始化加载第一页，默认第一页
pageSize : 10, //每页的记录行数(*)
pageList : [10, 25, 50, 100], //可供选择的每页的行数(*)
search : false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务器
strictSearch : true,
showColumns : false, //是否显示所有的列
showRefresh : false, //是否显示刷新按钮
minimumCountColumns : 2, //最少允许的列数
clickToSelect : true, //是够启用点击选中行
uniqueId : "problemId", //每一行的唯一标识，一般为主键列
showToggle : false, //是否显示详细视图和列表视图的切换按钮
cardView : false, //是否显示详细视图
detailView : false, //是否显示父子表
columns: [{
checkbox: true,
width : 35
},{
field: 'registerNumber',
align: 'center',
title: '立案号',
width : 160,
formatter: function (value, row, index) {// selNumber'+ row.registerId + '
var option;
//立案号下拉框
$.ajax({
url: '后台Controller请求',
type: "post",
data : {},
async : false,
success:function(data){
var headOption = "<option value =''>请选择</option>";
if(value == "0"){
headOption = headOption + "<option value ='0' selected>无</option>";
}else{
headOption = headOption + "<option value ='0'>无</option>";
}
$.each(data,function(i,obj){
if(value == obj.registerId){
headOption = headOption + "<option value='"+obj.registerId+"' selected>"+obj.registerNumber+"</option>";
}else{
headOption = headOption + "<option value='"+obj.registerId+"'>"+obj.registerNumber+"</option>";
}
});
option = '<select class="form-control" id="selNumber"'+index+' name="registerName" style="height:33px;">'+
headOption + '</select>' +'<button class="btn btn-default" onclick="addNumber()">添加</button>';
}
})
return option;
}
}]
}
因为table表格是循环出来的，所以<select>标签中的ID不能重复，所以我拼接了id="selNumber"'+index+' 将每一行的下标作为下拉框每条数据匹配的标识。
奉上效果图:
