Asp.net的DataGrid实现列冻结（C#）

一、写在前面

列冻结即在拖动横向滚动条时，冻结的列会随着滚动条移动，使得该列不会因为拖动滚动条而被隐藏，呈现出仿佛冻结的效果。列冻结与表头冻结是很常见的需求，但是在DataGrid中列冻结并不简单，在网络中寻找一圈后，发展网络给出的方法不是因为太老旧已经无法使用，就是在推荐使用DataGridView控件，所以我想出了一个简单粗暴的方法，用另一张表覆盖原有的表来实现冻结，这也与许多老方法的思路是一致的。

二、DataGrid的列冻结

2.1 思路

使用CSS样式中的position定位属性来使B表覆盖A表，B表不受滚动轴的影响，A表随着滚动轴滚动，从而呈现出B表的列表被冻结的效果。

有了思路可以来写代码了：

<body>

	<div id="div1" style="width: 50%; background-color: aliceblue; height: 500px;  margin: 0 auto">

            <div id="div2" style="position: relative">

                <div id="div3" style="overflow-x: scroll; background-color: azure;">

                    <div id="div4" style="width: 1200px; background-color: burlywood; height: 300px;">

                        假装我是一个表格，假装我是一个表格，假装我是一个表格，假装我是一个表格，假装我是一个表格，假装我是一个表格，假装我是一个表格，假装我是一个表格

                    </div>

                </div>

                <div id="div5" style="position: absolute; height:300px; width:50px; background-color:antiquewhite; top:0px;"></div>

            </div>

        </div>

</body>

代码清单 2-1

Asp.net的DataGrid实现列冻结（C#）-LMLPHP

页面效果 2-1

这里使用了五个div，div5在div2基础上使用绝对定位，实现了对div3的覆盖，之后我们会将div4改为原表格，div5改为覆盖表格。实现效果如“页面效果 2-1”所示，粉色的div5覆盖了褐色的div4，在拖动滚动条时，粉色块不动，褐色块在动，实现了类似列冻结效果。

2.2 实现过程

现在可以将DataGrid添加到div4和div5上了：

<div id="div3" style="overflow-x: scroll; background-color: azure;">

                    <%--<div id="div4" style="width: 1200px; background-color: burlywood; height: 300px;">

                    </div>--%>

                    <asp:DataGrid ID="dg_test" runat="server"

                        AutoGenerateColumns="false" Width="600px">

                        <Columns>

                            <asp:BoundColumn HeaderText="Id" DataField="Id"></asp:BoundColumn>

                            <asp:BoundColumn HeaderText="姓名" DataField="Name"></asp:BoundColumn>

                            <asp:BoundColumn HeaderText="年龄" DataField="Age"></asp:BoundColumn>

                            <asp:BoundColumn HeaderText="就读学校" DataField="School"></asp:BoundColumn>

                            <asp:BoundColumn HeaderText="技能" DataField="Skill"></asp:BoundColumn>

                            <asp:TemplateColumn HeaderText="说明">

                                <ItemTemplate>

                                    <asp:Label ID="lbl_tip" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Tip") %>'></asp:Label>

                                </ItemTemplate>

                            </asp:TemplateColumn>

                            <asp:BoundColumn HeaderText="爱好" DataField="Hobit"></asp:BoundColumn>

                            <asp:BoundColumn HeaderText="地址" DataField="Adress"></asp:BoundColumn>

                            <asp:BoundColumn HeaderText="爱好" DataField="Hobit"></asp:BoundColumn>

                            <asp:BoundColumn HeaderText="地址" DataField="Adress"></asp:BoundColumn>

                            <asp:BoundColumn HeaderText="爱好" DataField="Hobit"></asp:BoundColumn>

                            <asp:BoundColumn HeaderText="地址" DataField="Adress"></asp:BoundColumn>

                            <asp:BoundColumn HeaderText="爱好" DataField="Hobit"></asp:BoundColumn>

                            <asp:BoundColumn HeaderText="地址" DataField="Adress"></asp:BoundColumn>

                        </Columns>

                    </asp:DataGrid>

                </div>

                <div id="div5" style="position: absolute; background-color: antiquewhite; top: 0;">

                    <asp:DataGrid ID="dg_test_cover" runat="server"

                        AutoGenerateColumns="false">

                        <Columns>

                            <asp:BoundColumn HeaderText="Id" DataField="Id"></asp:BoundColumn>

                            <asp:BoundColumn HeaderText="姓名" DataField="Name"></asp:BoundColumn>

                        </Columns>

                    </asp:DataGrid>

                </div>

代码清单 2-2

Asp.net的DataGrid实现列冻结（C#）-LMLPHP

页面效果 2-2