IE中GridView实现标题及固定列小感

最新推荐文章于 2015-07-13 18:20:45 发布
最新推荐文章于 2015-07-13 18:20:45 发布
阅读量2.2k 收藏
点赞数
分类专栏： GridView & Table 文章标签： ie class table div javascript border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/crhan/article/details/1540890
版权

这几天开发GridView的固定标题和固定列的实现，其实这种东西在网上有很多例子，顺手就能拷贝很多版本。
但在执行后也就分为两种。一种是单Table，第二种是多Table。

 单一Table的如下：
<style TYPE='text/css'>
.Freezing
{
 position:relative ;
 top:expression(this.offsetParent.scrollTop);
 z-index: 10;
 background-color: White;
}
.FreezingCol
{
 LEFT: expression(document.getElementById('div_dgTittle3').scrollLeft);
 POSITION: relative;
 z-index: 1;
}
</style>
<div id='div_dgTittle3' style=' HEIGHT:250px;WIDTH:600px;OVERFLOW:auto; ' ><div>
<table cellspacing="1" cellpadding="4" border="0" id="dgTittle3" style="color:#333333;background-color:#333333;width:700px;">
<tr class="Freezing" style="color:White;background-color:#333333;font-weight:bold;">
<th align="center" scope="col" style="background-color:#507CD1;" class="FreezingCol">Name</th><th align="center" scope="col" style="background-color:#507CD1;">Grade</th><th align="center" scope="col" style="background-color:#507CD1;width:400px;">Address</th>
</tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
<tr style="background-color:#EFF3FB;"><td class="FreezingCol">Abraham</td><td> 56'</td><td style="white-space:nowrap;">10/104 New Delhi GT road</td></tr>
</table>
</div></div>

也就是根据样式表中的
 top:expression(this.offsetParent.scrollTop); 
 LEFT: expression(document.getElementById('div_dgTittle3').scrollLeft);
控制标题和固定列的控制。
而多Table则使用DIV的Postion属性来控制多表的重叠，然后使用Javascript来控制滚动。

两者各自有各自的优点和缺点。
前者实现简单而且好控制，后者手续太麻烦且控制麻烦。
但一旦数据量太多时单表的固定列控制占用CPU过高而产生死机现象。
因为每次的滚动需要太多的位置计算。
所以本人觉得使用这些时应先考录其数据量，尽量减小投入资源

