Question

我在一个页面上有四个asp.net网格视图。我使用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上设置一些固定头类来冻结标题吗？

<HeaderStyle CssClass="fixedHeader" />


.fixedHeader
    {
     position: relative;
    }

有更简单的方法吗？我需要将所有网格视图分开，并且不能对所有网格视图使用滚动条。此外，滚动条需要位于其自己的div上，因为用户可以根据需要隐藏gridviews。

使用一个滚动条（滑块）修复多个网格视图的标题

0 个答案: