easyui layout datagrid combobox编辑器IE7-下滚动解决办法
easyui使用layout布局，layout中放置datagrid，当datagrid编辑的时候，编辑对象为combobox，在IE7-浏览器下，当datagrid数据行太多出现水平或者垂直滚动条时，拖动滚动条combobox编辑器会随滚动条一起滚动的问题，而不是固定在单元格里面，效果如下
黄色那行为正在编辑的数据行，生成combobox编辑器后，拖动垂直滚动条，combobox编辑器也会一起滚动。（如果编辑器为text，非combobox不会滚动，只有编辑器是combobox时出问题），猜测可能是body设置了easyui-layout（width:100%，height:100%，overflow:hidden，position:overflow），combobox容器为relative定位冲突了。
解决办法：判断如果是IE7-，设置combobox容器定位为static，获取触发按钮添加到body容器中，添加datagrid的滚动事件，动态设置触发下拉选择的按钮位置。
源代码如下
<body class="easyui-layout" oncontextmenu="return false">
<div id="mainPanle" data-options="region:'center'">
<table id="dg" class="easyui-datagrid" data-options="onLoadSuccess:addScrollIfIE7....其他配置">
<th data-options="field:'productid',halign:'center',editor:{type:'combobox',options:{required:true,data:[{'text':'不考虑','value':'-1'},{'text':'答辩','value':'1'},{'text':'调研','value':'2'}]}}" width="100">
初审结果
</th>
....其他column配置
</table></div>
<!------注意这里为什么不判断navigator.userAgent，应为这个值不准，具体看最后的参考------>
<script>if (document.all) document.write('<!--[if lte IE 7]><script type="text/javascript">window.fixIE7= true<\/script><![endif]-->');</script>
<script>
var editIndex = undefined;
function endEditing() {
if (editIndex == undefined) { return true }
if ($('#dg').datagrid('validateRow', editIndex)) {
var ed = $('#dg').datagrid('getEditor', { index: editIndex, field: 'productid' });
var productname = $(ed.target).combobox('getText');
$('#dg').datagrid('getRows')[editIndex]['productname'] = productname;
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
var comboTrigger;
function onClickRow(index) {
if (editIndex != index) {
if (endEditing()) {
$('#dg').datagrid('selectRow', index).datagrid('beginEdit', index);
if (window.fixIE7) {//为IE7-浏览器，需要重新设置过combobox的定位
if (comboTrigger) comboTrigger.remove();
var span = $('#dg').datagrid('getEditor', { index: index, field: 'productid' }).target.next();
span.css({ display: 'block', position: 'static' })/////////设置容器定位为static就不会滚动了，但是会导致下拉箭头跑到其他地方，需要修正
var p = span.offset(), width = span.width();
comboTrigger = span.find('span'); //下拉箭头对象
$(document.body).append(comboTrigger); //添加到body对象中
var data = { left: p.left + width - comboTrigger.width(), top: p.top,display:'block' }
comboTrigger.data('p', data).css(data);
}
editIndex = index;
} else {
$('#dg').datagrid('selectRow', editIndex);
}
}
}
function addScrollIfIE7() {//如果是IE7及以下浏览器添加datagrid内容滚动事件，控制combobox编辑对象的下拉箭头位置
if (window.fixIE7) {
var timer;
$(this).parent().find('div.datagrid-body:last').scroll(function () {
me = this;
if (comboTrigger) {
clearTimeout(timer);
timer = setTimeout(function () {
var data = comboTrigger.data('p'), left = data.left, top = data.top;
left -= me.scrollLeft;
top -= me.scrollTop;
comboTrigger.css({ left: left, top: top });
}, 0);
}
});
}
}
</script>
</body>
加了上面的代码combobox就不会滚动了，但是触发按钮还是会有个闪烁，因为用了计时器，而且是在onscroll中设置的。暂时无解。
相关内容：IE6的navigator.userAgent输出MSIE 7
加支付宝好友偷能量挖...
原创文章，转载请注明出处：easyui layout datagrid combobox编辑器IE7-下滚动解决办法