前端BootstrapTable組件不同使用方法的效率各有差異
本人需要解決的問題（#需求）
設備端批量發送數據過來，數據已按照特定字段進行排序，現在本人需要按照傳過來的數據動態更新表格，表格的顯示區域有限制
因為一些原因，最終確定使用 Bootstrap Table 組件實現該功能
遇到的問題（#問題）
使用 bootstrapTable(‘load’, {data: data})進行數據更新時，無法使用滾動條。每次刷新滾動條都會恢復到滾動條頂部（即無法滑動滾動條，體驗很差）
使用 bootstrapTable(‘updateRow’, {index : updateIndex, row : showRow}) 動態維護數據時，佔用CPU太多（30%+），導致 瀏覽器的IndexedDB數據庫無法使用等問題
使用 bootstrapTable(‘updateByUniqueId’, {id: id, row : showRow}) 動態維護數據時，佔用CPU太多（30%+），導致 瀏覽器的IndexedDB數據庫無法使用等問題
測試前端頁面（#基本頁面）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Jquery 引用 -->
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- bootstrap && bootstrap-table -->
<link href="//cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="//unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
</head>
<body>
<div id="table-wrapper">
<table id="table"
data-toggle="table"
data-show-columns="true"
data-height="300"
data-unique-id="uid"
>
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
</div>
<script>
// 解決思路代碼放在該處
var $table = $('#table');
var times = 0;
var total = 0;
var maxTotal = 0;
function refresh(){
// 問題代碼
}
$(function() {
setInterval(() =>{refresh();}, 2000);
});
</script>
</body>
</html>
本人使用的基本思路
測試時的數據對象基本對象結構為 { ‘id’ : id, ‘uid’ : uid, ‘name’ : name, ‘price’ : price}
生成空對象的方法如下
function generateRow()
{
var result = {
'id' : 0
, 'uid' : 0
, 'name' : ''
, 'price' : ''
};
return result;
}
Mock數據生成方法如下
function generateData()
{
var data = [];
let len = 20 + Math.floor(Math.random() * 30);
for(let i = 0; i<len; i++)
{
let id = total + i + 1;
data.push({
'id' : id
, 'uid' : (i+1)
, 'name' : 'Item' + id
, 'price' : '$' + id
});
}
return data;
}
-
問題一 實現代碼
function refresh()
{
var data = generateData();
total += data.length;
// 動態更新數據
$table.bootstrapTable('load', data);
}
問題錄屏
-
問題二 實現代碼
function refresh()
{
var data = generateData();
var len = data.length;
total += len;
let updateIndex = 0;
// 動態更新數據
for(; updateIndex<maxTotal; updateIndex++)
{
let showRow = updateIndex<len ? data[updateIndex] : generateRow();
$table.bootstrapTable('updateRow', {
index : updateIndex
, row : showRow
});
}
// 插入數據
for(;updateIndex<len; updateIndex++)
{
$table.bootstrapTable('insertRow',
{
index : updateIndex
, row : data[updateIndex]
});
}
maxTotal = maxTotal >= len ? maxTotal : len;
}
問題截屏
-
問題三 實現代碼
function refresh()
{
var data = generateData();
var len = data.length;
total += len;
let updateIndex = 0;
// 動態更新數據
for(; updateIndex<maxTotal; updateIndex++)
{
let showRow = updateIndex<len ? data[updateIndex] : generateRow(updateIndex);
$table.bootstrapTable('updateByUniqueId', {
id : updateIndex
, row : showRow
});
}
// 插入數據
for(;updateIndex<len; updateIndex++)
{
$table.bootstrapTable('insertRow',
{
index : updateIndex
, row : data[updateIndex]
});
}
maxTotal = maxTotal >= len ? maxTotal : len;
}
問題截屏
最後的解決方法
在問題一的基礎上，外面嵌套 一層div，在這層 div中增加css屬性固定該div的高度，不用 bootstrapTable 的 data-height進行高度固定。
#table-wrapper {
height : 400px;
overflow : scroll;
}
建議
問題結論，使用 load 直接刷新加載 數據不會費太多CPU資源；使用動態 update 表格 刷新數據會導致CPU佔用過高。建議使用 bootstrapTable直接 load 數據刷新界面。
能夠使用CSS解決的問題，盡量別用JS。過程中走了彎路，經驗教訓
測試文件
文件下載地址： 在此下載
