基于各种浏览器的GridView实现标题及固定列小感

最新推荐文章于 2021-06-09 12:12:56 发布
最新推荐文章于 2021-06-09 12:12:56 发布
阅读量436 收藏
点赞数
分类专栏： .net 文章标签： 浏览器 javascript border microsoft mozilla table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kqfbook/article/details/4662650
版权

 对于基于B/S结构的管理程序中，有很多报表需要设定固定表头和固定列显示。
而可以固定表头和固定列的Grid控件C/S模式下很多，但B/S下少之甚少，且费用也相应的昂贵。

但是上帝推出HTML的时候，他也并没有忘记HTML的扩展性。我们可以使用CSS和Javascript完全可以实现。

第一部分：CSS + Javascript 实现固定表头和固定列

该部分内容IE中GridView实现标题及固定列小感一文中说明过
先看一下效果图。

该部分的控制主要依靠CSS中嵌入Javascript来实现滚动效果。

  1.     <style type='text/css'>
  2.         /*<![CDATA[*/
  3.         .FreezingHead
  4.         {
  5.             position: relative;
  6.             top: expression(this.offsetParent.scrollTop);
  7.             z-index: 2;
  8.             background-color: White;
  9.         }
  10.         .FreezingCol
  11.         {
  12.             left: expression(document.getElementById('div').scrollLeft);
  13.             position: relative;
  14.             z-index: 1;
  15.         }
  16.         /*]]>*/
  17.     </style>
其中重点就是 在CSS中 使用 expression。
使用的时候指示在现实数据的Table中标题行的Tr标签中引用 Freezing Head 的Class,在每一个固定列中引用 FreezingCol 的Class，相应的HTML代码如下：
  1. <div id="div" style="height: 250px; width: 600px; overflow: auto;">
  2.   <table cellspacing="1" cellpadding="4" border="0" style="color: #333333;background-color: #333333; width: 700px;">
  3.      <tr class="FreezingHead" style="color: White; background-color: #333333;font-weight: bold;">
  4.        <th align="center" scope="col" style="background-color: #507CD1;" class="FreezingCol">
  5.          Name
  6.        </th>
  7.        <th align="center" scope="col" style="background-color: #507CD1;">
  8.          Grade
  9.        </th>
  10.        <th align="center" scope="col" style="background-color: #507CD1; width: 400px;">
  11.          Address
  12.        </th>
  13.      </tr>
  14.      <tr style="background-color: #EFF3FB;">
  15.        <td class="FreezingCol">
  16.          Abraham
  17.        </td>
  18.        <td>
  19.          56'
  20.        </td>
  21.        <td style="white-space: nowrap;">
  22.          10/104 New Delhi GT road
  23.        </td>
  24.      </tr>
  25.      <!-- 数据循环 -->       
  26.    </table>
  27. </div>
这种方法的优点是实现简单，易懂，轻便的特点。
但是他的 致命落点是兼容性太差。在几种不同内核版本的浏览器的测试中，Mozilla的FireFox， Apple的Safari以及Opera Software ASA的Opera中均不可运行。唯独Microsoft的IE中表现上佳。
这是因为 CSS中expression的使用目前越来越淡忘，目前只有IE支持 expression。而且在新的CSS版本和XHTML文档定义中也已经取缔使用 expression，如果在页面中使用文档定义（即<!DOCTYPE标签）则任何浏览器均不支持 expression，同样上述功能也不能实现。
所以使用CSS + Javascript 实现固定表头和固定列是必须删除 文档定义（即<!DOCTYPE标签），类似下面代码:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
第二部分：Javascript + 多表联动 实现固定表头和固定列

先看一下效果图。

该部分的控制主要依靠Javascript控制多表联动来实现滚动效果。

  2.     <script type="text/javascript" language="javascript">
  3.     /*<![CDATA[*/
  4.     function scroll() {
  5.       var x = document.getElementById("DataList").scrollLeft;
  6.       document.getElementById("Title").style.left = (0 - x) + "px";
  7.       var y = document.getElementById("DataList").scrollTop;
  8.       document.getElementById("LeftData").style.top = (0 - y) + "px";
  9.     }
  10.     /*]]>*/
  11.     </script>
上面的Javascript就是控制多表联动的代码。
该方式的主要是组合Table的排列问题。下图显示各表的排列。

