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

页面效果 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

页面效果 2-2

Asp.net的DataGrid实现列冻结（C#）的更多相关文章

  1. WPF 中获取DataGrid 模板列中控件的对像

    WPF 中获取DataGrid 模板列中控件的对像 #region 当前选定行的TextBox获得焦点 /// <summary> /// 当前选定行的TextBox获得焦点 /// &l ...

  2. easyui datagrid的列编辑

    [第十五篇]easyui datagrid的列编辑,同时插入两张表的数据进去   看图说话. 需求:插入两张表,上面的表单是第一张表的内容,下面的两个表格是第二张详情表的内容,跟第一张表的id关联 第 ...

  3. WPF DataGrid 操作列 类似 LinkButton

    WPF中没有类似LinkButton,所以只有运用Button及样式来实现LinkButton. DataGrid 操作列 实现 多个类似LinkButton按钮: 具体实现代码如下: <Dat ...

  4. WPF 用 DataTemplate 合并DataGrid列表列头<类似报表设计>及行头列头样式 - 学习

    WPF中 DataGrid 列头合并,类似于报表设计.效果图如下↓ 1.新建一个WPF项目WpfApplication1,新建一个窗体DataGridTest,前台代码如下: <Window x ...

  5. WPF DataGrid某列使用多绑定后该列排序失效，列上加入 SortMemberPath 设置即可.

    WPF DataGrid某列使用多绑定后该列排序失效 2011-07-14 10:59hdongq | 浏览 1031 次  悬赏:20 在wpf的datagrid中某一列使用了多绑定,但是该列排序失 ...

  6. ASP.NET repeater添加序号列的方法

    ASP.NET repeater添加序号列的方法 1.<itemtemplate> <tr><td> <%# Container.ItemIndex + 1% ...

  7. ASP.NET中重复表格列合并的实现方法(转自脚本之家)

    这几天做一个项目有用到表格显示数据的地方,客户要求重复的数据列需要合并,就总结了一下.NET控件GridView 和 Repeater 关于重复数据合并的方法. 这是合并之前的效果: 合并之后的效果图 ...

  8. DataGrid的列上添加日期控件

    今天的使用EasyUI datagrid的时候,遇到了如下问题,如下图:

  9. WPF DATAGrid 空白列 后台绑定列 处理

    原文:WPF DATAGrid 空白列 后台绑定列 处理 AutoGenerateColumns <DataGrid x:Name="dataGrid" Margin=&qu ...

随机推荐

  1. Gradle 学习二

    按照本指南,您将创建一个简单的Gradle项目,调用一些基本的Gradle命令,并了解Gradle如何管理项目 1.初始化项目创建项目目录 ❯ mkdir basic-demo ❯ cd basic- ...

  2. Js 运行机制和Event Loop

    一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Java ...

  3. json格式 （JavaScipt Object Notation）

    json格式 json语法规则: 01.对象表现形式 key:value 键值对 02.如果有多个数据,之间使用逗号隔开 k1:v1,k2:v2 03.把对象写在大括号中 var student={a ...

  4. RabbitMQ CLI 管理工具 rabbitmqadmin（管理和监控）

    插个广告,公司最近在招".NET"开发(杭州),如果你现在还从事 .NET 开发(想用 .NET Core,但被公司不认可),想转 JAVA 开发(但又没有工作经验,惧怕面试),想 ...

  5. 百度地图API 自定义标注图标

    通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <script type=" ...

  6. 最新Java技术

    最近在网上查资料碰到好多没接触过的技术,先汇总在这里备用,以后慢慢吸收 1. JNA JNI的替代品,调用方式比JNI更直接,不再需要JNI那层中间接口,几乎达到Java直接调用动态库 2. Smal ...

  7. 导出excel表格，前端和后台导出

    问题:项目框架中导出不知道有什么限制,数据稍微大点导出不了,向上面请求解决,结果一圈推下来又推回来了,所以决定自己写,参考了网上很多大神的博客,开始试了前端导出,想着比较简单,但是乱码问题始终解决不了 ...

  8. #Java学习之路——基础阶段（第九篇）

    我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...

  9. [Swift]LeetCode98. 验证二叉搜索树 | Validate Binary Search Tree

    Given a binary tree, determine if it is a valid binary search tree (BST). Assume a BST is defined as ...

  10. [Swift]LeetCode267.回文全排列 II $ Palindrome Permutation II

    Given a string s, return all the palindromic permutations (without duplicates) of it. Return an empt ...