zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    【算法学习笔记】76.DFS 回溯检测 SJTU OJ 1229 mine
    【算法学习笔记】75. 动态规划 棋盘型 期望计算 1390 畅畅的牙签盒(改)
    【算法学习笔记】74. 枚举 状态压缩 填充方案 SJTU OJ 1391 畅畅的牙签袋(改)
    【算法学习笔记】73.数学规律题 SJTU OJ 1058 小M的机器人
    【算法学习笔记】72.LCS 最大公公子序列 动态规划 SJTU OJ 1065 小M的生物实验1
    【算法学习笔记】71.动态规划 双重条件 SJTU OJ 1124 我把助教团的平均智商拉低了
    【算法学习笔记】70.回文序列 动态规划 SJTU OJ 1066 小M家的牛们
    【算法学习笔记】69. 枚举法 字典序处理 SJTU OJ 1047 The Clocks
    【算法学习笔记】68.枚举 SJTU OJ 1272 写数游戏
    【算法学习笔记】67.状态压缩 DP SJTU OJ 1383 畅畅的牙签袋
  • 原文地址:https://www.cnblogs.com/22MM/p/10278239.html
Copyright © 2011-2022 走看看