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

来源：互联网发布：asp.net 获取域名编辑：程序博客网时间：2024/06/05 06:30

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%;">        <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>

欢迎各位提宝贵意见。