打开导入Excel表格模态框

开发工具与关键技术：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">&times;</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("模板文件不存在，请联系系统运维人员。");
        }}

把准备好的模板放到项目中，把路径写出来，路径不要写错了，浏览器不同下载效果也不同，点击下载导入模板：