I have one iFrame which include the datagrid in my JSP page, the iFrame will show only by clicking the tab.
The problem is that when I click the Announcement Tab to show the iFrame, the databrid only shows the pagination bar, no records displayed.
When I click the refresh or next page button, the data will display.
I debuged and found that, the datagrid was rendered.
The main page was like below:
<%@ page contentType="text/html; charset=utf-8"%>
<head>
<title>首页</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/StaticResource/jslib/jquery-easyui-1.3.4/jquery-1.8.0.min.js"></script>
<style type="text/css">
.div_style{
width:770px; height:740px;border: 0px solid black;
}
.tabNav_sq{
width:600px; height:42px; margin:0; padding:0;}
.tabNav_sq li{float:left; height:42px;margin-right:5px;}
.tabNav_sq li a{display:block;float:left; width:120px;height:42px; line-height:42px; position:relative; z-index:2;text-align:center;
color:#333;cursor:pointer; border:1px solid #fead21; border-bottom:0; font-weight:bolder; font-size:14px;
border-radius-topleft:5px;
border-radius-topright:5px;
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background: #fff;
background: -moz-linear-gradient(top, #feda98 0%, #fff4e0 100%);/* FF3.6 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feda98), color-stop(100%,#fff4e0));
background: -webkit-linear-gradient(top, #feda98 0%,#fff4e0 100%); /* Chrome 10+, Saf5.1+ */
background: -o-linear-gradient(top, #feda98 0%,#fff4e0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, feda98 0%,#fff4e0 100%);/* IE10 */
background: linear-gradient(top, #feda98 0%,#fff4e0 100%);
behavior:url(../js/ie-css3.htc);
}
</style>
<script>
function show(){
$("#ann").show();
}
</script>
</head>
<body>
<div id="wrapper">
<div class="tpaicWebAlipay fl w800">
<div class="tab_containerfix cb mt15">
<div class="tabNavWrap">
<ul class="tabNav_sq">
<li><a href="javascript:void(0);" ><span>Line data</span></a></li>
<li><a href="javascript:void(0);" onclick="show();"><span>Announcement</span></a></li>
</ul>
</div>
<div style="display:none;">
<div>
</div>
</div>
<div id="ann" class="b-gray lh200 tabCont" style="display:none;">
<div class="div_style">
<iframe id="announcementForm" name="announcementForm" width="100%" height="100%" frameborder="0" scrolling="no"
src="<%=request.getContextPath()%>/system/announcement/home_list.do"></iframe>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
the /system/announcement/home_list.do request will direct to the page like below:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>通知公告</title>
<link rel="stylesheet" type="text/css"
href="<%=request.getContextPath()%>/StaticResource/jslib/jquery-easyui-1.3.4/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="<%=request.getContextPath()%>/StaticResource/jslib/jquery-easyui-1.3.4/themes/icon.css">
<script type="text/javascript"
src="<%=request.getContextPath()%>/StaticResource/jslib/jquery-easyui-1.3.4/jquery-1.8.0.min.js"></script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/StaticResource/jslib/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/StaticResource/jslib/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"
charset="UTF-8"></script>
<script>
$(function(){
$("#dg").datagrid({
width:500,
height:400,
url:'${pageContext.request.contextPath}/system/announcement/list_json.do?',
singleSelect:true,
pageSize:10,
pagination:true,
pageList : [ 10, 20, 30, 40, 50],
loadMsg: 'Loading...,wait！',
columns:[[
{field:'title',title:'title',width:150,align:'center'},
{field:'beginDate',title:'beginDate',width:150,align:'center'},
{field:'endDate',title:'endDate',width:150,align:'center'},
]],
onLoadSuccess:function(e) {
var a = 'aa';
}
});
$('#dg').datagrid('getSelected');
var b = "ccc";
});
</script>
</head>
<body style="width:100%;heighgt:300px;overflow:auto;">
<div>
<div style="position:relative; overflow:auto;">
<table id="dg" title="Announcement Show">
</table>
</div>
</div>
</body>
</html>
All worked perfectly good for chrome, this problem only happened in IE. Can anyone tell me why and the workaround for this.
The result is like below screenshots.
I also found that, when the main page was first loaded, there is no element for $(".datagrid-view2 .datagrid-body"). After I click the "announcement tab", the element for $(".datagrid-view2 .datagrid-body") exists. I wonder why it not display when it exists. And in chrome browser, this element exists when the main page first loaded.
I don't know if it is a bug for EasyUI to handle browser compatibility.
