固定（锁定）GridView标题行（表头）

最新推荐文章于 2019-02-21 17:37:00 发布
最新推荐文章于 2019-02-21 17:37:00 发布
阅读量1.4w 收藏 5
点赞数
文章标签： class asp string server div html
版权归作者吕津所有，如需版权请联系作者13760413719
本文链接：https://blog.csdn.net/lvjin110/article/details/7067970
版权

ASP.NET前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Freezing.aspx.cs" Inherits="Freezing" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>GridView固定表头</title>
    <style type="text/css">
        .topcss
        {
            background-color:#C00000;
            color:White;
            position:relative;
            top:expression(this.offsetParent.scrollTop);
            left:expression(this.offsetParent.scrollLeft);
            z-index: 10;            
        }              
        ul{ position:absolute; bottom:0; text-align:center;}        
        ul,li{ padding:0; margin:0; list-style:none}            
      </style>

</head>
<body>
    <form id="form1" runat="server" style="width:100%;">
    <div style="height:100%;">
        <div id="dd" style="width:100%;height:500px; overflow:auto;background-color:buttonhighlight; text-align:center;">
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BorderStyle="none" Width="98%">
                <Columns>
                    <asp:BoundField DataField="ID" HeaderText="年份" />
                    <asp:BoundField DataField="Name" HeaderText="姓名" />
                    <asp:BoundField DataField="Age" HeaderText="年齡" />
                </Columns>
                <HeaderStyle CssClass="topcss"/>
            </asp:GridView>
        </div>
        <ul>
		    <li class="one" style="height:21px">CopyRight@呂津, Lv Jin, LvKing</li>
		    <li class="two" style="height:52px" >先进半导体(深圳)科技有限公司</li> 
	    </ul> 
    </div>
    </form>
</body>
</html>

ASP.NET后台代码：

using System;
using System.Collections.Generic;

public partial class Freezing : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        this.GridView1.DataSource = GetData();
        this.GridView1.DataBind();
    }

    private List<Demo> GetData()
    {
        List<Demo> result = new List<Demo>();
        for (int i = 0; i < 100; i++)
        {
            result.Add(new Demo(i+1985,"Lv Jin",i));
        }
            return result;
        
    }

    class Demo
    {
        private int _id;
        private string _name;
        private int _age;

        public Demo(int _id, string _name, int _age)
        {
            this._id = _id;
            this._name = _name;
            this._age = _age;
        }

        public int ID
        {
            get { return _id; }
        }

        public string Name
        {
            get { return _name; }
        }

        public int Age
        {
            get { return _age; }
        }
    }
}

执行效果如下：

 

拷贝另存如下代码为HTML就可以看效果：
 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1"><title>
	GridView固定表头
</title>
    <style type="text/css">
        .topcss
        {
            background-color:#C00000;
            color:White;
            position:relative;
            top:expression(this.offsetParent.scrollTop);
            left:expression(this.offsetParent.scrollLeft);
            z-index: 10;            
        }              
        ul{ position:absolute; bottom:0; text-align:center;}        
        ul,li{ padding:0; margin:0; list-style:none}            
      </style>

