bootstrap-select配合bootstrap table使用
时间: 2023-12-15 15:05:58 浏览: 34
可以将bootstrap-select和bootstrap table结合使用,使得表格中的下拉框具有更好的交互体验。下面是一个简单的例子:
```html
<!-- HTML代码 -->
<select class="selectpicker">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
<table class="table">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
<td>
<select class="selectpicker">
<option>男</option>
<option>女</option>
</select>
</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
<td>
<select class="selectpicker">
<option>男</option>
<option>女</option>
</select>
</td>
</tr>
<tr>
<td>王五</td>
<td>25</td>
<td>
<select class="selectpicker">
<option>男</option>
<option>女</option>
</select>
</td>
</tr>
</tbody>
</table>
```
```javascript
// JavaScript代码
$(document).ready(function() {
// 初始化selectpicker
$('.selectpicker').selectpicker();
// 初始化table
$('.table').bootstrapTable();
});
```
需要注意的是,如果表格中有多个下拉框,每个下拉框都需要使用`selectpicker()`进行初始化。此外,如果表格使用了`bootstrapTable()`进行初始化,则需要在`bootstrapTable()`之后再进行`selectpicker()`的初始化,否则可能会出现下拉框无法选择的情况。