- 需求:前期只需要Excel导入文件,后期需要添加其他字段。
- 解决方式:前期使用模版的方式进行文件上传(已解决),后续需要追加字段。此处追加字段为日期,我的想法是在之前的基础追加的方式解决。
- layer弹出的方式分为5种(取决于type参数):
TYPE | 备注 |
0 | 信息框(默认) |
1 | 页面层 |
2 | iframe层 |
3 | 加载层 |
4 | tips层 |
解决思路:此处处理的是打开layer后进行初始化日期为当前日期。需要用到的success加载成功后的回调函数进行处理,并且日期还不能直接使用js 中的new date()进行赋值,需要对new Date() 进行组装,然后找到对应的input赋值,
layero.find('#testDate').val(today);
具体实现如下:
<script>
$('#btnExport').click(function(){
js.ajaxSubmitForm($('#searchForm'), {
url:'${ctx}/test/test/exportData',
downloadFile:true
});
});
$('#btnImport').click(function(){
js.layer.open({
type: 1,
area: ['400px'],
title: '${text("导入测试数据")}',
resize: false,
scrollbar: true,
content: js.template('importTpl'),
success:function (layero,index){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
month = (month > 9) ? month : ("0" + month);
day = (day < 10) ? ("0" + day) : day;
var today = year + "-" + month + "-" + day;
layero.find('#testDate').val(today);
},
btn: ['<i class="fa fa-check"></i> ${text("导入")}',
'<i class="fa fa-remove"></i> ${text("关闭")}'],
btn1: function(index, layero){
var form = {
inputForm: layero.find('#inputForm'),
file: layero.find('#file').val(),
testDate:layero.find('#testDate').val(),
};
if (form.testDate == '' ){
js.showMessage("请选择测试日期", null, 'warning');
return false;
}
if (form.file == '' || (!js.endWith(form.file, '.xls') && !js.endWith(form.file, '.xlsx'))){
js.showMessage("${text('文件不正确,请选择后缀为“xls”或“xlsx”的文件。')}", null, 'warning');
return false;
}
js.ajaxSubmitForm(form.inputForm, function(data){
js.showMessage(data.message);
if(data.result == Global.TRUE){
js.layer.closeAll();
}
page();
}, "json");
return true;
}
});
});
</script>
type=1,弹窗使用模版 js.template()
<script id="importTpl" type="text/template">//<!--
<form id="inputForm" action="${ctx}/test/test/importData" method="post" enctype="multipart/form-data"
class="form-horizontal mt20 mb10" style="overflow:auto;max-height:200px;">
<div class="">
<div style="display: flex;flex-direction: column;justify-content: center;align-items: center">
<div style="width:360px">
<span class="" style="color:red">*</span> 测试日期:<input id="testDate" name="testDate" type="date" maxlength="64" class="form-control " style="margin: 0px 0px 15px 0px;"/>
<input type="file" id="file" name="file" class="form-file"/>
</div>
<div class="mt10 pt5" style="color:red">
${text('提示:仅允许导入“xls”或“xlsx”格式文件!')}
</div>
</div>
</div>
</form>
//-->
</script>
后台
/**
* 导入数据
*/
@PostMapping(value = "importData")
public String importData(MultipartFile file, Date testDate) {
try {
//进行逻辑操作
return "";
} catch (Exception ex) {
return "";
}
}