<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>用户信息统计</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript">
$(function () {
//给导入按钮添加单击事件
$("#importUserBtn").click(function (){
//收集参数
//取得文件后缀名
let userFileName=$("#userFile").val();
let lastIndex=userFileName.lastIndexOf(".")+1;
let suffix=userFileName.substr(lastIndex).toLowerCase();
if (suffix != "xls") {
alert("只支持xls文件");
return;
}
//取得文件本身
let userFile = $("#userFile")[0].files[0];
if (userFile.size > 5 * 1024 * 1024) {
alert("文件大小不能超过5MB");
return;
}
console.log(userFile);
//FormData是ajax提供的接口,可以模拟键值对向后台提交参数;
let formData = new FormData;
formData.append("userFile", userFile);
$("#msg").text("文件导入中......")
$.ajax({
url:'importUser',
data:formData,
processData:false,//设置ajax向后台提交参数之前，是否把参数统一转换成字符串：true--是,false--不是,默认是true
contentType:false,//设置ajax向后台提交参数之前，是否把所有的参数统一按urlencoded编码：true--是,false--不是，默认是true
type:'post',
dataType:'json',
success:function (data) {
if (data.state == "200") {
alert("成功导入" + data.date + "条记录");
$("#importActivityModal").modal("hide");
location.reload();
}else{
alert(data.message);
$("#importActivityModal").modal("show");
}
}
})
})
})
</script>
</head>
<body>
<!--导入用户 模态窗口-->
<div class="modal fade" id="importUserModal" role="dialog">
<div class="modal-dialog" role="document" style="width: 60%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
</div>
<div class="modal-body" style="height: 350px;">
<div style="position: relative;top: 20px; left: 50px;">
请选择要上传的文件：<small style="color: gray;">[仅支持.xls]</small>
</div>
<div style="position: relative;top: 40px; left: 50px;">
<input type="file" id="userFile">
</div>
<div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;" >
<h3>重要提示：</h3>
<ul>
<li>操作仅针对Excel，仅支持后缀名为XLS的文件。</li>
<li>给定文件的第一行将视为字段名。</li>
<li>用户密码以字符串形式录入</li>
<li>请确认您的文件大小不超过5MB。</li>
<li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
<li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
</ul>
<ul>
<br><h4><span id="msg" style="color: dodgerblue"></span></h4>
</ul>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button id="importUserBtn" type="button" class="btn btn-primary">导入</button>
</div>
</div>
</div>
</div>
<h1 style="text-align: center;margin-top: 50px">用户信息表</h1><br>
<a style="margin-left: 910px" class="btn btn-primary" th:href="@{'/add'}">新增用户</a>
<a style="" class="btn btn-primary" th:href="@{'/exportAllUser'}">导出报表</a>
<a style="" class="btn btn-primary" th:href="@{'/file'}">导入数据</a>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#importUserModal" ><span class="glyphicon glyphicon-import"></span> 上传列表数据（导入）</button>
<div style="margin-top: 25px;margin-left: 180px;margin-right: 180px">
<table class="table table-striped" style="margin-left: 100px">
<thead>
<!--tr标签定义html表格中的所有行-->
<!--th标签定义html表格中的 表头 单元格-->
<tr>
<th>编号</th>
<th>姓名</th>
<th>密码</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr th:each="user:${users}">
<!-- td标签定义html表格中的标准单元格-->
<td th:text="${user.id}"></td>
<td th:text="${user.username}"></td>
<td th:text="${user.password}"></td>
<td>
<a class="btn btn-primary" th:href="@{'/updatePage/'+${user.id}}">修改</a>
<a class="btn btn-danger" th:href="@{'/delete/'+${user.id}}">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
扫一扫
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