其中#A区域显示固定列的标题；#B显示可横向滚动的标题；#C显示固定列的数据；#D显示可滚动数据。
然后再#D滚动是横向带动#B区域，竖向带动#C区域来实现。当然每个区域层的上下关系也必须保证#A>#B>#C>#D的顺序。
可是因为在页面加载的默认过程也是#A，#B，#C，#D的顺序，所以可以忽略。
其页面代码如下：
  2. <table id="Table0" border="0" cellpadding="0" cellspacing="0" style="width: 600px;">
  3.     <tr>
  4.         <td valign="top">
  5.             <table border="0" cellpadding="4" cellspacing="1" bgcolor="#535d7c" style="width: 120px;">
  6.                 <tr>
  7.                     <th align="center" scope="col" style="background-color: #507CD1; width: 120px">
  8.                         Name
  9.                     </th>
  10.                 </tr>
  11.             </table>
  12.         </td>
  13.         <td valign="top">
  14.             <div id="head" style="position: absolute; overflow: hidden; width: 480px; height: 30px;">
  15.                 <div id="intitle" style="position: absolute;">
  16.                     <table id="Table2" border="0" cellpadding="4" cellspacing="1" bgcolor="#535d7c" style="width: 580px;">
  17.                         <tr>
  18.                             <th align="center" scope="col" style="background-color: #507CD1;">
  19.                                 Grade
  20.                             </th>
  21.                             <th align="center" scope="col" style="background-color: #507CD1; width: 400px;">
  22.                                 Address
  23.                             </th>
  24.                         </tr>
  25.                     </table>
  26.                 </div>
  27.             </div>
  28.         </td>
  29.     </tr>
  30.     <tr>
  31.         <td valign="top">
  32.             <div id="list2" style="position: absolute; overflow: hidden; width: 120px; height: 235px;">
  33.                 <div id="leftTitle" style="position: absolute">
  34.                     <table id="Table4" border="0" cellpadding="4" cellspacing="1" bgcolor="#535d7c" style="width: 120px;">
  35.                         <tr style="background-color: #EFF3FB;">
  36.                             <td>
  37.                                 Abraham
  38.                             </td>
  39.                         </tr>
  40.                         <!-- 循环显示固定列数据 -->
  41.                     </table>
  42.                 </div>
  43.             </div>
  44.         </td>
  45.         <td valign="top">
  46.             <table id="Table1" width="100%" border="0" cellpadding="0" cellspacing="0" style="table-layout: fixed">
  47.                 <tr>
  48.                     <td valign="top">
  49.                         <div id="list" onscroll="f_scroll()" style="overflow: auto; width: 100%; height: 250px;">
  50.                             <table id="Table3" border="0" cellpadding="4" cellspacing="1" bgcolor="#535d7c" style="width: 580px;">
  51.                                 <tr style="background-color: #EFF3FB;">
  52.                                     <td>
  53.                                         56'
  54.                                     </td>
  55.                                     <td style="white-space: nowrap; width: 400px;">
  56.                                         10/104 New Delhi GT road
  57.                                     </td>
  58.                                 </tr>
  59.                                 <!-- 循环显示可滚动列数据 -->
  60.                             </table>
  61.                         </div>
  62.                     </td>
  63.                 </tr>
  64.             </table>
  65.         </td>
  66.     </tr>
  67. </table>
大家可以去自己分析代码。

这种方法虽然比第一种方法复杂，但比较符合现行的XHTML和HTML的标准，故其兼容性比第一种较好。
在几种不同内核版本的浏览器的测试中，Mozilla的FireFox和Microsoft的IE中表现上佳，唯独Apple的Safari以及Opera Software ASA的Opera中均运行不良。但考虑到目前浏览器市场份额角度上，此种方法可以满足绝大部分用户的需求。

总结词

