jeecg v3.6.6 excel导入js方法完善

      jeecg v3.6.6 excel通过的导入方法,需要Flash支持,所以自己修改了下。大致思路是创建文件上传窗口公共js方法时,点击上传按钮时出发子页面(上传页面)中隐藏的提交按钮,给隐藏的提交按钮,写一个表单提交方法,从而提交整个表单。

    这个思路中比较麻烦的就是①需要在父级页面中出发iframe页面中的指定按钮 ②关闭上传窗口时刷新父窗体

(方法略差 >_<)先标记,日后慢慢完善。

1、列表页面,触发导入方法

 1 <t:datagrid name="jzyxfkAirportsList" checkbox="true" fitColumns="true" title="机场信息表" actionUrl="jzyxfkAirportsController.do?datagrid" idField="id" 
 2    fit="true" queryMode="group" sortName="id" sortOrder="asc">
 3     <t:dgCol title="自动编号"  field="ref" hidden="true" queryMode="group"  width="120"></t:dgCol>
 4      <t:dgCol title="机场三字代码"  field="id" query="true" queryMode="single"  width="120"></t:dgCol>
 5     <t:dgCol title="国际民航组织代码"  field="icao" hidden="true"   queryMode="group"  width="120"></t:dgCol>
 6      <t:dgCol title="英文名称"  field="name" hidden="true"  queryMode="single" width="120"></t:dgCol>
 7     <t:dgCol title="中文名称"  field="nameZh" query="true" queryMode="single" width="120"></t:dgCol>
 8      <t:dgToolBar title="录入" icon="icon-add" url="jzyxfkAirportsController.do?goUpdate" funname="addbytab"></t:dgToolBar>
 9     <t:dgToolBar title="编辑" icon="icon-edit" url="jzyxfkAirportsController.do?goUpdate" funname="updatebytab"></t:dgToolBar>
10     <t:dgToolBar title="批量删除"  icon="icon-remove" url="jzyxfkAirportsController.do?doBatchDel" funname="deleteALLSelect"></t:dgToolBar>
11     <t:dgToolBar title="查看" icon="icon-search" url="jzyxfkAirportsController.do?goUpdate" funname="detailbytab"></t:dgToolBar>
12     <t:dgToolBar title="导入" icon="icon-put" funname="ImportXls"></t:dgToolBar>
13   </t:datagrid>
14 <script type="text/javascript">
15 //导入
16 function ImportXls() {
17     openuploadwina('Excel导入', 'jzyxfkAirportsController.do?upload', "jzyxfkAirportsList");
18 }
19  </script>

2、创建上传页面窗口js公共方法

 1 function openuploadwina(title, url,name,width, height) {
 2     gridname=name;
 3     $.dialog({
 4         700,
 5         height:400,
 6         content: 'url:'+url,
 7         title:title,
 8         zIndex: getzIndex(),
 9         cache:false,
10         lock : true,  //开启遮罩层
11         opacity : 0.3,
12         button: [
13             {
14                 name: "开始上传",
15                 callback: function(){
16                     var iframe = this.iframe.contentWindow;   //获取iframe对象
17                     $('#subBtn', iframe.document).click();   //点击“开始上传”按钮,触发iframe页面隐藏的提交按钮
18 return false; 19 }, 20 focus: true 21 }, 22 { 23 name: "取消上传", 24 cancel: true, 25 callback: function(){ 26 document.location.reload(); //刷新父级页面,也可以用frameElement.api.opener.location.reload(),但是dialog出现lock : true属性时,会出现出现frameElement.api is undefined的错误
27 28 } 29 } 30 ] 31 }); 32 }

3、Controller方法,跳转到上传页面

 1 /**
 2      * 导入功能跳转
 3      * 
 4      * @return
 5      */
 6     @RequestMapping(params = "upload")
 7     public ModelAndView upload(HttpServletRequest req) {
 8         req.setAttribute("controller_name","jzyxfkAirportsController");
 9         return new ModelAndView("common/upload/pub_excel_upload");
10     }

4、上传页面,点击“开始上传”按钮,触发上传页面隐藏的提交按钮,触发表单提交方法。

<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>通用Excel导入${controller_name}</title>
<t:base type="jquery,easyui,tools"></t:base>
<script type="text/javascript" src="<%=basePath %>/plug-in/Validform/js/Validform_v5.3.1_min_zh-cn.js"></script>
<script type="text/javascript" src="<%=basePath %>/plug-in/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="<%=basePath %>/plug-in/jquery-plugs/form/jquery.form.js"></script>
<script type="text/javascript" src="../../../plug-in/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../../plug-in/easyui/locale/zh-cn.js"></script>
<link rel="stylesheet" href="plug-in/Validform/css/metrole/divfrom.css" type="text/css">
<link rel="stylesheet" href="plug-in/Validform/css/metrole/style.css" type="text/css">
<link rel="stylesheet" href="plug-in/Validform/css/metrole/tablefrom.css" type="text/css">
<style type="text/css">
#steps form button {font-size:14px;margin-left:5px;display: inline-block;}
#path{ font-size:14px;font-weight: bold;}
div.msg{display:none; }
#filediv{max-height:300px;overflow-x:hidden; font-size:13px; line-height: 30px; padding-left: 10px;}
#filediv b i{font-size:14px;}
#filediv i{color:#f97186;font-style:normal;padding: 0px 2px;}
#subBtn{ display: none;}
</style>
<script type="text/javascript">
//提交表单 */
function submitForm(){

var option = { url : '${controller_name}.do?importExcel', type : 'POST', dataType : 'json', beforeSend: function () { load(); }, complete: function () { disLoad(); }, success : function(data) { $(".msg").show(); $("#filediv").html(data.msg); }, error: function(data) { disLoad(); $.messager.alert("提示","请求超时请重试"); } }; $('#formobj').ajaxForm(option); } //弹出加载层 function load() { var div=$("#ldg_lockmask" , parent.document); $(div).css("z-index","99999"); $("<div class="datagrid-mask-msg"></div>").html("导入中,请稍候。。。").appendTo(div).css({ "display": "block" ,"height": "42px","line-height":"42px","text-indent":"2em","width":"159px","background": "#fff url('/plug-in/easyui/themes/metrole/images/loading.gif') no-repeat scroll 5px center","position": "absolute", "left": "40%", "top": "40%" ,"text-align":"center" }); } //取消加载层 function disLoad() { $("#ldg_lockmask" , parent.document).css("z-index","2010"); $("#ldg_lockmask .datagrid-mask-msg" , parent.document).remove(); } function doChoose(evt){ $(evt).parent("div").find("input[type='file']").click(); } function doUpload(){ var files = document.getElementById("uploadFile").files[0]; if (files != null && files != undefined && files != "") { $("#path").html(document.getElementById("uploadFile").value); } else { $.messager.alert("提示","请重新选择文件"); document.selection.empty(); } } </script> </head> <body style="overflow-y: hidden;padding: 0px; margin:0px;" scroll="no"> <div id="steps"> <form action="${controller_name}.do?importExcel" method="post" enctype="multipart/form-data" id="formobj"> <div class="form"> <button type="button" class="btn btn-primary" onclick="doChoose(this)"> <i class="fa fa-plus"></i>选择需要导入的文件 </button> <font id="path"></font> <input type="file" name="files" id="uploadFile" style="display: none;" onchange="doUpload()"> <input type="submit" onclick="submitForm()" value="提交" class="ace_button" id="subBtn"> </div> <div class="msg form"><p id="filediv"></p></div> </form> </div> </body> </html>
原文地址:https://www.cnblogs.com/22MM/p/10278239.html