先前也做过下载和导入,也在先前的博客中写过,不过技术总在更新,现在发现一个也挺好用,页面效果,后台操作也很方便的方法。
项目框架说明:
- 前端用的是模块化框架MOY
- 后台是ssm框架整合doubbo,redis,rabbitmq等。集成maven
1.页面效果
:
对应html部分:
<div class="asset-import person-import common-import">
<div class="modal" id="importModal" role="dialog" aria-labelledby="importModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4>导入编制数</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" data-bind="click:events.close">×</span>
</button>
</div>
<div class="modal-body">
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div class="import-second">
<div class="second-up">
<span class="pull-left">请下载模板:</span>
<div class="pull-left person-download person-red">
<span>编制数导入模板(点击下载)</span>
<div class="down-progress">
<i class="fa fa-check"></i>
</div>
</div>
</div>
<div class="second-down clearfix margin-left-0">
<span class="pull-left">请选择要导入的文件:</span>
<input type="file" onchange="importf(this)" id="importInput"/>
</div>
</div>
<div class="modal-btn">
<button href="#myCarousel" data-bind="click:events.importData" class="modal-button1 modal-sure">确定导入</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
对应的页面js:
1.绑定下载动作
/*编制数点击下载,下载进度条*/
$('.person-download').on('click', function () {
if ($(this).hasClass('person-red')) {
$(this).removeClass('person-red').addClass('person-green');
$(this).find('.down-progress').show();
$(this).find('span').hide();
$(this).find('.down-progress').animate({width: '170px'}, 800, function () {
setTimeout(function () {
var form=$("<form>");//定义一个form表单
form.attr("style","display:none");
form.attr("target","");
form.attr("method","get");
form.attr("action", ctrlBathPath+'/downloadTemplate');
$("body").append(form);//将表单放置在web中
form.submit();//表单提交
$('.person-download span').text('编制数导入模板(已下载)').show();
$('.down-progress').hide();
}, 500);
});
}
});
2.浏览文件和解析
/*导入初始化弹出框*/
importFunInit: function() {
$('#importModal').modal('show')
},
/*解析上传的Excel数据,并把数据放到model中。*/
resolveExcel:function(arrs) {
viewModel.importDataTable.clear();
if(!arrs || arrs.length < 2) {
return false;
}
var length = arrs.length;
var datas = [];
var date=new Date;
var year=date.getFullYear();
for(var i = 1; i < length; i++) {
/*i=1 对应第一行为标题*/
var data = {};
data.assetTypeCode=arrs[i][0] || '';
data.allocationNum=arrs[i][1] || '';
data.orgId = orgId;
data.budgetYear=year;
datas.push(data);
}
viewModel.importDataTable.setSimpleData(datas);
},
/*校验上传的数据*/
validateImportData:function(datas) {
if(!datas || datas.length == 0) {
u.showMessage({msg: "请选择上传文件",msgType: "warning"});
return false
}
return true
},
3.导入动作
/*上传数据*/
importData:function() {
var datas = viewModel.importDataTable.getSimpleData()
if(viewModel.events.validateImportData(datas)) {
if(importFlag) {
importFlag = false;
}
$.ajax({
type : 'POST',
url : ctrlBathPath+'/importData',
data: JSON.stringify(datas),
dataType : 'json',
m_meta: m_meta,
contentType:'application/json',
success:function(result){
if(result.flag == 'SUCCESS'){
u.showMessage({msg: result.errorMsg,msgType: "success"});
$('#importModal').modal('hide');
viewModel.events.selectAllocationCompanys();
} else {
u.showMessage({msg:result.errorMsg, msgType:"error"});
}
},
complete:function(){
importFlag = true
viewModel.importDataTable.setSimpleData([]);
$("#importInput").val("");
}
})
}
},
后台controller层:
/**
* 编制数模版下载
* @param request
* @param response
*/
@RequestMapping(value = "/downloadTemplate", method = RequestMethod.GET)
@ResponseBody
public void downloadTemplate(HttpServletRequest request, HttpServletResponse response) {
OutputStream out = null;
try {
String fileName = "编制数导入模板.xls";
// 设置文件MIME类型
response.setContentType("application/ms-excel");//application/octet-stream
// 设置Content-Disposition
response.setHeader("Content-Disposition", "attachment;filename=" + new String(fileName.getBytes("gb2312"), "ISO-8859-1"));
out = response.getOutputStream();
generateTemplate(out);
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (out != null) {
out.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
}
/**
* 生成导入模板:我这个模版就两列--"编码","a数量"
* @param out
* @throws IOException
*/
public void generateTemplate(OutputStream out) throws IOException {
HSSFWorkbook wb = new HSSFWorkbook();
HSSFSheet sheet = wb.createSheet("a数");
HSSFRow row = sheet.createRow(0);
HSSFCellStyle style = wb.createCellStyle();
style.setAlignment(HSSFCellStyle.ALIGN_CENTER);
//标题
String[] titles = {"编码","数量"};
for(int i = 0; i < titles.length; i++) {
HSSFCell cell = row.createCell(i);
if(cell.getCellType() != -1) {
cell.setCellType(HSSFCell.CELL_TYPE_STRING);
}
HSSFCellStyle cellStyle = wb.createCellStyle();
HSSFDataFormat format = wb.createDataFormat();
cellStyle.setDataFormat(format.getFormat("@"));
cell.setCellStyle(cellStyle);
cell.setCellValue(titles[i]);
cell.setCellType(HSSFCell.CELL_TYPE_STRING);
}
wb.write(out);
out.flush();
out.close();
}
/**
* 导入数据
* @param list
* @return
*/
@RequestMapping(value="/importData", method={RequestMethod.POST})
@ResponseBody
public Map<String, Object> importData(@RequestBody List<AllocationCompany> list) {
Map<String, Object> map = new HashMap<String, Object>();
Map<String, Object> validateMap = new HashMap<String, Object>();
try {
validateMap = validateImportParam(list);//参数校验
} catch (Exception e) {
logger.error("编制数导入数据校验时出现异常:", e);
map.put("flag", RESULTFLAGS.ERROR.toString());
map.put("errorMsg", "参数校验出现异常,请检查数据是否正确!");
return map;
}
if(validateMap == null) {
map.put("flag", RESULTFLAGS.ERROR.toString());
map.put("errorMsg", "参数校验出现异常,请检查数据是否正确");
return map;
}
String flag = (String) validateMap.get("flag");
if("SUCCESS".equals(flag)) {
/*全部校验成功,才执行。如果在有的成功,有的失败的情况下执行了校验通过的部分,这样不利于导入人员区分那些执行过了,那些没执行过。*/
@SuppressWarnings("unchecked")
List<AllocationCompany> importList = (List<AllocationCompany>) validateMap.get("importList");
try {
allocationCompanyService.batchInsert(importList);
} catch (Exception e) {
logger.error("编制数往数据库插入数据时出现异常,", e);
map.put("flag", RESULTFLAGS.ERROR.toString());
map.put("errorMsg", "往数据库插入数据时出现异常!");
return map;
}
map.put("flag", RESULTFLAGS.SUCCESS.toString());
map.put("errorMsg", "导入成功,共导入[" + importList.size() + "]条数据");
return map;
}else{
/*有一个校验失败,则返回错误提示,不在执行*/
return validateMap;
}
}
对应校验的方法:
/**
* 导入参数校验
* @param list
*/
private Map<String, Object> validateImportParam(List<AllocationCompany> list) throws Exception{
Map<String, Object> map = new HashMap<String, Object>();
if(list == null || list.size() == 0) {
map.put("flag", RESULTFLAGS.ERROR.toString());
map.put("errorMsg", "导入数据为空,请重新上传导入模板");
return map;
}
。。。
return map;
}