gridView固定表头问题

最新推荐文章于 2021-05-25 17:26:11 发布

weixin_30500105

最新推荐文章于 2021-05-25 17:26:11 发布

阅读量120

点赞数

文章标签： xhtml ui javascript ViewUI

原文链接：http://www.cnblogs.com/kittywei/archive/2009/10/14/1583280.html

版权

在网上看过不少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 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;width: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
1

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="BudgetAudit_Default2" %>
2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd >
4

<html xmlns="http://www.w3.org/1999/xhtml" >
6

<head id="Head1" runat="server">
7

<title>GridView固定表头</title>
8

<style>

.Freezing
10

{

}{
11

position:relative ;
12

table-layout:fixed;
13

top:expression(this.offsetParent.scrollTop);
14

z-index: 10;
15

}
16

.Freezing th{

}{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px;}
18

</style>
19

</head>
20

<body style="font-size:12px">
21

<form id="form1" runat="server">
22

<div style="overflow-y: scroll; height: 200px;width:300px" id="dvBody">
23

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="3" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" Font-Size="12px" >
24

<FooterStyle BackColor="White" ForeColor="#000066" />
25

<Columns>
26

<asp:BoundField DataField="身份证号码" HeaderText="编号" ReadOnly="True" HeaderStyle-CssClass="Freezing"/>
27

<asp:BoundField DataField="邮政编码" HeaderText="邮政编码" SortExpression="邮政编码" HeaderStyle-CssClass="Freezing" />
28

<asp:BoundField DataField="家庭住址" HeaderText="家庭住址" HeaderStyle-CssClass="Freezing" />
29

<asp:BoundField DataField="姓名" HeaderText="姓名" HeaderStyle-CssClass="Freezing" />
30

</Columns>
32

<RowStyle ForeColor="#000066" />
33

<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
34

<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" CssClass="ms-formlabel DataGridFixedHeader"/>
35

<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White"/>
36

</asp:GridView>
37

</div>
38

</form>
40

</body>
41

</html>
42

后台代码：

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( 0 , 1 , 2 , 3 );
        }

         // 将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中的部分代码：

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

</asp:GridView>

</div>

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

GridView固定表头 - wangying110166 - wangyingblog Code

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);

}

转载于:https://www.cnblogs.com/kittywei/archive/2009/10/14/1583280.html

weixin_30500105

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
gridView固定表头问题

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

扫一扫