在网上看过不少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>
后台代码:
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,Javas
也是网上参考,搜索应该比较多,据网友回帖说是效果很好,自己使用效果不好。以下是源码分析:
//创建表头
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,还是Javas
//创建表头
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;" on
<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" On
<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方法,我没有测试过
Co
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 da
_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);
}