Bootstrap Table 是一个流行的开源插件，用于在网页中展示数据表格。要在
Bootstrap Table 中添加
下拉框，可以使用自定义列的方式。
以下是一个简单的示例：
1. 首先，确保你已经引入了
Bootstrap 和
Bootstrap Table 的相关文件。
2. 在 HTML 文件中创建一个表格，并为其添加一个 ID，例如：
```html
<table id="myTable" data-toggle="table" data-height="300">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="
dropdown" data-formatter="
dropdownFormatter">
Dropdown</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td></td>
</tr>
</tbody>
</table>
```
3. 在 JavaScript 文件中定义 `
dropdownFormatter` 函数，用于生成
下拉框的 HTML 代码。例如：
```javascript
function
dropdownFormatter(value, row, index) {
var options = ['Option 1', 'Option 2', 'Option 3']; //
下拉框选项
var html = '<select class="form-control">';
for (var i = 0; i < options.length; i++) {
html += '<option>' + options[i] + '</option>';
}
html += '</select>';
return html;
}
```
4. 初始化
Bootstrap Table，并指定 `
dropdownFormatter` 函数作为
下拉框列的自定义格式化器。例如：
```javascript
$(function() {
$('#myTable').
bootstrapTable({
columns: [{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: 'Name'
}, {
field: '
dropdown',
title: '
Dropdown',
formatter:
dropdownFormatter
}]
});
});
```
这样，你就可以在
Bootstrap Table 中的某一列中添加
下拉框了。根据你的需求，可以自定义
下拉框的选项、样式等。希望对你有所帮助！如果有更多问题，请随时提问。
扫一扫
2509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
