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

效果如下：

<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