gridview怎么固定表头
1个回答
展开全部
1,样式固定
<style type="text/css">
.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>
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方法Copy出一个表头 gdvHeader 放在一个“divTitle”的DIV中。
GridView
是包含在“divGvData”DIV中的,然后设置divTitle的页面位置和divGvData的一致,也就是覆盖在上面。目前发现效果还行。有一
点要注意,gdvHeader.id = "gvTitle";要重新设置一个ID,不然删除的还是GridView的数据行。
3.HTML中的部分代码:
<div
id="divTitle" style="position:relative; top:0; left:0; overflow:hidden;
width:978px; border:0px solid red;"></div>
<div
id="divGvData" runat="server" style="position:relative; top:0px;
left:0px; overflow:scroll; width: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方法
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);
<style type="text/css">
.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>
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方法Copy出一个表头 gdvHeader 放在一个“divTitle”的DIV中。
GridView
是包含在“divGvData”DIV中的,然后设置divTitle的页面位置和divGvData的一致,也就是覆盖在上面。目前发现效果还行。有一
点要注意,gdvHeader.id = "gvTitle";要重新设置一个ID,不然删除的还是GridView的数据行。
3.HTML中的部分代码:
<div
id="divTitle" style="position:relative; top:0; left:0; overflow:hidden;
width:978px; border:0px solid red;"></div>
<div
id="divGvData" runat="server" style="position:relative; top:0px;
left:0px; overflow:scroll; width: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方法
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);
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询