ie6 easyui tab组件下滚动 datagrid不会滚动bug

最新推荐文章于 2021-04-01 00:58:32 发布

原创最新推荐文章于 2021-04-01 00:58:32 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ie6 #easyui #datagrid #bug #源码

本文介绍了一个使用 EasyUI 开发的 Demo 中遇到的 IE6 浏览器下 Datagrid 组件的 Bug 及其解决方案。Bug 的产生与 datagrid 的 position 属性及外层容器的 overflow 属性有关，导致 datagrid 在滚动时不随滚动条移动。通过调整 datagrid 的样式，最终解决了此问题。

这是用easyui库来开发的Demo:

<script type="text/javascript">
	$(function(){
		$('#gridPunishApprovalAddBasis').datagrid({
			method: 'get',
			url: '',
			rownumbers: true,
			singleSelect: false,
			striped: true,
			width: 520,
			height: 200,
			fitColumns: true,
			columns: [[
			    {field:'ck',checkbox:true},
		        {field:'INNERIDT',title:'ID',hidden:true},
		        {field:'VIOLATIONCONTENT',title:'a', width: 200},
		        {field:'PUNISHDUTYSTANDARD',title:'b', width: 200},
		        {field:'PUNISHLEADERSTANDARD',title:'c', width: 200}
			]]
		});
	});
	</script>

<div style="width:800px;height:200px;position:relative;overflow:auto;">
		<div style="">
		
			<br>
			<br>
			<br>
			<br>
			<br>
			   <table id="gridPunishApprovalAddBasis"  toolbar="#gridPunishApprovalAddBasisTb" class="assessmentPunishChildTable"></table>
	  	</div>
	</div>

进过组件的初始化后，

id=gridPunishApprovalAddBasis的table 的position是relative 状态！

IE6 这个Bug 产生的条件:
1.position:relative
2.被overflow:auto/scroll属性的块级元素包含
产生的后果：
position会变成absolutely 状态，也就是这个元素会定在那里，不会跟着滚动条滚动！

因此从这两个方面进行解决！
1.设置easyui datagrid 的源码样式将 postion 改成默认的！（ps：纳尼！改源码，这不太靠谱）
2.overflow不设置成auto/scroll （ps：这不行的呀，肯定是要有滚动条的啊）
最后解决方案
一，tab组件中用iframe 来嵌套 datagrid（这样改会付出很大的代价）
二，就像上的代码加上样式

position:relative;
完美解决！！！！（ps:你问我为什么这样写就好使了？我TM的也想知道啊！！！！没文化，太可怕啊）

ie6 easyui tab组件下 滚动 datagrid不会滚动bug

ie6 easyui tab组件下滚动 datagrid不会滚动bug