easyui layout datagrid combobox编辑器IE7-下滚动解决办法

  easyui使用layout布局,layout中放置datagrid,当datagrid编辑的时候,编辑对象为combobox,在IE7-浏览器下,当datagrid数据行太多出现水平或者垂直滚动条时,拖动滚动条combobox编辑器会随滚动条一起滚动的问题,而不是固定在单元格里面,效果如下

easyui layout datagrid combobox编辑器IE7-下滚动解决办法

  黄色那行为正在编辑的数据行,生成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-下滚动解决办法

评论(0)Web开发网
阅读(723)喜欢(0)easyui开发技巧