動態使表頭和某一列固定(fixed)--zhuan

效果如下:
Sample Image

<DIV class=precollapse id=premain0 style="WIDTH: 100%"><IMG id=preimg0 
style="CURSOR: hand" height=9 src="http://www.codeproject.com/images/minus.gif" 
width
=9 preid="0"> Collapse</DIV><PRE lang=aspnet id=pre0 style="MARGIN-TOP: 0px; DISPLAY: block" nd="32"><div id="div-datagrid">
<asp:DataGrid id="DataGrid1" runat="server" CssClass="Grid" UseAccessibleHeader="True">
    
<AlternatingItemStyle CssClass="GridAltRow"></AlternatingItemStyle>
    
<ItemStyle CssClass="GridRow"></ItemStyle>
    
<Columns>
    
<asp:BoundColumn DataField="Name" HeaderText="Name" 
        ItemStyle-Wrap
="False"></asp:BoundColumn>
    
<asp:BoundColumn DataField="Address" HeaderText="Address" 
        ItemStyle-Wrap
="False"></asp:BoundColumn>
    
<asp:BoundColumn DataField="City" HeaderText="City" 
        ItemStyle-Wrap
="False"></asp:BoundColumn>
    
<asp:BoundColumn DataField="State" HeaderText="State" 
        ItemStyle-Wrap
="False"></asp:BoundColumn>
    
<asp:BoundColumn DataField="Zip" HeaderText="Zip" 
        ItemStyle-Wrap
="False"></asp:BoundColumn>
    
<asp:BoundColumn DataField="Random Babble" 
        HeaderText
="Random Babble" 
        ItemStyle-Wrap
="False"></asp:BoundColumn>
    
</Columns>
</asp:DataGrid>
</div>

css如下:

<style>
    DIV#div-datagrid 
{ OVERFLOW: auto; WIDTH: 420px; SCROLLBAR-BASE-COLOR: #ffeaff; HEIGHT: 200px }
    TD.locked 
{ BORDER-RIGHT: silver 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 14px; ; LEFT: expression(document.getElementById("div-datagrid").scrollLeft-2); CURSOR: default; COLOR: white; POSITION: relative; BACKGROUND-COLOR: navy; TEXT-ALIGN: center }
    TH.locked 
{ BORDER-RIGHT: silver 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 14px; ; LEFT: expression(document.getElementById("div-datagrid").scrollLeft-2); CURSOR: default; COLOR: white; POSITION: relative; BACKGROUND-COLOR: navy; TEXT-ALIGN: center }
    TH 
{ BORDER-RIGHT: silver 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 14px; Z-INDEX: 10; CURSOR: default; COLOR: white; POSITION: relative; ; TOP: expression(document.getElementById("div-datagrid").scrollTop-2); BACKGROUND-COLOR: navy; TEXT-ALIGN: center }
    TH.locked 
{ Z-INDEX: 99 }
    .GridRow 
{ FONT-SIZE: 10pt; COLOR: black; FONT-FAMILY: Arial; HEIGHT: 35px; BACKGROUND-COLOR: #ffffff }
    .GridAltRow 
{ FONT-SIZE: 10pt; COLOR: black; FONT-FAMILY: Arial; HEIGHT: 35px; BACKGROUND-COLOR: #eeeeee }
        </style>

code:

Sub Item_Bound(ByVal sender As Object, ByVal e As DataGridItemEventArgs) _
Handles DataGrid1.ItemDataBound
    e.Item.Cells(0).CssClass = "locked"
End Sub


And to freeze the first two columns, it's just as easy:

Sub Item_Bound(ByVal sender As Object, ByVal e As DataGridItemEventArgs) _
Handles DataGrid1.ItemDataBound
    e.Item.Cells(0).CssClass = "locked"
    e.Item.Cells(1).CssClass = "locked"
End Sub

from:http://www.codeproject.com/aspnet/FreezePaneDatagrid.asp

posted @ 2007-01-16 16:27  Nina  阅读(754)  评论(2编辑  收藏  举报