<!DOCTYPE html>
|
<html lang="zh">
|
|
<head>
|
<meta charset="UTF-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
|
<link rel="stylesheet" type="text/css" href="./css/jquery/font-awesome.min.css">
|
|
<link rel="stylesheet" type="text/css" href="css/demo.css">
|
<!-- <script type="text/javascript" src="./external/polyfill.min.js"></script> -->
|
<script src="./external/jquery-1.10.2.min.js"></script>
|
<script type="text/javascript" src="./external/jszip.min.js"></script>
|
<script type="text/javascript" src="./external/FileSaver.js"></script>
|
<script type="text/javascript" src="./scripts/excel-gen.js"></script>
|
|
|
<style>
|
body,
|
html {
|
height: 100%;
|
width: 100%;
|
margin: 0;
|
padding: 0;
|
padding: 0;
|
background: rgba(0, 0, 0, 1);
|
color: white;
|
}
|
|
span {
|
color: #fff;
|
}
|
|
.contentbg {
|
background: rgb(43, 43, 43);
|
}
|
|
#test_table tr {
|
color: #fff;
|
background: #000;
|
}
|
|
#test_tbody tr {
|
background: transparent;
|
}
|
|
.inputStyle {
|
background: #000;
|
}
|
|
.btnStyle {
|
background: transparent;
|
color: #fff;
|
border-color: #fff;
|
}
|
|
.btnStyle:hover {
|
color: #333;
|
background-color: #e6e6e6;
|
border-color: #adadad;
|
}
|
|
.delbtn {
|
width: 50px;
|
height: 20px;
|
display: inline-block;
|
font-size: 12px;
|
border: 1px solid #adadad;
|
border-radius: 4px;
|
display: none;
|
}
|
|
.btn-success:active:focus {
|
background-color: #e6e6e6 !important;
|
border-color: #adadad !important;
|
}
|
|
.container {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
}
|
</style>
|
</head>
|
|
<body>
|
|
<div class="container contentbg">
|
<div class="row">
|
<div style="padding:2em 0; color:white ;">
|
<label class="checkbox-inline">
|
<button type="button" class="btn btn-success btn-block btnStyle" id="eject"><i
|
class="fa fa-file-excel-o" aria-hidden="true"></i> 定制列</button>
|
</label>
|
<label class="checkbox-inline">
|
<button type="button" class="btn btn-success btn-block btnStyle" id="generate-excel"><i
|
class="fa fa-file-excel-o" aria-hidden="true"></i> 导出</button>
|
</label>
|
</div>
|
<div class="col-md-12" style="padding:2em 0;">
|
<div class="table-responsive">
|
<table class="table table-bordered table-striped" id="test_table">
|
<thead>
|
<tr id='test_thead'>
|
|
</tr>
|
</thead>
|
<tbody id='test_tbody'>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
|
<script type="text/javascript">
|
var obvar = null;
|
var html = "";
|
var value = [];
|
listHead = ['经度', '纬度', '最低标准', '地基', '矿体', '灰岩', '灰岩+矿体', '含白云质角砾状灰岩', '含白云质角砾状灰岩+矿体', '燧石灰岩+矿体', '不知名'];
|
for (var i = 0; i < listHead.length; i++) {
|
//动态创建一个tr行标签,并且转换成jQuery对象
|
html += "<td class='headtd'>" + listHead[i] + "<button type='submit' class='btnStyle delbtn' style='margin-left: 50px;'>删除</button></td >"
|
$("#test_thead").html(html);
|
}
|
|
var settime = setInterval(function() {
|
var data = sessionStorage.getItem("obvar");
|
if (data != "KG" && data != obvar && data != null && data != undefined) {
|
obvar = data;
|
let _records = data.split(",");
|
if (_records != null && _records != undefined) {
|
value.push(_records)
|
let $trTemp = $("<tr></tr>");
|
//往行里面追加 td单元格
|
$trTemp.append("<td >" + _records[0] + "</td>");
|
$trTemp.append("<td >" + _records[1] + "</td>");
|
$trTemp.append("<td>" + _records[2] + "</td>");
|
$trTemp.append("<td >" + _records[3] + "</td>");
|
$trTemp.append("<td>" + _records[4] + "</td>");
|
$trTemp.append("<td >" + _records[5] + "</td>");
|
$trTemp.append("<td >" + _records[6] + "</td>");
|
$trTemp.append("<td >" + _records[7] + "</td>");
|
$trTemp.append("<td>" + _records[8] + "</td>");
|
$trTemp.append("<td>" + _records[9] + "</td>");
|
$trTemp.appendTo("#test_tbody");
|
}
|
|
} else {
|
data = obvar;
|
}
|
}, 1000);
|
|
// 点击查询
|
$("#querybtn").click(function() {
|
listGenerate(listData)
|
});
|
// 点击显示按钮
|
$("#eject").click(function() {
|
|
$('.delbtn').toggle();
|
});
|
//点击删除当前列
|
$(".delbtn").click(function() {
|
var l = $("#test_table tr").length;
|
|
var ind = $(this).parent().index();
|
|
if (l > 1) {
|
for (var i = 0; i < l; i++) {
|
$("#test_table tr").eq(i).find("td").eq(ind).remove();
|
}
|
$('.delbtn').toggle();
|
}
|
|
});
|
//导出表格
|
|
$("#generate-excel").click(function() {
|
clearInterval(settime);
|
|
|
|
|
excel = new ExcelGen({
|
"src_id": "test_table",
|
"show_header": true
|
});
|
|
excel.generate();
|
|
});
|
</script>
|
|
</body>
|
|
</html>
|
