首页 > 代码库 > easyui datagrid 弹出窗口空白的解决方法
easyui datagrid 弹出窗口空白的解决方法
我的主页面,代码如下：
Javascript代码
//添加数据弹出窗口$(function(){ addDataWin = $(‘#addData-window‘).window({ href:‘${basePath}/page/marketPlat2/addData/addData.jsp?workId=${workId}year=${year}&month=${month} &quarter=${quarter}&businessType=${businessType}&type=${type}‘, title:‘添加数据‘, left:‘100px‘, top:‘70px‘, closed: true, modal: false, cache: false, minimizable:false, maximizable:false, collapsible:false, shadow: false });//添加数据弹出窗口 function addData(){ addDataWin.window(‘open‘); }}//这里只插入了一个datagrid的部分代码，就是点击这个按钮，就会新调用addData()方法；{ id:‘add‘, text:‘新增‘, iconCls:‘icon-add‘, handler:addData} //关闭弹出窗口function closeWin(myWin) { myWin.window(‘close‘); };
Html代码
<!-- 弹出窗口：添加数据 --><div id="addData-window" title="添加数据" style="width:510px;height:300px;font-size: 16"></div>
效果图为： 
第一个弹出窗口代码为：
Html代码
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; response.setHeader("Cache-Control", "no store");//HTTP 1.1 response.setHeader("Pragma", "no store");//HTTP 1.0 response.setDateHeader("Expires", 0);//在代理服务器端防止缓冲 request.setAttribute("workId", request.getParameter("workId"));//yearwork表中的 request.setAttribute("year", request.getParameter("year"));//年 request.setAttribute("month", request.getParameter("month"));//月 request.setAttribute("querter", request.getParameter("quarter"));//季 request.setAttribute("businessType", request.getParameter("businessType"));//任务类型 （周1 年3 季2 月0） request.setAttribute("type", request.getParameter("type"));%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="http://www.mamicode.com/"><title>添加数据</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><script type="text/javascript"> $(function(){ $(‘#btn-save,#btn-close-save,#serchCustomList,#seachProductList‘).linkbutton(); customobjWin=$(‘#customobj-window‘).window({ href:‘${basePath}/page/marketPlat2/addData/seachCustomobj_list.jsp?‘, title:‘选择客户单位‘, closed: true, minimizable:false, maximizable:false, collapsible:false, cache:false, shadow:false }); productWin=$(‘#product-window‘).window({ href:‘${basePath}/page/marketPlat2/addData/seachProduct_list.jsp?&type=${type}‘, title:‘选择产品‘, closed: true, minimizable:false, collapsible:false, maximizable:false, cache:false, shadow:false }); }); //选择客户单位弹出窗口 function seachCustomobj(){ customobjWin.window(‘open‘); } //给客户单位文本框和隐藏域赋值 function setCustomobjName(customOBJ){ $(‘#seachCustomobjId‘).val(customOBJ.customobjId); var s =$(‘#seachCustomobjId‘).val(); $(‘#seachCustomobjName‘).val(customOBJ.customobjName); } //给产品文本框和隐藏域赋值 function setProductName(productOBJ){ $(‘#seachProductId‘).val(productOBJ.productId); $(‘#seachProductName‘).val(productOBJ.productName); } //关闭客户单位弹出窗口 function closeCustomWin(){ customobjWin.window(‘close‘); } //关闭产品弹出窗口 function closeProductWin(){ productWin.window(‘close‘); } //选择产品弹出窗口 function seachProduct(){ var customobjId = $(‘#seachCustomobjId‘).val(); if(customobjId==""||customobjId==null){ alert("请选择客户单位"); return false; }else{ productWin.window(‘open‘); } }</script></head><body> <div style="padding: 10px 10px 10px 10px;"> <form method="poxt"> <table > <tr> <td width="30%">请选择客户单位：</td> <td width="50%"> <input type="hidden" id="seachCustomobjId" name="seachCustomobjId" /> <input type="text" name="seachCustomobjName" id="seachCustomobjName" readonly="readonly" class="easyui-validatebox" required="true" missingMessage="请选择客户单位名称" style="width:200px"></input> <td> <td width="20%"><a href="javascript:void(0)" onclick="seachCustomobj()" id="serchCustomList" icon="icon-search">选择</a></td> </tr> <tr><td colspan="3"> </td></tr> <tr> <td>请选择产品：</td> <td> <input type="hidden" id="seachProductId" name="seachProductId" /> <input type="text" name="seachProductName" id="seachProductName" readonly="readonly" class="easyui-validatebox" required="true" missingMessage="请选择产品名称" style="width:200px"></input> <td> <td ><a href="javascript:void(0)" onclick="seachProduct()" id="seachProductList" icon="icon-search">选择</a></td> </tr> </table> </form> </div> <div style="text-align: center; padding: 5px;"> <a href="javascript:void(0)" onclick="saveAddData()" id="btn-save" icon="icon-save">保存</a> <a href="javascript:void(0)" onclick="closeWin(addDataWin)" id="btn-close-save" icon="icon-cancel">取消</a> </div> </table> <!-- 2期新增数据功能之选择客户单位弹出窗口 --> <div id="customobj-window" class="earyui-window" title="选择客户单位" style="width: 550px; height: 350px; padding: 0px; background:#fafafa; "> <!-- 2期新增数据功能之选择产口弹出窗口 --> <div id="product-window" class="earyui-window" title="选择产品" style="width: 550px; height: 300px; padding: 0px; background:#fafafa; "> </div></body></html>
效果图如下：
第二个弹出窗口代码为：
Html代码
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";response.setHeader("Cache-Control", "no store");//HTTP 1.1 response.setHeader("Pragma", "no store");//HTTP 1.0 response.setDateHeader("Expires", 0);//在代理服务器端防止缓冲%><html> <head> <base href=http://www.mamicode.com/‘${basePath}‘>"Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> <META HTTP-EQUIV="Expires" CONTENT="0"> <script type="text/javascript"> var customOBJ; $(function(){ $(‘#btn-search,#btn-save‘,‘#product-search1‘).linkbutton(); $(‘#customobjList‘).datagrid({ width:500, height:200, pageSize:5, pageList:[5,15,20,25,30,35,40], singleSelect:true, nowrap:false, url:‘${basePath}/marketPlat/addDataServlet?method=seachOwnCustomobj‘, onl oadSuccess:function(data){ //alert(data.rows.length); }, onDblClickRow:function(rowIndex, rowData){ customOBJ=new Object(); customOBJ.customobjId=rowData.customObjId; customOBJ.customobjName=rowData.name; setCustomobjName(customOBJ); closeCustomWin(); }, columns:[[ {field:‘name‘,title:‘客户单位全称‘,width:180,align:‘left‘, formatter:function(value,rowData,rowIndex){ //alert(value); return value; } }, {field:‘industry‘,title:‘所属行业‘,width:150,align:‘center‘}, {field:‘regionType‘,title:‘客户类别‘,width:150,align:‘center‘} ]], pagination:true }); }) ; function searchCustomobj(){ var customobjName = $(‘#customobjName‘).val(); var queryParams = $(‘#customobjList‘).datagrid(‘options‘).queryParams; queryParams.seachCustomobjName=customobjName; $(‘#customobjList‘).datagrid(‘reload‘); } </script> </head> <body> <div> <form id="customForm" method="post"> <table height="100%" cellspacing="0" cellpadding="0" width="100%" border="0"> <tr> <td style="background-image: url(images/main_ls.gif)"> </td> <td style="padding-right: 10px; padding-left: 10px; padding-bottom: 10px; color: #566984; padding-top: 10px; background-color: white" valign="top" align="left"> 客户单位名称：<input type="text" id="customobjName" width="150px" height="30" value="" /> <a href="javascript:void(0)" onclick="searchCustomobj();" class="easyui-linkbutton" id="btn-search" icon="icon-search">查询</a> </td> <td style="background-image: url(images/main_rs.gif)"></td> </tr> <tr> <td style="background-image: url(images/main_ls.gif)"> </td> <td style="padding-right: 10px; padding-left: 10px; padding-bottom: 10px; color: #566984; padding-top: 10px; background-color: white" valign="top" align="left"> <div> <table id="customobjList" border="1"></table> </div> </td> <td style="background-image: url(images/main_rs.gif)"></td> </tr> </table> </form> </div> </body></html>
效果图为：
正常操作步骤：
1、点击新增按钮时（第一个图片），
2、打开第一个弹出窗口“添加数据弹出窗口”（第二个图片），
3、当我在添加数据弹出窗口中点击“查询”按钮时，弹出第二个弹出窗口，查询出数据显示出来（第三个图片）；
现在问题是：
如果我按上面顺序打开后，没有做任何操作，再关闭2、3步骤的弹出窗口，再重复上面1－3的步骤时，第3步的页面打开没有数据，直接显示空白，如果把主页面刷新一下，又正常了，但是打开第一层、第二层弹出窗口,再关闭，然后再点击新增按钮，再加开第一层弹出窗口，没有任务问题，打开第二层弹出窗口后，又出现空白。
我查看了一下，没有缓存，而且第3步的datagrid方法也在后台debug调用了，打开第二层弹出窗口时，后台的方法也有执行，也有返回json字符串数组，在第3步的页面jsp中我也alert()打印过了，都有数据，就是table显示不出来，请教一下高手这是哪 里出问题了？如何解决？
附问题页面：
easyui datagrid 弹出窗口空白的解决方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。