如何冻结DataGrid的特定列

今天上网找了好久，用了个笨方法，css来实现，据说VS 2005 dataview就可以，可惜小弟还苦苦使用vs 2003

现在把我的方法分享下

第一步：添加datagrid的itembound事件

选择需要冻结列的css样式

 

//冻结前7列
            e.Item.Cells[0].CssClass = "locked";
            e.Item.Cells[1].CssClass = "locked";
            e.Item.Cells[2].CssClass = "locked";
            e.Item.Cells[3].CssClass = "locked";
            e.Item.Cells[4].CssClass = "locked";
            e.Item.Cells[5].CssClass = "locked";
            e.Item.Cells[6].CssClass = "locked";

第二步 ：将datagrid放在一个固定列宽的Div中

 

<DIV id="div-datagrid">
                                <asp:datagrid id="myDataGrid" runat="server" AutoGenerateColumns="False" UseAccessibleHeader="True">
                                    <AlternatingItemStyle CssClass="GridItem"></AlternatingItemStyle>
                                    <ItemStyle CssClass="GridItem"></ItemStyle>
                                    <HeaderStyle CssClass="GridHeader"></HeaderStyle>
                                    <Columns>
<asp:TemplateColumn HeaderText="客户名称">
                                            <HeaderStyle ForeColor="Black"></HeaderStyle>
                                            <ItemTemplate>
                                                <asp:Label id="labCustName" runat="server" Width="128px">Label</asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateColumn>
                                        <asp:TemplateColumn HeaderText="寸别">
                                            <HeaderStyle ForeColor="Black"></HeaderStyle>
                                            <ItemTemplate>
                                                <asp:Label id="labMeasName" runat="server" Width="61px">Label</asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateColumn>
                                        <asp:TemplateColumn HeaderText="客户厂别">
                                            <HeaderStyle ForeColor="Black"></HeaderStyle>
                                            <ItemTemplate>
                                                <FONT face="宋体">
                                                    <asp:DropDownList id="dropCustFactory" runat="server" AutoPostBack="True" OnSelectedIndexChanged="dropCustFactory_SelectedIndexChanged"></asp:DropDownList></FONT>
                                            </ItemTemplate>
                                        </asp:TemplateColumn>
                                        <asp:TemplateColumn HeaderText="客户Model Name">
                                            <HeaderStyle ForeColor="Black"></HeaderStyle>
                                            <ItemTemplate>
                                                <asp:Label id="labCustmdName" runat="server">Label</asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateColumn>
                                        <asp:TemplateColumn HeaderText="客户料号">
                                            <HeaderStyle ForeColor="Black"></HeaderStyle>
                                            <ItemTemplate>
                                                <asp:Label id="labCustPN1" runat="server">Label</asp:Label>
                                                <HR>
                                                <asp:Label id="labCustPN2" runat="server">Label</asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateColumn>
                                        <asp:TemplateColumn HeaderText="达信料号">
                                            <HeaderStyle ForeColor="Black"></HeaderStyle>
                                            <ItemTemplate>
                                                <asp:DropDownList id="dropPartNo1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="dropPartNo1_SelectedIndexChanged"></asp:DropDownList>
                                                <HR>
                                                <asp:Label id="labPartNo2" runat="server"></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateColumn>
                                        <asp:TemplateColumn>
                                            <HeaderStyle ForeColor="Black"></HeaderStyle>
                                            <ItemTemplate>
                                                <asp:Label id="noname" Width="39px" Runat="server">P</asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateColumn>
</Columns>
                                    <PagerStyle Visible="False" Mode="NumericPages"></PagerStyle>
                                </asp:datagrid>
                                                            </DIV>

 

第三步：引用样式表代码

 

/**//*冻结列*/
/**//* Div container to wrap the datagrid */
div#div-datagrid {...}{
width: 1024px;
height:auto;
overflow-x: auto;
overflow-y:hidden;
scrollbar-base-color:#ffeaff;


}

/**//* Locks the left column */
td.locked, th.locked {...}{



position:relative;
cursor: default; 
left: expression(document.getElementById("div-datagrid").scrollLeft); /**//*IE5+ only*/
}    

/**//* Locks table header */
th {...}{

position:relative;
cursor: default; 
top: expression(document.getElementById("div-datagrid").scrollTop-6); /**//*IE5+ only*/
z-index: 10;
}

/**//* Keeps the header as the top most item. Important for top left item*/
th.locked {...}{z-index: 99;}

 

最后实现效果，大家可以试试，有问题可以联系我，谢谢