GRIDVIEW实现Excel列冻结功能:简洁高效
"在.NET框架中,GRIDVIEW是一个强大的服务器控件,常用于显示数据表格。要实现类似EXCEL的列冻结功能,即固定某些列位置,即使用户滚动表格时,这些列也能保持在可见范围内,可以采用以下步骤来实现: 1. **理解需求**: - 首先,你需要明确你想要在GRIDVIEW中冻结哪些列,这通常与数据的业务逻辑或用户习惯有关。 2. **CSS样式设置**: - 使用CSS来控制列的冻结效果。在你的代码中,`{z-index:120; position:relative; border:1px solid;}` 是关键部分,这设置了被冻结列的层级和定位。确保将 `position` 设置为 `relative`,以便可以相对于其父元素进行定位,而 `z-index` 属性使得这些列在滚动时始终位于其他元素之上。 3. **DOM结构**: - 在HTML部分,`<div id="trResult" onscroll="floatTheSubSamllClass()">` 里的 `onscroll` 事件处理函数 `floatTheSubSamllClass()` 负责响应滚动事件,当网格滚动时可能需要调整被冻结列的位置。 4. **滚动行为**: - 设置 `table` 的 `overflow-x:scroll` 使其水平可滚动。这样,当内容超出容器宽度时,用户可以通过滚动条查看隐藏的内容。同时,确保 Gridview 的父容器(如 `div trResult`)也有适当的滚动行为。 5. **JavaScript事件**: - `floatTheSubSamllClass()` 函数可能包含JavaScript代码,这部分负责根据滚动位置调整被冻结列的CSS属性,例如 `left` 或 `transform: translateX()`,确保冻结列始终可见。 6. **服务器端编程**: - 在服务器端事件如 `dgResult_RowDataBound`、`dgResult_PageIndexChanging` 等中,可能需要维护当前的冻结状态,并根据用户交互更新客户端的CSS。 7. **动态调整**: - 因为是动态表格,你需要确保冻结列的逻辑能适应数据量的变化,比如在数据加载完成后或者每次新数据插入时,自动调整冻结列的位置。 8. **资源管理**: - 使用 `meta:resourcekey` 和对应的 `BoundFieldResource1` 等标识,可能是为了更好地管理服务器端控件的资源和配置。 总结来说,实现GRIDVIEW的EXCEL列冻结功能涉及前端CSS和JavaScript配合,以及后端事件处理,关键在于根据用户的滚动动作动态调整被冻结列的定位。通过这种方式,可以提供一个类似EXCEL的用户体验,提升数据浏览的效率。"
信息比较多,需要水平滚轴向左右拖动,当拖动的时候,窗口固定在“材料次小类”,类似于EXCEL表中的窗口冻结功能。
代码:
冻结列的样式:
.freeze
{ z-index:120; /*expression(this.parentElement.offsetLeft)*/position:relative;border:1px solid;border-bottom:0px;}
//首先在Gridview外面包一个DIV ,给DIV 加上onscroll事件; 样式为overflow-x: scroll; X方向超出可滚动。
<div style="overflow-x: scroll; width: 100%;" id="trResult" onscroll="floatTheSubSamllClass()" runat="server" visible="false">
<table cellspacing="1" cellpadding="0" width="2200px" class="tb_datalist0">
<tr>
<td>
<cc1:ZTEGridView ID="dgResult" runat="server" EmptyDataText="没有搜索到数据" AllowCustomPaging="True" AutoGenerateColumns="False" AllowPaging="True" KeepedFootCells="" sortWholeExpression="" DataKeyNames="SERIES_ID" VirtualItemCount="1" EnableModelValidation="True" OnRowDataBound="dgResult_RowDataBound" OnRowDeleting="dgResult_RowDeleting" OnPageIndexChanging="dgResult_PageIndexChanging" OnSelectedIndexChanged="dgResult_SelectedIndexChanged" meta:resourcekey="dgResultResource1" >
<Columns>
<asp:BoundField DataField="" HeaderText="序号" meta:resourcekey="BoundFieldResource1"></asp:BoundField>
<asp:BoundField DataField="" HeaderText="材料类别号" meta:resourcekey="BoundFieldResource2"></asp:BoundField>
<asp:BoundField DataField="" HeaderText="材料大类" meta:resourcekey="BoundFieldResource3"></asp:BoundField>
<asp:BoundField DataField="" HeaderText="材料小类" meta:resourcekey="BoundFieldResource4"></asp:BoundField>
<asp:BoundField DataField="" HeaderText="材料次小类" meta:resourcekey="BoundFieldResource5"></asp:BoundField>
<asp:BoundField DataField="" HeaderText="物料技术经理" meta:resourcekey="BoundFieldResource6"></asp:BoundField>
</Columns>
</cc1:ZTEGridView>
</div>
</td>
</tr>
</table>
JS代码为:
<script type="text/javascript">
下载后可阅读完整内容,剩余2页未读,立即下载
- 粉丝: 6
- 资源: 5
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 多传感器数据融合手册:国外原版技术指南
- MyEclipse快捷键大全,提升编程效率
- 从零开始的编程学习:Linux汇编语言入门
- EJB3.0实例教程:从入门到精通
- 深入理解jQuery源码:解析与分析
- MMC-1电机控制ASSP芯片用户手册
- HS1101相对湿度传感器技术规格与应用
- Shell基础入门:权限管理与常用命令详解
- 2003年全国大学生电子设计竞赛:电压控制LC振荡器与宽带放大器
- Android手机用户代理(User Agent)详解与示例
- Java代码规范:提升软件质量和团队协作的关键
- 浙江电信移动业务接入与ISAG接口实战指南
- 电子密码锁设计:安全便捷的新型锁具
- NavTech SDAL格式规范1.7版:车辆导航数据标准
- Surfer8中文入门手册:绘制等高线与克服语言障碍
- 排序算法全解析:冒泡、选择、插入、Shell、快速排序