</head>
<body>
    <div style="height:100%;">
	<table cellspacing="0" rules="all" border="1"  style="border-style:None;width:98%;border-collapse:collapse;"> 
             
		<tr class="topcss"> <th scope="col">年份</th><th scope="col">姓名</th><th scope="col">年齡</th> </tr>
           
	</table>
        <div id="dd" style="width:100%;height:500px; overflow:auto;background-color:buttonhighlight; text-align:center;">
            <div>
	<table cellspacing="0" rules="all" border="1" id="GridView1" style="border-style:None;width:98%;border-collapse:collapse;">
		<!--<tr class="topcss">
			<th scope="col">年份</th><th scope="col">姓名</th><th scope="col">年齡</th>
		</tr>-->
		<tr>
			<td>1985</td><td>Lv Jin</td><td>0</td>
		</tr><tr>
			<td>1986</td><td>Lv Jin</td><td>1</td>
		</tr><tr>
			<td>1987</td><td>Lv Jin</td><td>2</td>
		</tr><tr>
			<td>1988</td><td>Lv Jin</td><td>3</td>
		</tr><tr>
			<td>1989</td><td>Lv Jin</td><td>4</td>
		</tr><tr>
			<td>1990</td><td>Lv Jin</td><td>5</td>
		</tr><tr>
			<td>1991</td><td>Lv Jin</td><td>6</td>
		</tr><tr>
			<td>1992</td><td>Lv Jin</td><td>7</td>
		</tr><tr>
			<td>1993</td><td>Lv Jin</td><td>8</td>
		</tr><tr>
			<td>1994</td><td>Lv Jin</td><td>9</td>
		</tr><tr>
			<td>1995</td><td>Lv Jin</td><td>10</td>
		</tr><tr>
			<td>1996</td><td>Lv Jin</td><td>11</td>
		</tr><tr>
			<td>1997</td><td>Lv Jin</td><td>12</td>
		</tr><tr>
			<td>1998</td><td>Lv Jin</td><td>13</td>
		</tr><tr>
			<td>1999</td><td>Lv Jin</td><td>14</td>
		</tr><tr>
			<td>2000</td><td>Lv Jin</td><td>15</td>
		</tr><tr>
			<td>2001</td><td>Lv Jin</td><td>16</td>
		</tr><tr>
			<td>2002</td><td>Lv Jin</td><td>17</td>
		</tr><tr>
			<td>2003</td><td>Lv Jin</td><td>18</td>
		</tr><tr>
			<td>2004</td><td>Lv Jin</td><td>19</td>
		</tr><tr>
			<td>2005</td><td>Lv Jin</td><td>20</td>
		</tr><tr>
			<td>2006</td><td>Lv Jin</td><td>21</td>
		</tr><tr>
			<td>2007</td><td>Lv Jin</td><td>22</td>
		</tr><tr>
			<td>2008</td><td>Lv Jin</td><td>23</td>
		</tr><tr>
			<td>2009</td><td>Lv Jin</td><td>24</td>
		</tr><tr>
			<td>2010</td><td>Lv Jin</td><td>25</td>
		</tr><tr>
			<td>2011</td><td>Lv Jin</td><td>26</td>
		</tr><tr>
			<td>2012</td><td>Lv Jin</td><td>27</td>
		</tr><tr>
			<td>2013</td><td>Lv Jin</td><td>28</td>
		</tr><tr>
			<td>2014</td><td>Lv Jin</td><td>29</td>
		</tr><tr>
			<td>2015</td><td>Lv Jin</td><td>30</td>
		</tr><tr>
			<td>2016</td><td>Lv Jin</td><td>31</td>
		</tr><tr>
			<td>2017</td><td>Lv Jin</td><td>32</td>
		</tr><tr>
			<td>2018</td><td>Lv Jin</td><td>33</td>
		</tr><tr>
			<td>2019</td><td>Lv Jin</td><td>34</td>
		</tr><tr>
			<td>2020</td><td>Lv Jin</td><td>35</td>
		</tr><tr>
			<td>2021</td><td>Lv Jin</td><td>36</td>
		</tr><tr>
			<td>2022</td><td>Lv Jin</td><td>37</td>
		</tr><tr>
			<td>2023</td><td>Lv Jin</td><td>38</td>
		</tr><tr>
			<td>2024</td><td>Lv Jin</td><td>39</td>
		</tr><tr>
			<td>2025</td><td>Lv Jin</td><td>40</td>
		</tr><tr>
			<td>2026</td><td>Lv Jin</td><td>41</td>
		</tr><tr>
			<td>2027</td><td>Lv Jin</td><td>42</td>
		</tr><tr>
			<td>2028</td><td>Lv Jin</td><td>43</td>
		</tr><tr>
			<td>2029</td><td>Lv Jin</td><td>44</td>
		</tr><tr>
			<td>2030</td><td>Lv Jin</td><td>45</td>
		</tr><tr>
			<td>2031</td><td>Lv Jin</td><td>46</td>
		</tr><tr>
			<td>2032</td><td>Lv Jin</td><td>47</td>
		</tr><tr>
			<td>2033</td><td>Lv Jin</td><td>48</td>
		</tr><tr>
			<td>2034</td><td>Lv Jin</td><td>49</td>
		</tr><tr>
			<td>2035</td><td>Lv Jin</td><td>50</td>
		</tr><tr>
			<td>2036</td><td>Lv Jin</td><td>51</td>
		</tr><tr>
			<td>2037</td><td>Lv Jin</td><td>52</td>
		</tr><tr>
			<td>2038</td><td>Lv Jin</td><td>53</td>
		</tr><tr>
			<td>2039</td><td>Lv Jin</td><td>54</td>
		</tr><tr>
			<td>2040</td><td>Lv Jin</td><td>55</td>
		</tr><tr>
			<td>2041</td><td>Lv Jin</td><td>56</td>
		</tr><tr>
			<td>2042</td><td>Lv Jin</td><td>57</td>
		</tr><tr>
			<td>2043</td><td>Lv Jin</td><td>58</td>
		</tr><tr>
			<td>2044</td><td>Lv Jin</td><td>59</td>
		</tr><tr>
			<td>2045</td><td>Lv Jin</td><td>60</td>
		</tr><tr>
			<td>2046</td><td>Lv Jin</td><td>61</td>
		</tr><tr>
			<td>2047</td><td>Lv Jin</td><td>62</td>
		</tr><tr>
			<td>2048</td><td>Lv Jin</td><td>63</td>
		</tr><tr>
			<td>2049</td><td>Lv Jin</td><td>64</td>
		</tr><tr>
			<td>2050</td><td>Lv Jin</td><td>65</td>
		</tr><tr>
			<td>2051</td><td>Lv Jin</td><td>66</td>
		</tr><tr>
			<td>2052</td><td>Lv Jin</td><td>67</td>
		</tr><tr>
			<td>2053</td><td>Lv Jin</td><td>68</td>
		</tr><tr>
			<td>2054</td><td>Lv Jin</td><td>69</td>
		</tr><tr>
			<td>2055</td><td>Lv Jin</td><td>70</td>
		</tr><tr>
			<td>2056</td><td>Lv Jin</td><td>71</td>
		</tr><tr>
			<td>2057</td><td>Lv Jin</td><td>72</td>
		</tr><tr>
			<td>2058</td><td>Lv Jin</td><td>73</td>
		</tr><tr>
			<td>2059</td><td>Lv Jin</td><td>74</td>
		</tr><tr>
			<td>2060</td><td>Lv Jin</td><td>75</td>
		</tr><tr>
			<td>2061</td><td>Lv Jin</td><td>76</td>
		</tr><tr>
			<td>2062</td><td>Lv Jin</td><td>77</td>
		</tr><tr>
			<td>2063</td><td>Lv Jin</td><td>78</td>
		</tr><tr>
			<td>2064</td><td>Lv Jin</td><td>79</td>
		</tr><tr>
			<td>2065</td><td>Lv Jin</td><td>80</td>
		</tr><tr>
			<td>2066</td><td>Lv Jin</td><td>81</td>
		</tr><tr>
			<td>2067</td><td>Lv Jin</td><td>82</td>
		</tr><tr>
			<td>2068</td><td>Lv Jin</td><td>83</td>
		</tr><tr>
			<td>2069</td><td>Lv Jin</td><td>84</td>
		</tr><tr>
			<td>2070</td><td>Lv Jin</td><td>85</td>
		</tr><tr>
			<td>2071</td><td>Lv Jin</td><td>86</td>
		</tr><tr>
			<td>2072</td><td>Lv Jin</td><td>87</td>
		</tr><tr>
			<td>2073</td><td>Lv Jin</td><td>88</td>
		</tr><tr>
			<td>2074</td><td>Lv Jin</td><td>89</td>
		</tr><tr>
			<td>2075</td><td>Lv Jin</td><td>90</td>
		</tr><tr>
			<td>2076</td><td>Lv Jin</td><td>91</td>
		</tr><tr>
			<td>2077</td><td>Lv Jin</td><td>92</td>
		</tr><tr>
			<td>2078</td><td>Lv Jin</td><td>93</td>
		</tr><tr>
			<td>2079</td><td>Lv Jin</td><td>94</td>
		</tr><tr>
			<td>2080</td><td>Lv Jin</td><td>95</td>
		</tr><tr>
			<td>2081</td><td>Lv Jin</td><td>96</td>
		</tr><tr>
			<td>2082</td><td>Lv Jin</td><td>97</td>
		</tr><tr>
			<td>2083</td><td>Lv Jin</td><td>98</td>
		</tr><tr>
			<td>2084</td><td>Lv Jin</td><td>99</td>
		</tr>
	</table>
