水平滚动时jqGrid列标题显示变慢答案

【问题标题】：jqGrid column header display slows down when scrolling horizontally水平滚动时jqGrid列标题显示变慢
【发布时间】：2011-06-10 17:58:20
【问题描述】：

我正在使用带有水平滚动条的jqGrid，但是当我使用水平滚动条时，列标题不会与列一起移动。一旦我停止滚动网格就会恢复正常。见附图：

这在 FF (4.0.1) 中发生，但在 IE8 中没有。

这是我使用的网格选项：

width:'800',
shrinkToFit:false,
height: 500,
pager: '#pagerDiv',
gridview: true,
rowNum: 50,
rowTotal: 500,
sortorder: 'desc',
cellEdit: true,
cellsubmit: 'remote',
cellurl: 'MyURL',
beforeSaveCell: 
function (rowid, cellname, value, iRow, iCol) {
    return parse(value);
},
viewrecords: true,
loadComplete: loadCompleteHandler,
ignoreCase: true

....

jQuery(function(){
        jQuery("#listTable").jqGrid('filterToolbar',{
                            stringResult: true,
                            searchOnEnter: false });
    });

我有 jqGrid 版本 3.8.2、jQuery 1.4.4（完整）。有没有办法解决这个问题？

【问题讨论】：

标签： javascript jquery jquery-ui jqgrid

【解决方案1】：

我想这不是 jqGrid 中的错误。您所描述的看起来像是在不同的 Web 浏览器中实现 jQuery.scroll 的不同之处。我会试着解释我为什么这么认为。

要了解问题出在哪里，您应该知道列标题不是同一个 HTML 表格的一部分。在创建时，构建列标题的<th> 元素实际上位于<table> 中，但随后移动到另一个 div 中。所以一直这么命名为hDiv（header div）和bDiv（body div）。有关详细信息，请参阅the answer。此外，表格的 DOM 元素接收一个扩展器（附加属性）grid，它保存不同的附加信息，例如 grid.hDiv - hDiv 的 DOM 元素（标题 div）和 grid.bDiv - bDiv 的 DOM 元素（主体 div )。

现在关于滚动。因为列标题在另一个 div 中，所以滚动是异步的。要使其同步 jqGrid 注册 <table> 元素的 jQuery.scroll 事件处理程序（参见 here）并在相应的事件处理程序 scrollGrid 内部执行以下代码：

grid.hDiv.scrollLeft = grid.bDiv.scrollLeft;

（参见here 行）。因此，在表格上的每个滚动事件上，滚动位置都会同步。

在我看来，您描述的效果似乎是 FF (4.0.1) 仅在您放下滚动框后才会触发 scroll 事件。

【讨论】：