• 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>
  • 相关阅读:
    作业要求 20181127-2 每周例行报告
    作业要求 20181120-1 每周例行报告
    作业要求 20181113-2 每周例行报告
    作业要求 20181030-4 每周例行报告
    作业要求 20181023-3 每周例行报告
    20181016-10 每周例行报告
    20181009-9每周例行报告
    jQuery
    AJAX
    Maven和Solr简单总结
  • 原文地址:https://www.cnblogs.com/22MM/p/10278239.html
Copyright © 2020-2023  润新知