开发工具与关键技术:MVC
作者:文泽钦
撰写时间:2019年5月13日
打开导入Excel表格模态框基本都是HTML的代码,控制器那边不用写代码,而且是国定写法,要用的时候直接拷贝过去用就可以了。
<div class="modal fade" id="modImportExaminee">
@*打开导入模态框的代码块*@
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">导入员工Execl数据</h5>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
</div>
<div class="modal-body">
<div class="row">
@*按钮*@
<div class="col-12 row justify-content-between">
<div class="col-12 col-md-6">
<form action="ImportExcel" method="post" enctype="multipart/form-data" id="formImportExcel">
@*accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。*@
<div class="custom-file form-control-sm">@*改变事件*@
<input type="file" class="custom-file-input" name="file" accept=".xls" id="fileUploadExecl" lang="zh-cn" onchange="upExcel()" />
<label class="custom-file-label" for="fileUploadExecl">选择xls文件</label>
</div>
</form>
</div>
<div class="w-100 d-inline d-md-none mb-1"></div>
<div class="col-12 col-md-4 m-auto">
<button type="button" class="btn btn-sm btn-primary mr-1" onclick="downImportTemplate()">下载导入模板</button>
<button type="button" class="btn btn-sm btn-primary" id="btnSaveImport" onclick="saveImport()">导入到数据库</button>
</div>
</div>
@*Excel临时表*@
<div class="col-12 table-responsive">
<table id="tabEmployee" layui-filter="tabEmployee"></table>
</div>
</div>
</div>
</div>
</div>
</div>
这相当于是一个存放Excel表格的容器,没有给它一个容器,Excel表格是无法上存或者无法保存的,接下来写打开导入Excel表格的模态框代码部分,打开模态框的代码都是比较简单。
function openImportExcel() {
//重置表单
$("#formImportExcel").resetForm();
//禁用保存到数据库的按钮
$("#btnSaveImport").prop("disabled", true);
//清空临时表
tabEmployee.reload({
url: "",//路径为空
data: []//直接赋值为空
});
//点击背景时不关闭动态模态框,按下esc时不关闭动态模态框
$("#modImportExaminee").modal({
backdrop: false,
keyboard: false
});
//弹出模态框
$("#modImportExaminee").modal("show");
}
写导入Excel表格到临时表格的表头,导入的表头与表格初始化的表头差不多,把表格初始化的复制下来,删除一些隐藏的id或者修改,也就不用再写一遍同样的代码了。
//初始化导入数据临时表
tabEmployeeImport = layuiTable.render({
elem: "#tabEmployeeImport",
cols: [[//设置表头
{ type: "numbers", title: "序号" },
{ field: "EmployeeNumber", title: "编号", align: "center" },
//设置宽度
{ field: "EmployeeName", title: "姓名", width: 130, align: "center" }, { field: "Phone", title: "电话", align: "center" },
{ field: "Cellphone", title: "手机", align: "center" },
{ field: "DeoartmentName", title: "部门", align: "center" },
{ field: "PositionName", title: "职位", align: "center" },
{ field: "Address", title: "地址", align: "center" },
{ field: "Remark", title: "备注", align: "center" }
]],
page: {
limit: 10,//每页显示数据的条数
limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],},//每页条数的选项
data: []
});
最后写打开导入Excel表格模态框的代码,打开模态框的代码块一般都是比较简单的,第一步重置表单,第二步清空临时表,第三步设置手动关闭模态框防止误关闭,第四步弹出模态框。
function openImportExcel() {
//重置表单
$("#formImportExcel").resetForm();
//禁用保存到数据库的按钮
$("#btnSaveImport").prop("disabled", true);
//清空临时表
tabEmployeeImport.reload({
url: "",//路径为空
data: []//直接赋值为空
});
//点击背景时不关闭动态模态框,按下esc时不关闭动态模态框
$("#modImportExaminee").modal({
backdrop: false,
keyboard: false
});
//弹出模态框
$("#modImportExaminee").modal("show");}
现在打开看看效果,按钮有了,表头有了,也没有报错什么的,那么我么的导入模态态框完成了。
下载导入模板很简单的,代码没有几行,页面上的写法如下:
function downImportTemplate() {
//打开一个新的窗口,并在窗口中装载指定URL地址的网页
window.open("DownImportTemplate");
}
控制器的也很简单:
public ActionResult DownImportTemplate(){
//获取模板路径
string filePath = Server.MapPath("~/Document/Template/员工信息导入模板.xls");
//判断模板是否存在
if (System.IO.File.Exists(filePath)) {//确定指定文件是否存在
//获取文件名称
string fileName = Path.GetFileName(filePath);//考生信息导入模板.xls
//返回文件
return File(new FileStream(filePath, FileMode.Open), "application/octet-stream", fileName);
}else{
return Content("模板文件不存在,请联系系统运维人员。");
}}
把准备好的模板放到项目中,把路径写出来,路径不要写错了,浏览器不同下载效果也不同,点击下载导入模板: