前端开发---使用bootstrap-table展示物联网数据
原创前端开发---使用bootstrap-table展示物联网数据
原创
MiaoGIS
修改于 2020-11-26 11:37:02
修改于 2020-11-26 11:37:02
下面我们使用它开发页面来查询HJ 212协议传输过来的物联网传感器数据。基于前端的列排序，隐藏列，模糊搜索，列搜索，翻页都是对bootstrap-table简单的配置自动完成的。同时使用daterangepicker插件来选择时间范围，以及可以将查询出来的数据后台导出为Excel。
看一下bootstrap-table的配置多简单。
html代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>设备数据</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="lib/bootstrap-3.3.7-dist/css/bootstrap-theme.css">
<link href="lib/bootstrap-table-master/dist/bootstrap-table.min.css" rel="stylesheet">
<link href="/lib/daterangepicker/daterangepicker.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">IOT平台</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8">
<ul class="nav navbar-nav">
<li><a href="/dashboard">数据总览</a></li>
<li ><a href="/table">设备数据</a></li>
<li><a href="/chart">图表分析</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/logout">退出</a></li>
<li class="active"><a href="/hj212">XX的数据</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<div class="form-group">
<label>选择时间:</label>
<div class="input-group">
<button type="button" class="btn btn-default" id="daterange-btn">
<span>
<i class="fa fa-calendar"></i> 选择时间
</span>
<i class="fa fa-caret-down"></i>
</button>
<button type="button" class="btn btn-default pull-right" id="export-btn">
导出数据
</button>
</div>
</div>
<table id="table" data-sortable="true" data-height="560" data-sort-name="dateStr" data-sort-order="desc" data-width="380" data-show-columns="true" data-pagination="true" data-search="true" data-advanced-search="true" data-id-table="advancedTable">
<thead>
<tr>
<th data-field="MN" data-sortable="true" >MN</th>
<th data-field="ST" data-sortable="true" >ST</th>
<th data-field="025-Avg" data-sortable="true" >025-Avg</th>
<th data-field="025-Max" data-sortable="true" >025-Max</th>
<th data-field="113-Avg" data-sortable="true" >113-Avg</th>
<th data-field="113-Max" data-sortable="true" >113-Max</th>
<th data-field="114-Avg" data-sortable="true" >114-Avg</th>
<th data-field="114-Max" data-sortable="true" >114-Max</th>
<th data-field="B02-Cou" data-sortable="true" >B02-Cou</th>
<th data-field="B02-Max" data-sortable="true">B02-Max</th>
<th data-field="S02-Avg" data-sortable="true" >S02-Avg</th>
<th data-field="S02-Max" data-sortable="true" >S02-Max</th>
<th data-field="S03-Avg" data-sortable="true" >S03-Avg</th>
<th data-field="S03-Max" data-sortable="true" >S03-Max</th>
<th data-field="S08-Avg" data-sortable="true" >S08-Avg</th>
<th data-field="S08-Max" data-sortable="true" >S08-Max</th>
<th data-field="dateStr" data-sortable="true" >监测时间</th>
<th data-field="qnStr" data-sortable="true" >发送时间</th>
<th data-field="receiveTime" data-sortable="true" >接收时间</th>
</tr>
</thead>
</table>
<input id="stations" type="hidden" value='{%raw dfStation[["sid","name"]].to_json(orient="records")%}'>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="lib/underscore.js"></script>
<script src="lib/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="lib/bootstrap-table-master/dist/bootstrap-table.min.js"></script>
<script src="/lib/bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/lib/bootstrap-table-master/dist/extensions/toolbar/bootstrap-table-toolbar.min.js">
</script>
<script src="/lib/daterangepicker/moment-with-locales.min.js"></script>
<script src="/lib/daterangepicker/daterangepicker.js"></script>
<script src="js/hj212.js">
</script>
</body>
</html>j
js代码如下：
function refreshTable(data) {
var $table = $('#table');
initTableOnce(data);
$table.bootstrapTable('load', data);
}
function initTable(data) {
var $table = $('#table');
$table.bootstrapTable({
'locale':'zh-CN',
'data': data
});
}
initTableOnce = _.once(initTable);
$(function () {
moment.locale('zh-cn');
var stations = eval($('#stations').val());
dictStation = _.object(_.map(stations, function (item) {
return [item['sid'], item['name']]
}));
var start=moment().subtract(1, 'days').format('YYYY-MM-DD 00:00:00');
var end=moment().subtract(-1, 'days').format('YYYY-MM-DD 00:00:00');
$.post('/hj212', {
'start':start ,
'end': end
}, function (res) {
// data = $.parseJSON(res['result']);
data = res['result'];
initTable(data);
})
$("#export-btn").data('start',start).data('end',end);
$('#daterange-btn').daterangepicker({
ranges: {
'今天': [moment(), moment()],
'昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'过去7天': [moment().subtract(6, 'days'), moment()],
'过去30天': [moment().subtract(29, 'days'), moment()],
'这个月': [moment().startOf('month'), moment().endOf('month')],
'上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
locale: {
customRangeLabel: '自定义日期',
format: 'YYYY-MM-DD',
applyLabel: '应用',
cancelLabel: '取消',
},
showDropdowns: true,
startDate:moment().subtract(1, 'days').format('YYYY-MM-DD 00:00:00'),
endDate: moment().subtract(-1, 'days').format('YYYY-MM-DD 00:00:00')
},
function (start, end) {
$('#daterange-btn span').html(start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD'));
$.post('/hj212', {
'start': start.format('YYYY-MM-DD 00:00:00'),
'end': end.format('YYYY-MM-DD 00:00:00')
}, function (res) {
//data = $.parseJSON(res['result']);
data = res['result'];
refreshTable(data);
})
$("#export-btn").data('start',start.format('YYYY-MM-DD 00:00:00')).data('end',end.format('YYYY-MM-DD 00:00:00'));
}
);
$("#export-btn").click(function(){
window.open('exportHj212?'+$.param($(this).data()),'_blank');
});
})
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读