• gridView固定表头问题



    在网上看过不少gridView固定表头的做法,实验了一下表头是固定住了,但是表头列没有竖线分割了,仔细看了一下代码,把每列表头都套用这个CSS就可以了
    注:蓝色部分及红色部分是关键点。
    前台代码:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="BudgetAudit_Default2" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd > <!--按此句定义下的html标准-->

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <title>GridView固定表头</title>
       <style>
      .Freezing
       { 
        position:relative ;
       table-layout:fixed;
       top:expression(this.offsetParent.scrollTop);  
       z-index: 10;
       }

    .Freezing th{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px;}
    </style>
    </head>
    <body style="font-size:12px">
        <form id="form1" runat="server">
        <div style="overflow-y: scroll; height: 200px;300px" id="dvBody">
                       <asp:GridView ID="GridView1" runat="server"    AutoGenerateColumns="False" CellPadding="3"  BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" Font-Size="12px"  >
                            <FooterStyle BackColor="White" ForeColor="#000066" />
                            <Columns>
                                <asp:BoundField DataField="身份证号码" HeaderText="编号" ReadOnly="True"  HeaderStyle-CssClass="Freezing" />
                                <asp:BoundField DataField="邮政编码" HeaderText="邮政编码" SortExpression="邮政编码" HeaderStyle-CssClass="Freezing" />
                                <asp:BoundField DataField="家庭住址" HeaderText="家庭住址" HeaderStyle-CssClass="Freezing" />
                                <asp:BoundField DataField="姓名" HeaderText="姓名" HeaderStyle-CssClass="Freezing" />
                            </Columns>
                            <RowStyle ForeColor="#000066" />
                            <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
                            <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" CssClass="ms-formlabel DataGridFixedHeader"/>
                            <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White"/>
                        </asp:GridView>
            </div>

        </form>
    </body>
    </html>

    前台Code

    后台代码:

    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;

    public partial class BudgetAudit_Default2 : System.Web.UI.Page
    {
        
    protected void Page_Load(object sender, EventArgs e)
        {
            
    //生成DataTable并添加4个列
            DataTable dt = new DataTable();
            
    for (int i = 0; i < 4; i++)
            {
                dt.Columns.Add();
            }

              dt.Columns[
    0].ColumnName="身份证号码";
              dt.Columns[
    1].ColumnName="邮政编码";
              dt.Columns[
    2].ColumnName="家庭住址";
              dt.Columns[
    3].ColumnName="姓名";
            
    //往DataTable里添加20行数据
            for (int i = 0; i < 20; i++)
            {
                dt.Rows.Add(
    0123);
            }

            
    //将DataTable绑定到GridView
            GridView1.DataSource = dt;
            GridView1.DataBind();

        }
    }

    效果图:

    但是这种固定表头方法确定是有闪动。
    以下几种方法是从网上直接复制的,还没做验证,等以后有时间再验证一下

    2,Javascript方法。

    也是网上参考,搜索应该比较多,据网友回帖说是效果很好,自己使用效果不好。以下是源码分析:

    //创建表头

        if(document.getElementById("gvTitle") == null)

        {

            var gdvList = document.getElementById("gvCommon");

            var gdvHeader = gdvList.cloneNode(true);

            for(i = gdvHeader.rows.length - 1; i > 0;i--)

            {

                gdvHeader.deleteRow(i);

            }

            document.getElementById("divTitle").appendChild(gdvHeader);

            gdvList.deleteRow(0);

            //gdvList.rows[0].style.display = 'none';

        }

     

    使用这个JS方法后,我要继续在JS中访问这个GridView,但是发现GridView的只剩表头行了,数据行都访问不到,原因就是那个

    for循环已经删除掉了。

    还有其他问题,gdvList.deleteRow(0)这一句代码把第一行表头删除了,如果我用JS方法要在GridView里面添加一行,而正好是在第一行添加的话,那个新添加行的列宽会失去约束,变的错乱。

    而如果使用gdvList.rows[0].style.display = 'none'这一行代码,列宽是不会错乱,但奇怪的问题出现了,就是表头跟下面的数据行的列宽对不齐,很是纳闷???

    3,还是Javascript方法。也是项目中最后使用的方法。

    //创建表头

        if(document.getElementById("gvTitle") == null)

        {

            var gdvList = document.getElementById("gvCommon");

            var gdvHeader = gdvList.cloneNode(true);

            gdvHeader.id = "gvTitle";

            for(i = gdvHeader.rows.length - 1; i > 0;i--)

            {

                gdvHeader.deleteRow(i);

            }

            document.getElementById("divTitle").appendChild(gdvHeader);

            var div = document.getElementById("divGvData");

            var tbl = document.getElementById("divTitle");

            tbl.style.position = "absolute";

            tbl.style.zIndex = 100;

            tbl.style.top = div.offsetTop;

            tbl.style.left = div.offsetLeft;

        }

     

    大致做法是利用JS方法Copy出一个表头 gdvHeader 放在一个“divTitle”的DIV中。

    GridView是包含在“divGvData”DIV中的,然后设置divTitle的页面位置和divGvData的一致,也就是覆盖在上面。目前发现效果还行。有一点要注意,gdvHeader.id = "gvTitle";要重新设置一个ID,不然删除的还是GridView的数据行。

    HTML中的部分代码:

    <div id="divTitle" style="position:relative; top:0; left:0; overflow:hidden; 978px; border:0px solid red;"></div>

    <div id="divGvData" runat="server" style="position:relative; top:0px; left:0px; overflow:scroll; 994px;height:450px;" onscroll="funGrilViewScroll(); return false;">

                <asp:GridView ID="gvCommon" style="position:relative; top:0px; left:0px;" runat="server" CssClass="gvFixd" BackColor="White" BorderColor="#999999" BorderStyle="None" BorderWidth="1px" CellPadding="3" AutoGenerateColumns="False" GridLines="Vertical" PageSize="5" AllowSorting="True" OnSorting="gvCommon_Sorting"  >

                    <FooterStyle BackColor="#CCCCCC" ForeColor="Black" />

                    <RowStyle BackColor="#E7E7FF" ForeColor="Black" Font-Size="Small" />

                    <HeaderStyle HorizontalAlign="Center" BackColor="#000084" BorderColor="White" BorderWidth="1px" BorderStyle="Solid" Font-Bold="True" ForeColor="White"/>

                    </asp:GridView>

    </div>

    4, 还有一种asp.net方法,我没有测试过

    GridView固定表头  - wangying110166 - wangyingblogGridView固定表头  - wangying110166 - wangyingblogCode

    protected void InitGridviewHeader(GridView _gv1, Table _tb1, Panel _pc1)

            {

                //Page.EnableViewState = false;

                //[Espa駉l]Copiando las propiedades del renglon de encabezado

                //[English]Coping a header row data and properties    

                _tb1.Rows.Add(_gv1.HeaderRow);

                _tb1.Rows[0].ControlStyle.CopyFrom(_gv1.HeaderStyle);

                _tb1.CellPadding = _gv1.CellPadding;

                _tb1.CellSpacing = _gv1.CellSpacing;

                _tb1.BorderWidth = _gv1.BorderWidth;

                //if (!_gv1.Width.IsEmpty)

                //_gv1.Width = Unit.Pixel(Convert.ToInt32(_gv1.Width.Value) + Convert.ToInt32(_tb1.Width.Value) + 13);

                //[Espa駉l]Copiando las propiedades de cada celda del nuevo encabezado.

                //[English]Coping  each cells properties to the new header cells properties

                int Count = 0;

                _pc1.Width = Unit.Pixel(100);

                for (Count = 0; Count < _gv1.HeaderRow.Cells.Count - 1; Count++)

                {

                    _tb1.Rows[0].Cells[Count].Width = _gv1.Columns[Count].ItemStyle.Width;

                    _tb1.Rows[0].Cells[Count].BorderWidth = _gv1.Columns[Count].HeaderStyle.BorderWidth;

                    _tb1.Rows[0].Cells[Count].BorderStyle = _gv1.Columns[Count].HeaderStyle.BorderStyle;

                    _pc1.Width = Unit.Pixel(Convert.ToInt32(_tb1.Rows[0].Cells[Count].Width.Value) + Convert.ToInt32(_pc1.Width.Value) + 14);

                }

                //Panel1.Width = Unit.Pixel(Convert.ToInt32(_tb1.Rows[0].Cells[Count-1].Width.Value) + 12);

            }

  • 相关阅读:
    php数组常用函数
    java中Property类的基本用法
    properties文件不能输入中文
    Eclipse中Outline里各种图标的含义
    Eclipse的工程名有红色的感叹号,工程里面没有显示编译错误
    路径问题
    yum -y install 和yum install 的区别
    Linux下源码安装jdk
    Linux下安装rz、sz命令(文件上传下载)
    scp命令详解—跨服务器复制文件
  • 原文地址:https://www.cnblogs.com/kittywei/p/1583280.html
Copyright © 2020-2023  润新知