我正在尝试将数据从sql服务器馈送到引导表。我正在使用bootstrap（'insertRow'）方法逐行添加此用户数据，但是我不知道如何编辑这些行以使这些行可折叠，同时在给定bootstrap-table的情况下保持排序和过滤功能。
这就是我尝试过的。我首先尝试使用引导表提供的'data-url'选项，以便可以直接从后端加载数据，然后使用data-detail-view选项取消折叠某些行并显示有关每个用户的更多信息（https://bootstrap-table-examples3.wenzhixin.net.cn/index.html?view-source#options/detail-view.html）。但是，尝试使用data-url选项时存在一些跨域错误，后端无法解决。因此，我尝试使用直接使用JavaScript创建新行的代码。此方法的问题在于，一旦信息出现，引导表似乎就不会意识到新数据，即使在该时间点显示了几行数据，也会显示“未找到匹配的记录”。因此，所有排序选项都不起作用。我发现通过使用以下方法，该表捕获了信息，并且排序选项有效，例如搜索，删除选定的列等。
$('#table').bootstrapTable('insertRow',{
index: rowId,
row: data //needs to be json
});
但是，此选项似乎没有给我灵活性来编辑行属性，因此我可以为我想要的每一行添加可折叠功能。
我有两种不同的方法，第一种是使用bootstrapTable（'insertRow'）选项，如下所示：
function insertRow(userID, name, gender, age, salary, product, date) {
let table = document.getElementById('table-body');
let rowId= table.getElementsByTagName('tr').length;
let data ={
id: userID,
name: name,
gender: gender,
age: age,
salary: salary,
product: product,
date: date
}
$('#table').bootstrapTable('insertRow',{
index: rowId,
row: data //needs to be json
});
}
第二个是使用简单的Javascript，例如：
function insertRowNew(userID, name, gender, age, salary, product, date) {
let table = document.getElementById('table-body');
let row = table.insertRow(0);
row.setAttribute('data-toggle', 'collapse');
row.setAttribute('data-target', `#accordion${userID}`);
row.setAttribute('class', 'clickable collpase-row collapsed');
let cellUserID= row.insertCell(0);
let cellName = row.insertCell(1);
let cellGender = row.insertCell(2);
let cellAge = row.insertCell(3);
let cellSalary = row.insertCell(4);
let cellProduct = row.insertCell(5);
let cellTime = row.insertCell(6);
cellUserID.innerHTML = userID;
cellName.innerHTML = name;
cellGender.innerHTML = gender;
cellAge.innerHTML = age;
cellSalary.innerHTML = salary;
cellProduct.innerHTML = product['productName'];
cellTime.innerHTML = date;
let newRow = table.insertRow(1);
myHtmlContent = `<td colspan="7"> \
<div id="accordion${userID}"
class="collapse">Hello</div> \
</td>`;
newRow.innerHTML = myHtmlContent;
}
这为我提供了可折叠的行，但没有提供表的排序和过滤功能。
该表的html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!--Script references. -->
<!--Reference the jQuery library. -->
<script src="lib/jquery-1.10.2.min.js"></script>
<!--Reference the SignalR library. -->
<script src="lib/jquery.signalR-2.4.0.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="lib/hubs.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<!-- Template Main Javascript File -->
<script src="js/main.js"></script>
<!-- Data Table Bootstrap -->
<link href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.14.2/dist/extensions/export/bootstrap-table-export.min.js"></script>
<!-- Main Stylesheet File -->
<link href="css/style.css" rel="stylesheet">
</head>
<body id="page-top">
<div class="wrapper">
<main id="main-management-system">
<!-- <table width="100%" class="display" id="datatable"> -->
<section class="container">
<h1 style="text-align: center">Customer Connect Dashboard</h1>
<table id="table"
data-classes= "table table-bordered table-hover table-striped"
data-sortable="true"
data-toggle="table"
data-show-columns="true"
data-search="true"
data-pagination="true"
data-show-toggle="true"
data-show-fullscreen="true"
data-sort-name="date"
data-sort-order="asc"
>
<thead class="thead-dark">
<tr style="width: 100%">
<th data-sortable="true" data-field="id">User ID</th>
<th data-sortable="true" data-field="name" >Name</th>
<th data-sortable="true" data-field="gender">Gender</th>
<th data-sortable="true" data-field="age">Age</th>
<th data-sortable="true" data-field="salary">Salary (£)</th>
<th data-sortable="true" data-field="product">Product</th>
<th data-sorter="dateSorter" data-sortable="true" data-field="date">Date</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
</section>
</main>
</div>
</body>
</html>
我希望能够使用$（'＃table'）。bootstrapTable（'insertRow'）方法，以便保持排序和过滤功能，并能够编辑这些行以使其可折叠。有人可以帮忙澄清一下如何做到吗？