您的位置: 首页  >  文章  >  easyui datagrid 弹出窗口

easyui datagrid 弹出窗口

分类: 文章 • 2022-10-12 09:29:20

我的主页面,代码如下：

Javascript代码  easyui datagrid 弹出窗口
  1. //添加数据弹出窗口  
  2. $(function(){             
  3.     addDataWin = $('#addData-window').window({                    
  4.         href:'${basePath}/page/marketPlat2/addData/addData.jsp?workId=${workId}year=${year}&month=${month}   &quarter=${quarter}&businessType=${businessType}&type=${type}',  
  5.     title:'添加数据',  
  6.     left:'100px',  
  7.     top:'70px',  
  8.     closed: true,  
  9.     modal: false,  
  10.     cache: false,  
  11.     minimizable:false,  
  12.     maximizable:false,  
  13.     collapsible:false,  
  14.     shadow: false  
  15.     });  
  16. //添加数据弹出窗口  
  17.     function addData(){  
  18.         addDataWin.window('open');                       
  19.     }  
  20. }  
  21. //这里只插入了一个datagrid的部分代码，就是点击这个按钮，就会新调用addData()方法；  
  22. {  
  23.     id:'add',  
  24.     text:'新增',  
  25.     iconCls:'icon-add',  
  26.     handler:addData  
  27. }  
  28.  //关闭弹出窗口  
  29. function closeWin(myWin) {  
  30.     myWin.window('close');  
  31.                    
  32. };    

 

Html代码  easyui datagrid 弹出窗口
  1. <!-- 弹出窗口：添加数据 -->  
  2. <div id="addData-window" title="添加数据" style="width:510px;height:300px;font-size: 16">  
  3. </div>  


效果图为： 
easyui datagrid 弹出窗口 

第一个弹出窗口代码为：

Html代码  easyui datagrid 弹出窗口
  1. <%@ page language="java" contentType="text/html; charset=utf-8"  
  2.     pageEncoding="utf-8"%>  
  3. <%  
  4.     String path = request.getContextPath();  
  5.     String basePath = request.getScheme() + "://"  
  6.             + request.getServerName() + ":" + request.getServerPort()  
  7.             + path + "/";  
  8.     response.setHeader("Cache-Control", "no store");//HTTP 1.1   
  9.     response.setHeader("Pragma", "no store");//HTTP 1.0   
  10.     response.setDateHeader("Expires", 0);//在代理服务器端防止缓冲  
  11.       
  12.       
  13.     request.setAttribute("workId", request.getParameter("workId"));//yearwork表中的  
  14.     request.setAttribute("year", request.getParameter("year"));//年  
  15.     request.setAttribute("month", request.getParameter("month"));//月  
  16.     request.setAttribute("querter", request.getParameter("quarter"));//季  
  17.     request.setAttribute("businessType", request.getParameter("businessType"));//任务类型      （周1 年3 季2 月0）  
  18.     request.setAttribute("type", request.getParameter("type"));  
  19. %>  
  20.   
  21. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  22. <html>  
  23. <head>  
  24. <base href="<%=basePath%>">  
  25.   
  26. <title>添加数据</title>  
  27.   
  28. <meta http-equiv="pragma" content="no-cache">  
  29. <meta http-equiv="cache-control" content="no-cache">  
  30. <meta http-equiv="expires" content="0">  
  31. <script type="text/javascript">  
  32.     $(function(){  
  33.         $('#btn-save,#btn-close-save,#serchCustomList,#seachProductList').linkbutton();  
  34.         customobjWin=$('#customobj-window').window({  
  35.             href:'${basePath}/page/marketPlat2/addData/seachCustomobj_list.jsp?',  
  36.             title:'选择客户单位',           
  37.             closed: true,  
  38.             minimizable:false,  
  39.             maximizable:false,    
  40.             collapsible:false,  
  41.             cache:false,  
  42.             shadow:false  
  43.         });  
  44.         productWin=$('#product-window').window({  
  45.             href:'${basePath}/page/marketPlat2/addData/seachProduct_list.jsp?&type=${type}',  
  46.             title:'选择产品',             
  47.             closed: true,  
  48.             minimizable:false,  
  49.             collapsible:false,  
  50.             maximizable:false,    
  51.             cache:false,  
  52.             shadow:false  
  53.         });  
  54.     });  
  55.     //选择客户单位弹出窗口  
  56.     function seachCustomobj(){  
  57.         customobjWin.window('open');  
  58.            
  59.     }  
  60.     //给客户单位文本框和隐藏域赋值  
  61.     function setCustomobjName(customOBJ){  
  62.         $('#seachCustomobjId').val(customOBJ.customobjId);  
  63.         var s =$('#seachCustomobjId').val();  
  64.         $('#seachCustomobjName').val(customOBJ.customobjName);  
  65.     }  
  66.     //给产品文本框和隐藏域赋值  
  67.     function setProductName(productOBJ){  
  68.         $('#seachProductId').val(productOBJ.productId);  
  69.         $('#seachProductName').val(productOBJ.productName);  
  70.     }  
  71.     //关闭客户单位弹出窗口  
  72.     function closeCustomWin(){  
  73.         customobjWin.window('close');  
  74.        
  75.     }  
  76.     //关闭产品弹出窗口  
  77.     function closeProductWin(){  
  78.         productWin.window('close');  
  79.            
  80.     }  
  81.     //选择产品弹出窗口  
  82.     function seachProduct(){  
  83.         var customobjId = $('#seachCustomobjId').val();  
  84.         if(customobjId==""||customobjId==null){  
  85.             alert("请选择客户单位");  
  86.             return false;  
  87.         }else{  
  88.             productWin.window('open');  
  89.         }  
  90.     }  
  91. </script>  
  92. </head>  
  93.   
  94. <body>  
  95.         <div style="padding: 10px 10px 10px 10px;">  
  96.                 <form method="poxt">  
  97.                     <table >  
  98.                         <tr>  
  99.                             <td width="30%">请选择客户单位：</td>  
  100.                             <td width="50%">  
  101.                                 <input type="hidden" id="seachCustomobjId" name="seachCustomobjId" />  
  102.                                 <input type="text" name="seachCustomobjName" id="seachCustomobjName" readonly="readonly"  class="easyui-validatebox"  required="true" missingMessage="请选择客户单位名称" style="width:200px"></input>  
  103.                             <td>  
  104.                             <td width="20%"><a href="javascript:void(0)" onclick="seachCustomobj()"  id="serchCustomList" icon="icon-search">选择</a></td>  
  105.                         </tr>  
  106.                         <tr><td colspan="3">&nbsp;</td></tr>  
  107.                         <tr>  
  108.                             <td>请选择产品：</td>  
  109.                             <td>  
  110.                                 <input type="hidden" id="seachProductId" name="seachProductId" />  
  111.                                 <input type="text" name="seachProductName" id="seachProductName" readonly="readonly"  class="easyui-validatebox"  required="true" missingMessage="请选择产品名称" style="width:200px"></input>  
  112.                             <td>  
  113.                             <td ><a href="javascript:void(0)" onclick="seachProduct()" id="seachProductList" icon="icon-search">选择</a></td>  
  114.                         </tr>  
  115.                     </table>  
  116.                 </form>  
  117.             </div>  
  118.             <div style="text-align: center; padding: 5px;">  
  119.                 <a href="javascript:void(0)" onclick="saveAddData()" id="btn-save" icon="icon-save">保存</a>&nbsp;&nbsp;&nbsp;&nbsp;  
  120.                 <a href="javascript:void(0)" onclick="closeWin(addDataWin)" id="btn-close-save" icon="icon-cancel">取消</a>  
  121.             </div>  
  122.     </table>  
  123.     <!-- 2期新增数据功能之选择客户单位弹出窗口 -->  
  124.         <div id="customobj-window" class="earyui-window" title="选择客户单位" style="width: 550px; height: 350px; padding: 0px; background:#fafafa; ">  
  125.     <!-- 2期新增数据功能之选择产口弹出窗口 -->  
  126.         <div id="product-window" class="earyui-window" title="选择产品" style="width: 550px; height: 300px; padding: 0px; background:#fafafa; ">  
  127.         </div>  
  128. </body>  
  129. </html>  

 

效果图如下：

easyui datagrid 弹出窗口

第二个弹出窗口代码为：

Html代码  easyui datagrid 弹出窗口
  1. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. response.setHeader("Cache-Control", "no store");//HTTP 1.1   
  6. response.setHeader("Pragma", "no store");//HTTP 1.0   
  7. response.setDateHeader("Expires", 0);//在代理服务器端防止缓冲  
  8. %>  
  9. <html>  
  10.     <head>  
  11.         <base href='${basePath}'>  
  12.         <title>选择客户单位</title>  
  13.         <META HTTP-EQUIV="Pragma" CONTENT="no-cache">  
  14.         <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">  
  15.         <META HTTP-EQUIV="Expires" CONTENT="0">  
  16.         <script type="text/javascript">  
  17.         var customOBJ;  
  18.           
  19.         $(function(){     
  20.                         
  21.             $('#btn-search,#btn-save','#product-search1').linkbutton();  
  22.             $('#customobjList').datagrid({     
  23.                 width:500,   
  24.                 height:200,   
  25.                 pageSize:5,  
  26.                 pageList:[5,15,20,25,30,35,40],  
  27.                 singleSelect:true,  
  28.                 nowrap:false,  
  29.                 url:'${basePath}/marketPlat/addDataServlet?method=seachOwnCustomobj',  
  30.                 onLoadSuccess:function(data){  
  31.                     //alert(data.rows.length);  
  32.                 },  
  33.                 onDblClickRow:function(rowIndex, rowData){  
  34.                     customOBJ=new Object();                   
  35.                     customOBJ.customobjId=rowData.customObjId;  
  36.                     customOBJ.customobjName=rowData.name;  
  37.                     setCustomobjName(customOBJ);  
  38.                     closeCustomWin();  
  39.                 },  
  40.                 columns:[[            
  41.                     {field:'name',title:'客户单位全称',width:180,align:'left',  
  42.                         formatter:function(value,rowData,rowIndex){  
  43.                             //alert(value);  
  44.                             return value;  
  45.                         }  
  46.                     },  
  47.                     {field:'industry',title:'所属行业',width:150,align:'center'},  
  48.                     {field:'regionType',title:'客户类别',width:150,align:'center'}  
  49.                 ]],  
  50.                 pagination:true  
  51.             });   
  52.               
  53.         }) ;  
  54.         function searchCustomobj(){  
  55.             var customobjName = $('#customobjName').val();    
  56.             var queryParams = $('#customobjList').datagrid('options').queryParams;  
  57.             queryParams.seachCustomobjName=customobjName;  
  58.             $('#customobjList').datagrid('reload');  
  59.         }  
  60.           
  61.     </script>   
  62.     </head>  
  63.     <body>  
  64.         <div>  
  65.             <form id="customForm" method="post">  
  66.             <table height="100%" cellspacing="0" cellpadding="0" width="100%" border="0">  
  67.               
  68.                     <tr>  
  69.                         <td style="background-image: url(images/main_ls.gif)">  
  70.                                 
  71.                         </td>  
  72.                         <td  
  73.                             style="padding-right: 10px; padding-left: 10px; padding-bottom: 10px; color: #566984; padding-top: 10px; background-color: white"  
  74.                             valign="top" align="left">  
  75.                             客户单位名称：<input type="text" id="customobjName" width="150px" height="30" value="" />  
  76.                             <a href="javascript:void(0)" onclick="searchCustomobj();" class="easyui-linkbutton"  id="btn-search" icon="icon-search">查询</a>  
  77.                         </td>  
  78.                         <td style="background-image: url(images/main_rs.gif)"></td>  
  79.                     </tr>  
  80.                     <tr>  
  81.                         <td style="background-image: url(images/main_ls.gif)">  
  82.                             &nbsp;  
  83.                         </td>  
  84.                         <td  
  85.                             style="padding-right: 10px; padding-left: 10px; padding-bottom: 10px; color: #566984; padding-top: 10px; background-color: white"  
  86.                             valign="top" align="left">  
  87.                             <div>  
  88.                                 <table id="customobjList" border="1"></table>  
  89.                             </div>  
  90.                         </td>  
  91.                         <td style="background-image: url(images/main_rs.gif)"></td>  
  92.                     </tr>  
  93.                   
  94.             </table>  
  95.             </form>  
  96.         </div>  
  97.       
  98.     </body>  
  99. </html>  

 

效果图为：

easyui datagrid 弹出窗口

正常操作步骤：
1、点击新增按钮时（第一个图片），
2、打开第一个弹出窗口“添加数据弹出窗口”（第二个图片），
3、当我在添加数据弹出窗口中点击“查询”按钮时，弹出第二个弹出窗口，查询出数据显示出来（第三个图片）；
现在问题是：
如果我按上面顺序打开后，没有做任何操作，再关闭2、3步骤的弹出窗口，再重复上面1－3的步骤时，第3步的页面打开没有数据，直接显示空白，如果把主页面刷新一下，又正常了，但是打开第一层、第二层弹出窗口,再关闭，然后再点击新增按钮，再加开第一层弹出窗口，没有任务问题，打开第二层弹出窗口后，又出现空白。

我查看了一下，没有缓存，而且第3步的datagrid方法也在后台debug调用了，打开第二层弹出窗口时，后台的方法也有执行，也有返回json字符串数组，在第3步的页面jsp中我也alert()打印过了，都有数据，就是table显示不出来，请教一下高手这是哪 里出问题了？如何解决？
附问题页面：

easyui datagrid 弹出窗口

相关推荐