随然固定标题和固定列的实现会解决基于B/S结构的报表的很大问题，但使用时需要根据数据量大小，客户需求使用不同的解决方案，具体问题永远是具体解决的。所以不敢奢望本文对大家有巨大的帮助，但希望对大家的开发有所参考价值。
KohnKong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
GridView固定表头和首列
12-19
GridView固定表头和首列（不随滚条滚动），css实现
asp.net 锁定gridview首行、前几列
01-30
附详细使用说明，非常简单，解决问题直接了当。
固定gridview 的标题栏 总结了一下
weixin_30481087的博客
04-10 84
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridviewText.aspx.cs" Inherits="mylatesttime.GridviewText" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/...
GridView固定表头的2种方法
weixin_30533797的博客
08-01 625
做项目的时候，有时候需要实现GridView的表头固定效果，不随滚动条的拖动而被隐藏。 通常的实现方法主要分2种，这里总结一下以作备用： 一、 JavaScript调用实现: 1.引用 相关JavaScript 和 CSS 文件： <scripttype="text/javascript"src="superTables.js"></script> ...
GridView固定表头的四种方法
凯旋
11-21 2798
1，Javascript方法。 也是网上参考，搜索应该比较多，据网友回帖说是效果很好，自己使用效果不好。以下是源码分析： //创建表头 if(document.getElementById("gvTitle") == null) { var gdvList = document.getElementById("gvCommon"); var gdvHeader = gdvList.cloneNode(true);
gridview让表格显示不正常解决办法
liujun13579的专栏
04-20 2045
在 vs2008 中 ，让gridview在表格中显示数据，这里的gridview要显示很多列数据，我的最多的需要有 50多列（这里需要 固定表头也就是行 和列这个问题也折腾了我很久，最后使用了smartgridview 控件，可以自己搜索下载，很方便） ，虽然设置了 gridview 的宽度，运行时表格始终显示不正常 我的表格宽度800px，分为五行 ，其中四行是两列（一列160px 居右显示
在asp.net中实现Gridview 表头固定
wuyq11的专栏
10-06 8597
最近在做项目过程要实现Gridview 表头固定 ，采用了以下方法。  function init()          {           var tbBody = document.getElementById("");            if(tbBody!=null)           {           var tbHead = tbBody.cloneNode(tru
上接扩展GridView控件(5) - 固定指定行、指定列
weixin_33759269的博客
11-14 166
4、重写OnRowDataBound以设置每个单元格的样式，从而实现固定表头、指定行或指定列的功能。 /// <summary>///OnRowDataBound/// </summary>/// <param n...
创建表头固定，表体可滚动的GridView
weixin_34400525的博客
05-30 313
&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm17.aspx.cs" Inherits="WebApplication1.WebForm17" %&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
GridView的用法
12-05 1432
一、GridView的基本功能将GridView控件由“工具箱”拖至aspx页面合适位置，由会自动生成一个GridView的控件编辑视图，默认控件ID是GridView1。在aspx.cs文件中写入下面的程序代码即可以显示DataTable或DataReader中数据。GridView1.DataSource=dt;   //或是=reader;之类的GridView1.DataBind();  
GridView固定表头和列 实例（GridView冻结表头和列）
05-05
这个与asp.net中GridView相关的一个实例，实现GridView冻结表头和列，挺好用的。
固定GridView表头方法的选择
yanfeichening
04-11 156
对于用户提出的要求，不管多么艰难，程序员总是会想千方设百计地去满足。 比如，GridView绑定数据非常方便，大家都喜欢用它，但当数据量大的时候，用户在查看时就会觉得不方便，因为分不清是哪列数据，一般做这项工作的人都有Excel的使用经验，知道可以把某些行固定下来，于是就会提出能不能也弄成那样？这下可难倒了程序员，web上要实现个东西还真要费些功夫。倒不是说技术上有多困难，主要还是因为浏览器太多，...
GridView固定表头的方法两则
qlk_2007的专栏
11-04 1387
方法一：无标题页 .Freezing  {  position:relative ;  table-layout:fixed;  top:expression(this.offsetParent.scrollTop);    z-index: 10; } .Freezing th{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;
GridView固定表头
feiyuan0204的专栏
02-04 1649
利用JS。嵌套两个Div function init() { var bodyGridView = document.getElementById(""); var headGridView = bodyGridView.cloneNode(true); for(i = headGridView
行间容器html,HTMLCSS学习笔记（二十三）GRID布局
weixin_28871743的博客
06-09 155
原标题：HTMLCSS学习笔记(二十三)GRID布局GRID布局它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单...
GridView 72般绝技
GoodShot的专栏
09-12 1198
快速预览： GridView无代码分页排序 GridView选中，编辑，取消，删除 GridView正反双向排序 GridView和下拉菜单DropDownList结合 GridView和CheckBox结合 鼠标移到GridView某一行时改变该行的背景色方法一 鼠标移到GridView某一行时改变该行的背景色方法二 GridView实现删除时弹出确认对话框 GridView实
固定表头效果--Css
GhostHouse
12-04 1308
固定的表头效果
如何实现GridView列标题栏筛选
最新发布
07-14
要实现 GridView 列标题栏的筛选功能，你可以使用一些额外的库或自定义代码来实现。以下是一种常见的做法： 1. 首先，确保你的项目引用了 `System.Windows.Controls.DataGrid` 命名空间。 2. 在你的 XAML 文件中，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值