crhan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
GridView固定表头(不用javascript只用CSS!，很好用
09-02
GridView固定表头(不用javascript只用CSS!，很好用
asp.net实现固定GridView标题栏的方法(冻结列功能)
01-03
本文实例讲述了asp.net实现固定GridView标题栏的方法。分享给大家供大家参考，具体如下： <%@ Page Language=C# %> <%@ Import Namespace=System.Data %> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> [removed] protected void Page_Load(object sende
GridView固定表头和首列
12-19
GridView固定表头和首列（不随滚条滚动），css实现
适用于IE的固定表头和列的表格样式[CSS]
weixin_34087307的博客
04-27 266
先给个图，如下： 解决如下需求：1. 当数据记录多的时候不希望分页，或者希望一页显示多一些数据的时候，表格出现纵向滚动条，要求表头不随着滚动条的滚动而滚动。2. 当数据列比较多的时候，出现横向滚动条，要求序号列、操作列等相关的列不随着横向滚动条滚动而滚动。 本文给出的解决办法仅适用于IE，支持IE6/7/8，是CSS的，没有啥好说的，直接给出列出代码并提供下载：FixTable.ra...
C#中GridView动态添加列的实现方法
09-03
下面我们将详细介绍如何在C#中实现GridView动态添加列。 首先，我们来看一个简单的例子。在Page_Load事件处理程序中，我们创建了一个新的TemplateField实例，这是GridView中用于创建自定义列类型的一种方式。`...
ASP.NET中GridView 重复表格列合并的实现方法
10-21
本文通过GridView 和 Repeater 解决有关表格显示数据重复的数据列和并的方法，非常实用，感兴趣的朋友一起看下吧
GridView固定表头和列 实例（GridView冻结表头和列）
05-05
这个与asp.net中GridView相关的一个实例，实现GridView冻结表头和列，挺好用的。
GridView固定表头随列表下移和左右移动
lionjian的专栏
09-03 2435
GridView中当列表数据过多时，很多时候就需要表头固定，上网搜了不少，有用CSS的，有用js的，也看了不少评论，说CSS的浏览器兼容性不好，而js的大多是写了只有上下滚动，没有左右滚动的，发现了一个上下左右都有的，分享下。 首先JS代码大多一致，做一个div，然后复制GridView到一个变量中，再把数据行全删掉，再放在div中，然后原GridView删掉表头行。 script type
GridView固定表头的四种方法
凯旋
11-21 2792
1，Javascript方法。 也是网上参考，搜索应该比较多，据网友回帖说是效果很好，自己使用效果不好。以下是源码分析： //创建表头 if(document.getElementById("gvTitle") == null) { var gdvList = document.getElementById("gvCommon"); var gdvHeader = gdvList.cloneNode(true);
固定GridView标题栏，冻结列功能实现
diehe5608的博客
03-17 374
<%@ Page Language="C#" %> <%@ Import Namespace="System.Data" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio...
gridview表头固定（经验篇）
末日放逐的博客
07-13 6503
这里先介绍一下我的项目中遇到的一个问题，这个问题各种项目中也是用的最多的一个，那就是gridview的表头固定。就是我们往下拉内容的时候，我们还想同时看到表头对应的标题，不想反复上拉下拉去比对表格的表头和内容。同时网上在其他的地方也在不断的搜索这个知识。觉得有必要用一个经验篇章来记录一下，以免以后需要用到，同时，也想为大家解决一些东西。这其中肯定有雷同，有所雷同的地方，请大家不要喷我，也是学习总结
页面兼容ie8样式几种实现方式
李艳平
02-10 3182
1，在页面上加上下面的代码，意思是在读到IE8 的时候，让他转到ie7兼容视图下 2，找到config文件，在configuration 节点下添加下面代码即可 xml version="1.0" encoding="utf-8"?> configuration>   system.webServer>     httpProtocol>       customHeaders>
如何实现GridView列标题栏筛选
最新发布
07-14
要实现 GridView 列标题栏的筛选功能，你可以使用一些额外的库或自定义代码来实现。以下是一种常见的做法： 1. 首先，确保你的项目引用了 `System.Windows.Controls.DataGrid` 命名空间。 2. 在你的 XAML 文件中，将 DataGrid 控件的 `AutoGenerateColumns` 属性设置为 `False`，以便手动定义列。 ```xaml <DataGrid ItemsSource="{Binding YourData}" AutoGenerateColumns="False"> <!-- 列定义 --> </DataGrid> ``` 3. 添加列定义到 DataGrid 中，包括列标题和绑定的数据。 ```xaml <DataGrid.Columns> <DataGridTextColumn Header="Column1" Binding="{Binding Property1}" /> <DataGridTextColumn Header="Column2" Binding="{Binding Property2}" /> <!-- 其他列定义 --> </DataGrid.Columns> ``` 在这个例子中，我们使用 `DataGridTextColumn` 来定义文本列，你可以根据需要选择适当的列类型。 4. 添加筛选功能。你可以使用第三方库或自定义代码来实现列标题栏的筛选功能。一种常见的方法是使用 `DataGridExtensions` 库。你可以在 NuGet 包管理器中搜索并安装 `DataGridExtensions`。 ```xaml <DataGrid extensions:DataGridExtensions.EnableColumnVirtualization="True" extensions:DataGridExtensions.IsAutoFilterEnabled="True"> <!-- 列定义 --> </DataGrid> ``` 在这个例子中，我们使用了 `DataGridExtensions` 命名空间，并将 `IsAutoFilterEnabled` 属性设置为 `True`，以启用列标题栏的筛选功能。 这样，你就可以实现 GridView 列标题栏的筛选功能。请根据你的具体需求选择适合的方法来实现。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值