1

我在一页上有四个 asp.net gridviews。我使用 Jquery 滑块同时滚动所有这些(仅垂直)。如何在滚动时冻结标题行?

我所有的网格都在更新面板中。

每个 gridview 都在 Div 中。这是 div 样式的示例:

<div id="grid1Div" style="overflow-y:hidden;" class="gridHeight">

.gridHeight
{
    height:430px;
}

这是网格样式的示例(所有样式都几乎相似)

<asp:GridView ID="grid1" runat="server" CssClass="exGrid1" AutoGenerateColumns="False" OnRowCreated="grid1_RowCreated" meta:resourcekey="grid1Resource1"  >

.exGrid1 { 
    width: 100%; 
    background-color: #DDE8EE; 
    margin: 0 0 0 0; 
    border: solid 1px #FFFFFF; 
    border-collapse:collapse; 
    color: #666666;
}
.exGrid1 td { 
    padding: 2px; 
    border: solid 1px #FFFFFF; 
    color: #666666/*#000000*/; 
    font-size: 0.8em; 
}
.exGrid1 th { 
    padding: 4px 2px; 
    color: #FFFFFF; 
    background: #76B7E2 url(grd_head.png) repeat-x top; 
    border-left: solid 1px #FFFFFF; 
    font-size: 0.8em; 
}
.exGrid1 .alt { background: #fcfcfc url(grd_alt.png) repeat-x top; }
.exGrid1 .pgr { background: #424242 url(grd_pgr.png) repeat-x top; }
.exGrid1 .pgr table { margin: 5px 0; }
.exGrid1 .pgr td { 
    border-width: 0; 
    padding: 0 6px; 
    border-left: solid 1px #666; 
    font-weight: bold; 
    color: #FFFFFF; 
    line-height: 12px; 
 }   
.exGrid1 .pgr a { color: #666; text-decoration: none; }
.exGrid1 .pgr a:hover { color: #000; text-decoration: none; }

这是我为所有网格设置滚动高度的 Jquery 部分。

function setGridScroll() {
    var scrollPane = $('#divScroll');
    var scrollGrid1 = $('#grid1');
    var scrollGrid2 = $('#grid2');
    var scrollGrid3 = $('#grid3');
    var scrollGrid4 = $('#grid4');

    var scrollMaxHei = $('#grid1')[0].scrollHeight - 230;
    scrollPane.slider({
        orientation: "vertical",
        value: scrollMaxHei-200,
        min: 200,
        max: scrollMaxHei,
        slide: function (event, ui) {
            var setValue = scrollMaxHei - ui.value-200;
            scrollGrid1.scrollTop(setValue);
            scrollGrid3.scrollTop(setValue);
            scrollGrid4.scrollTop(setValue);
            scrollGrid2.scrollTop(setValue);

        }
    });
}

我可以通过在gridview(s)上为我的fixedheader类设置一些东西来冻结标题吗?

<HeaderStyle CssClass="fixedHeader" />


.fixedHeader
    {
     position: relative;
    }

有没有更简单的方法来做到这一点?我需要将所有网格视图分开,并且不能对所有网格视图使用滚动条。此外,滚动条需要位于其自己的 div 上,因为用户可以根据需要隐藏网格视图。

4

0 回答 0