前端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。过程中走了弯路，经验教训
测试文件
文件下载地址： 在此下载
