<!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">
|
<input type="radio" onclick="showtable(1)" checked name="inlineCheckbox" > 点
|
</label>
|
<label class="checkbox-inline">
|
<input type="radio" name="inlineCheckbox" onclick="showtable(2)"> 线
|
</label>
|
<label class="checkbox-inline">
|
<input type="radio" name="inlineCheckbox" onclick="showtable(3)" > 面
|
</label>
|
<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">
|
//表头
|
|
|
|
showtable(1)
|
|
function showtable(flag) {
|
var GUID = "";
|
var listHead = null;
|
if (flag == 1) {
|
GUID = "1475320789798645762"; //点
|
listHead = ['矿山ID', '断面ID', "经度", "纬度", '最低标准', '地基', '矿体', '灰岩', '灰岩+矿体', '含白云质角砾状灰岩', '含白云质角砾状灰岩+矿体', '燧石灰岩+矿体', '不知名']
|
} else if (flag == 2) {
|
GUID = "1476370706918961154"; //线
|
listHead = ['矿山ID', '断面ID', "范围"]
|
} else if (flag == 3) {
|
GUID = "1476371195844784130"; //面
|
listHead = ['矿山ID', "矿山名称", "面积", "矿采标高", "勘察公司", "矿产类别"]
|
}
|
|
|
|
|
|
/* $.ajax({
|
type: "GET",
|
url: "http://127.0.0.1:8080/jeecg-boot/online/cgreport/api/getColumnsAndData/" + GUID + "?_t=1640744588&pageNo=1&pageSize=10",
|
beforeSend: function(request) {
|
request.setRequestHeader("X-Access-Token", "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2NDA3NDI3NjIsInVzZXJuYW1lIjoiYWRtaW4ifQ.HiE3-7cRlXjqOhxZeIkx-SBnBETwTMJ_30cXcNQk2AI");
|
},
|
dataType: "json",
|
success: function(result) {
|
|
|
var html = "";
|
$("#test_thead").html("");
|
$("#test_tbody").empty();
|
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 _records = result.result.data.records;
|
|
if (flag == 1) {
|
for (var i = 0; i < _records.length; i++) {
|
//动态创建一个tr行标签,并且转换成jQuery对象
|
var trTemp = $("<tr></tr>");
|
//往行里面追加 td单元格
|
trTemp.append("<td>" + _records[i].kuangid + "</td>");
|
trTemp.append("<td>" + _records[i].lineid + "</td>");
|
trTemp.append("<td>" + _records[i].lon + "</td>");
|
trTemp.append("<td>" + _records[i].lat + "</td>");
|
trTemp.append("<td>" + _records[i].h1 + "</td>");
|
trTemp.append("<td>" + _records[i].h2 + "</td>");
|
trTemp.append("<td>" + _records[i].h3 + "</td>");
|
trTemp.append("<td>" + _records[i].h4 + "</td>");
|
trTemp.append("<td>" + _records[i].h5 + "</td>");
|
trTemp.append("<td>" + _records[i].h6 + "</td>");
|
trTemp.append("<td>" + _records[i].h7 + "</td>");
|
trTemp.append("<td>" + _records[i].h8 + "</td>");
|
trTemp.append("<td>" + _records[i].h9 + "</td>");
|
trTemp.appendTo("#test_tbody");
|
}
|
} else if (flag == 2) {
|
for (let index = 0; i < _records.length; index++) {
|
//动态创建一个tr行标签,并且转换成jQuery对象
|
var trTemp = $("<tr></tr>");
|
//往行里面追加 td单元格
|
trTemp.append("<td>" + _records[index].kuangid + "</td>");
|
trTemp.append("<td>" + _records[index].lineid + "</td>");
|
trTemp.append("<td>" + _records[index].line + "</td>");
|
trTemp.appendTo("#test_tbody");
|
}
|
} else if (flag == 3) {
|
for (let j = 0; j < _records.length; j++) {
|
//动态创建一个tr行标签,并且转换成jQuery对象
|
var trTemp = $("<tr></tr>");
|
//往行里面追加 td单元格
|
trTemp.append("<td>" + _records[j].kuangid + "</td>");
|
trTemp.append("<td>" + _records[j].kuangname + "</td>");
|
trTemp.append("<td>" + _records[j].mianji + "</td>");
|
trTemp.append("<td>" + _records[j].biaogaocai + "</td>");
|
trTemp.append("<td>" + _records[j].kanchacompany + "</td>");
|
trTemp.append("<td>" + _records[j].kuangchan + "</td>");
|
trTemp.appendTo("#test_tbody");
|
}
|
}
|
|
|
|
}
|
})*/
|
|
}
|
|
|
// 点击查询
|
$("#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() {
|
excel = new ExcelGen({
|
"src_id": "test_table",
|
"show_header": true
|
});
|
excel.generate();
|
});
|
</script>
|
|
</body>
|
|
</html>
|
