导入考生信息
平时我们录入信息用到的工具最多的就是Excel表格，它就像是一个记事本，可以随时打开随时记录，非常的方便。
话不多说，直接进入正题。导入信息需要进行多个步骤的操作，所以要一步一步地分析清楚，在操作时要考虑好每一个实现的效果先后顺序。首先，第一步就是要写一个弹出导入的模态框，因为录入信息用到的是Excel，就直接设置选择xls文件导入。在确定录入之前，要先把数据显示在临时表里，这样有利于看清楚自己录入的信息是否正确。
//弹出导入Excel的模态框
function openImportExcel() {
//重置表单
$("#formImportExcel").resetForm();
//禁用保存到数据库的按钮
$("#btnSaveImport").prop("disabled", true);
//清空临时表
tabStudentImport.reload({
url: "",
data: []
});
//点击背景时不关闭动态模态框，按下esc时不关闭动态模态框
$("#modImportExaminee").modal({
backdrop: false,
keyboard: false
});
//弹出模态框
$("#modImportExaminee").modal("show");
}
临时表的代码：
第一步的效果：
第二步要做的是下载导入的模板，上传Excel表格，把数据保存到临时表。这是专门给用户写的，考虑到有些用户可能不用Excel表格，就提供一个带有格式的模板让用户直接在里面录入信息，录完了就直接上传，是否觉得有一种很好的用户体验。
//下载导入模板
function downImportTemplate() {
//打开一个新的窗口，并在窗口中装载指定URL地址的网页
window.open("downImportTemplate");
}
//上传Excel表格，保存到临时表
function upExcel() {
//避免取消选择文件后触发上传
if ($("#fileUploadExecl").val() == "" || $("#fileUploadExecl").val() == undefined) {
return;
}
//显示加载层
var layIndex = layer.load();
//提交表单
$("#formImportExcel").ajaxSubmit(function (Msg) {
layer.close(layIndex);
if (Msg.State) {
//启用保存到数据库的按钮
$("#btnSaveImport").prop("disabled", false);
//表格数据重载
tabStudentImport.reload({
url: "SelectSessImportStudent"
});
layer.alert(Msg.Text, { icon: 1, title: "提示" });
}
else {
//清空table
tabStudentImport.reload({
url: '',
data: []
});
layer.alert(Msg.Text, { icon: 0, title: "提示" });
}
});
}
第二步效果：
最后一步要做的就很简单了，把录入的信息导入到数据库就完成了。
//保存导入的Excel表格数据到数据库
function saveImport() {
//打开加载层
var layIndex = layer.load();
//请求保存导入的数据的url
$.post("SaveImport", function (Msg) {
//关闭加载层
layer.close(layIndex);
//关闭模态框
$("#modImportExaminee").modal("hide");
//输出
layer.alert(Msg, { icon: 0, title: "提示" });
//刷新
searchTabStudent();
});
}
导入的数据无论是否成功都会弹出一个提示框，告诉你导入的结果，导入的数据的总条数，重复数据的条数还有新增数据的条数。然后刷新表格，效果如下：