ajaxForm excel导入
程序员文章站
2024-01-03 19:42:46
...
form表单提交有ajaxForm和ajaxSubmit两种方式,这里采用的是ajaxForm。
这两种方法的区别
这两种方法主要的却别是ajaxForm不能主动提交form,函数只是为提交表单做准备需要以submit来触发提交。而ajaxSubmit会主动提交表单,同时可以在点击其他按钮时也可以触发提交,不一定是submit按钮。
html
<div class="dropdown" style="display: inline-block">
<button class="btn btn-default btn-sm btn-flat dropdown-toggle" type="button"
id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="true">更多操作<span class="caret"></span></button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu">
<li>
<a href="#" data-toggle="modal" data-target="#ExportInExcel">Excel导入</a>
</li>
<li>
<a href="#" onclick="exportOutExcel(1)">Excel导出</a>
</li>
<li>
<a href="#" onclick="exportOutExcel(0)">模板导出</a>
</li>
</ul>
</div>
<div id="ExportInExcel" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div text-right style="margin-top: 10px">
<div class="col-sm-3 text-left">
<h4 class="modal-title">Excel导入</h4>
</div>
</div>
</div>
<div class="modal-body text-right">
<form id="upload" name="upload" enctype="multipart/form-data">
<div id="product_show" class="form-group" style="margin-top: 10px">
<input type="hidden" name="path" value="product">
<input type="hidden" name="FileName" value="product.xls">
<div class="col-sm-3 text-right">
<label for="product_show" class="control-label"><span
class="required">*</span> 请选择文件</label>
</div>
<div class="col-sm-9 text-left">
<input type="file" accept="application/vnd.ms-excel" id="file" name="file"
class="form-control inputBox file"
style="padding-left: 0px;padding-top: 0px;">
</div>
</div>
<button class="btn btn-primary btn-flat" onclick="return pulimportExcel(ExportInExcel,'file','#ExportInExcel')">导入</button>
<button type="button" class="btn btn-default btn-flat" data-dismiss="modal">关闭</button>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/static/zutai/mach_detail/js/jquery.form.js"></script>
js
//导入数据至项目
function ExportInExcel() {
$("input[name='path']").val('product');
$("input[name='FileName']").val('product.xls');
$('#upload').ajaxForm({
url: '/Upload',
type: 'post',
beforeSerialize: function () {
},
beforeSubmit: function () {
},
success: function () {
ExportExcelIn();
// location.reload();
},
error: function () {
},
dataType: null,
clearForm: true,
restForm: true,
timeout: 6000
}).submit(function (event) {
})
}
//导入数据至后台(ajax 传给后端, 可自己写)
var ExportExcelIn = function () {
var Params = [["rname", "i_plc.Page.apss.product.exportInExcel"]];
LoadJson(function (ret) {
//按钮元素权限控制
if(!PermissionIsExit(ret)){
$('#ExportInExcel').modal('hide');
$.MessageBox.diyconfirm('提示:', '你无此操作权限, 请升级你的角色的等级,谢谢!', null);
return;
}
if (ret[0].id == "success") {
debugger
if(ret[0].error.haserror){
dealexcelerror(ret,'#ExportInExcel')
}else{
$('#ExportInExcel').modal('hide');
$.MessageBox.notify('info', '数据导入成功!');
onchange1()
}
} else {
$('#ExportInExcel').modal('hide');
$.MessageBox.notify('info', '数据连接失败')
}
}, Params, 'post', null, false);
}
注意: js里的两行
$("input[name='path']").val('product');
$("input[name='FileName']").val('product.xls');
主要是用来保存excel的路径和文件名