后端传了个string集合怎么渲染到bootstrap的table组件里面
时间: 2023-07-16 18:15:00 浏览: 149
你可以使用 Bootstrap Table 插件来渲染一个表格,然后将后端传递过来的字符串集合转换为一个二维数组,再将其渲染到表格中。
首先,在 HTML 页面中引入 Bootstrap 和 Bootstrap Table 的文件:
```html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
```
然后,定义一个空的表格:
```html
<table id="myTable" class="table table-bordered"></table>
```
接下来,使用 JavaScript 将后端传递过来的字符串集合转换为一个二维数组,并渲染到表格中:
```javascript
// 假设后端传递过来的字符串集合为 ["a", "b", "c"]
var stringList = ["a", "b", "c"];
// 将字符串集合转换为一个二维数组
var data = [];
for (var i = 0; i < stringList.length; i++) {
data.push({
id: i + 1,
value: stringList[i]
});
}
// 渲染到表格中
$('#myTable').bootstrapTable({
columns: [{
field: 'id',
title: 'ID'
}, {
field: 'value',
title: 'Value'
}],
data: data
});
```
这样,你就可以在 Bootstrap Table 中渲染一个字符串集合了。
阅读全文