</div>
        </div>
        <ul>
		    <li class="one" style="height:21px">CopyRight@呂津, Lv Jin, LvKing</li>
		    <li class="two" style="height:52px" >先进半导体(深圳)科技有限公司</li> 
	    </ul> 
    </div>
</body>
</html>

欢迎各位提宝贵意见。

吕津
关注
ASP.Net下为GridView创建固定表头
liuyunhuanying的专栏
09-03 5385
1.问题描述： 由于gridviewlimi
GridView固定表头的方法两则
donghaima的专栏
08-08 3075
方法一：无标题页 .Freezing  {   position:relative ;   table-layout:fixed;   top:expression(this.offsetParent.scrollTop);     z-index: 10; } .Freezing th{text-overflow:ellipsis;overflow:hidden;white-spac
GridView固定表头和首列
idtugv的专栏
12-19 1604
下载：GridView固定表头和首列 关键代码： /*固定行头样式*/.fixRowHead { position: relative; left: expression(this.parentElement.parentElement.parentElement.parentElement.parent
ASP.NET固定GridView表头_SuperTables
03-27
ASP.NET固定GridView表头_SuperTables
在asp.net中实现Gridview 表头固定
wuyq11的专栏
10-06 8630
最近在做项目过程要实现Gridview 表头固定 ，采用了以下方法。  function init()          {           var tbBody = document.getElementById("");            if(tbBody!=null)           {           var tbHead = tbBody.cloneNode(tru
(转)GridView固定表头
weixin_33862993的博客
09-10 184
固定表头方法： 1，样式固定。 这个方法是从网上参考的，但是忘记了来源，使用之后发现效果不是很好，有闪动。以下是源码（来源于网络）： <styletype="text/css"> .Freezing { position:relative; table-layout:fixed; top:expression...
Asp.net 2.0 自定义控件开发[实现GridView多行表头固定表体滚动效果][示例代码下载]
★(ChengKing)【夜战鹰】【产品级性能调优与故障诊断分析】★
04-04 9430
(一). 概述        1. 实现GridView表头固定表体滚动效果        2. 继承GridView的所有功能, 增加扩展功能, 表体滚动功能; 不需要另外加辅助滚动控件, 如.        3. 支持多行表头滚动, 此控件能够自动检测到使用者增加的表头的行数. 准确的实现表头滚动.            有增加GridView多表头实现方案, 请看[多表头自定
GridView表头固定
weixin_30840253的博客
02-21 174
<%@ Page Language="C#" AutoEventWireup="true" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <scr...
gridview固定表头 横向滚动 纵向固定
07-25
"GridView固定表头横向滚动纵向固定" GridView是一个基于ASP.NET的数据控件，用于显示数据表格。然而，在默认情况下，GridView的表头无法固定在屏幕上，使得用户体验不佳。为了解决这个问题，本文将介绍如何实现...
Ext 3.4 多表头 列锁定
07-29
列锁定（Column Locking）是Ext JS的一个功能，它允许用户固定某些列，即使在滚动表格时这些列也会保持可见。这对于需要频繁参考某些关键列，而其他列可能很长或数量很多的情况非常有用。在Ext 3.4中，实现列锁定...
GridView固定表头和列 实例（GridView冻结表头和列）
05-05
这个与asp.net中GridView相关的一个实例，实现GridView冻结表头和列，挺好用的。
Gridview固定标题
04-04
像Gridview的固定标题这样的Excel-适用于许多当前解决方案无法使用的列
asp.net实现固定GridView标题栏的方法(冻结列功能)
10-22
主要介绍了asp.net实现固定GridView标题栏的方法,即冻结列功能,涉及GridView结合前端js操作数据显示的相关技巧,需要的朋友可以参考下
Gridview固定表头（JS方法）
07-18
固定GridView表头,使用JS方法以及样式在前台控制表头
创建表头固定，表体可滚动的GridView
java2000.net
10-10 114
本方法只需要设置一个GridView的宽度，其它宽度不需要设置。测试环境：IE6，Firefox通过。 C# &lt;%@ Page Language="C#" AutoEventWireup="true" %&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x...
固定GridView表头方法的选择
yanfeichening
04-11 160
对于用户提出的要求，不管多么艰难，程序员总是会想千方设百计地去满足。 比如，GridView绑定数据非常方便，大家都喜欢用它，但当数据量大的时候，用户在查看时就会觉得不方便，因为分不清是哪列数据，一般做这项工作的人都有Excel的使用经验，知道可以把某些行固定下来，于是就会提出能不能也弄成那样？这下可难倒了程序员，web上要实现个东西还真要费些功夫。倒不是说技术上有多困难，主要还是因为浏览器太多，...
固定GRIDVIEW表头行
10-28 140
1.在.aspx页面添加下列代码 <script type="text/javascript"> function s() { var t = document.getElementById("<%=GridView1.ClientID%>"); var t2 = t.cloneNode(true) for (i ...
使用CSS实现GridView固定表头
在实现GridView固定表头的过程中，主要涉及CSS和HTML结构的设计。CSS部分用于控制表头的定位和样式，而HTML则需要正确嵌套表格元素以实现预期效果。 首先，我们创建一个CSS类 `.Freezing`，这个类将被应用到表头...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值