<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>導入文件</title>
<link rel="stylesheet" href="/js/bootstrap.min.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/css/animate.css">
<link rel="stylesheet" href="/css/global.css">
<link rel="stylesheet" href="/css/loading.css">
</head>
<body>
<div style="width: 1200px;margin: 0 auto;margin-top: 20px;">
<form class="form-horizontal" method="post" enctype="multipart/form-data" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">importTypeId</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="importTypeId" name="importTypeId"
placeholder="importTypeId">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputfile">文件輸入</label>
<div class="col-sm-10">
<input type="file" name="file" id="inputfile">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" id="submit">上傳</button>
</div>
</div>
</form>
<h1 id="LogInfo"></h1>
<div style="overflow: auto;">
<table align="center" class="table table-striped" id="table" border="1" style="margin-top: 20px;">
</table>
</div>
</div>
<script src="/js/loading.js"></script>
<script>
function loading() {
$('body').loading({
loadingWidth: 240,
title: '請稍等!',
name: 'upload',
discription: '正在上傳中...',
direction: 'column',
type: 'origin',
// originBg:'#71EA71',
originDivWidth: 40,
originDivHeight: 40,
originWidth: 6,
originHeight: 6,
smallLoading: false,
loadingMaskBg: 'rgba(0,0,0,0.2)'
});
}
$('#submit').click(function () {
loading();
$('#table').html('');
$('#LogInfo').html('');
var formdata = new FormData();
formdata.append('file', $('#inputfile')[0].files[0]);
formdata.append('importTypeId', $('#importTypeId').val());
$.ajax({
url: '/api/Upload/UploadExcel',
type: 'post',
contentType: false,
processData: false,
data: formdata
}).done(function (data) {
console.log(data);
if (data.flag = 'success') {
Unplanned.logId = data.detail;
Unplanned.SharedResourceCreatingCheck();
}
else {
alert(data.flag + (data.message ? data.message : ""));
}
});
})
var Unplanned = {
logId: 0,
SharedResourceCreatingCheckUrl: '', // url api
timer: null,
SharedResourceCreatingCheck: function () {
var _this = this;
var obj = {};
_this.SharedResourceCreatingCheckUrl = "/api/Upload/GetImportLogById?id=" + _this.logId;
_this.PollingSharedResourceCreatingCheck(obj, 1000, function (data) {
removeLoading('upload');
var msg = '當前導入批次:' + _this.logId + ' 狀態:' + (data.detail.importStatus == 'success' ? '成功' : '失敗');
alert(msg);
$('#LogInfo').html(msg);
if (data.detail.importStatus == 'fail') {
constructTable('#table', JSON.parse(data.detail.importMsg))
}
else {
$.get('/api/Upload/LoadImportDataByBatch?pageSize=10&id=' + _this.logId).done(function (data) {
constructTable('#table', data.detail)
});
}
});
},
// 輪詢
PollingSharedResourceCreatingCheck: function (data, delay, cb) {
var _this = this;
delay = delay || 1000;
$.get(_this.SharedResourceCreatingCheckUrl, data, function (res) {
if (!res.isError && res.detail.importStatus == 'New') {
_this.timer = setTimeout(function () {
_this.PollingSharedResourceCreatingCheck(data, delay, cb);
}, delay)
} else {// 不需要輪詢調回調
cb && cb(res);
}
})
}
};
function constructTable(selector, list) {
$(selector).html('');
// Getting the all column names
var cols = Headers(list, selector);
// Traversing the JSON data
for (var i = 0; i < list.length; i++) {
var row = $('<tr/>');
for (var colIndex = 0; colIndex < cols.length; colIndex++) {
var val = list[i][cols[colIndex]];
// If there is any key, which is matching
// with the column name
if (val == null) {
val = "";
}
if (val?.constructor === Object) {
val = JSON.stringify(val);
}
row.append($('<td/>').html(val));
}
// Adding each row to the table
$(selector).append(row);
}
}
function Headers(list, selector) {
var columns = [];
var header = $('<tr/>');
for (var i = 0; i < list.length; i++) {
var row = list[i];
for (var k in row) {
if ($.inArray(k, columns) == -1) {
columns.push(k);
// Creating the header
header.append($('<th/>').html(k));
}
}
}
// Appending the header to the table
$(selector).append(header);
return columns;
}
</script>
</body>
</html>
jquery根據json自動生成表格
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
編譯版本
1.找不到GLIBCXX_3.4.29 https://blog.csdn.net/weixin_39379635/article/details/129159713?login=from_csdn