easyui datagrid 弹出窗口空白的解决方法

0 0

easyui datagrid 弹出窗口空白的解决方法5

我的主页面,代码如下：

//添加数据弹出窗口
$(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');
				 
};

<!-- 弹出窗口：添加数据 -->
<div id="addData-window" title="添加数据" style="width:510px;height:300px;font-size: 16">
</div>

效果图为：
主页面代码

第一个弹出窗口代码为：

<%@ 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="<%=basePath%>">

<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">&nbsp;</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>&nbsp;&nbsp;&nbsp;&nbsp;
				<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>

效果图如下：

第一个弹出窗口

第二个弹出窗口代码为：

<%@ 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='${basePath}'>
		<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">
		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',
				onLoadSuccess: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)">
							&nbsp;
						</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显示不出来，请教一下高手这是哪里出问题了？如何解决？
附问题页面：

问题图