104 lines
4.6 KiB
HTML
104 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Dashboard | Nadhif - Responsive Admin Template</title>
|
|
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css">
|
|
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
|
|
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
|
|
<script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
|
|
<script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/locale/bootstrap-table-zh-CN.min.js"></script>
|
|
</head>
|
|
<style>
|
|
.mytab{
|
|
margin:20px;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div style="margin: 20px;">
|
|
<input type="text" id="mac" class="form-control" style="width: 20%; float: left" placeholder="场站名称">
|
|
<input type="text" id="name" class="form-control" style="width: 20%; float: left" placeholder="所属项目">
|
|
<input type="text" id="mode" class="form-control" style="width: 20%; float: left" placeholder="区域">
|
|
<!-- <input type="text" id="channel" class="form-control" style="width: 20%; float: left" placeholder="负责人"> -->
|
|
<input type="text" id="buildingId" class="form-control" style="width: 20%; float: left" placeholder="建筑物ID">
|
|
<span id="search"><button class="btn btn-default" type="button">搜索</button></span>
|
|
</div>
|
|
<div class="mytab">
|
|
<table id="mytab" class="table table-hover"></table>
|
|
</div>
|
|
<script>
|
|
$('#mytab').bootstrapTable({
|
|
method: 'get',
|
|
// url: "http://localhost/47.75.142.244/rs.opmonitor.com/view/layout/web/test.json", // 请求路径
|
|
url: "?c=station&a=getDataTable", // 请求路径
|
|
striped: true, // 是否显示行间隔色
|
|
pageNumber: 1, // 初始化加载第一页
|
|
pagination: true, // 是否分页
|
|
sidePagination: 'client', // server:服务器端分页|client：前端分页
|
|
pageSize: 5, // 单页记录数
|
|
pageList: [5, 20, 30],
|
|
// showRefresh : true,// 刷新按钮
|
|
queryParams: function(params) { // 上传服务器的参数
|
|
var temp = {
|
|
mac: $("#mac").val(),
|
|
floorId: $("#floorId").val(),
|
|
placeId: $("#placeId").val(),
|
|
buildingId: $("#buildingId").val(),
|
|
limit: params.limit, // 每页显示数量
|
|
offset: params.offset, // SQL语句起始索引
|
|
};
|
|
return temp;
|
|
},
|
|
columns: [{
|
|
checkbox: true
|
|
}, {
|
|
title: '序号',
|
|
field: 'placeId',
|
|
}, {
|
|
title: '场站名称',
|
|
field: 'mac',
|
|
}, {
|
|
title: '所属项目',
|
|
field: 'name',
|
|
}, {
|
|
title: '区域',
|
|
field: 'mode',
|
|
formatter: formatMode
|
|
}, {
|
|
title: '地址',
|
|
field: 'avgLevel',
|
|
}, {
|
|
title: '负责人',
|
|
field: 'channel',
|
|
}, {
|
|
title: '联系方式',
|
|
field: 'floorId',
|
|
}, {
|
|
title: '控制柜数量',
|
|
field: 'buildingId',
|
|
}, {
|
|
title: '曝气机数量',
|
|
field: 'lon',
|
|
}, {
|
|
title: '管网设备数量',
|
|
field: 'lat',
|
|
}]
|
|
})
|
|
|
|
// 查询按钮事件
|
|
$('#search').click(function() {
|
|
$('#mytab').bootstrapTable('refresh', {
|
|
url: "http://localhost/47.75.142.244/rs.opmonitor.com/view/layout/web/test.json"
|
|
// url: "?c=station&a=getDataTable", // 请求路径
|
|
});
|
|
})
|
|
// 格式化按钮
|
|
function formatMode(value, row, index) {
|
|
if (value == 0)
|
|
return "wifi";
|
|
return "蓝牙";
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |