用CSS样式来实现DataGrid、GridView控件表头固定、指定列固定

固定表头:

第一步:在程序中添加css代码,既可以保存为单独的文件,也可以在页面中引用。

Css代码如下:

.Fixed

{

 position:relative;

 table-layout:fixed;

 z-index:10;

 top:expression(this.offsetParent.scrollTop);  

}

.Fixed th

{

  text-overflow:ellipsis;

  overflow:hidden;

  white-space:nowrap;

  padding:2px;

}

第二步:在##.aspx.cs文件后台Page_Load引用Css代码(也可以在##.aspx文件的head标签中引用,这里不做介绍)

代码如下:

//-----(((((子页面中引用css   

HtmlLink CssControl = new HtmlLink();

CssControl.Href = "~/Css/Style.css"; //指定路径

CssControl.Attributes.Add("rel", "stylesheet");

Page.Header.Controls.Add(CssControl);

CssControl.Attributes.Add("type", "text/css");

//-----)))))

第三步:在##.aspx文件的DATAGRID(GRIDVIEW)控件中引用

代码如下:

<div style="overflow-y:scroll; width:900px; height:300px" id="dvbody">

<asp:DataGrid ID="DataGrid1" runat="server">

<Columns>

</Columns>

<HeaderStyle … CssClass="Fixed"/>

</asp:DataGrid>

 </div>

注:overflow-y:scroll为竖向滚动条显示,因为要固定表头,一般情况下要指定固定高度。

在DATAGRID(GRIDVIEW)表头样式中引用Css(CssClass="Fixed")。

第四步:在页面的<head>标签中引用如下代码。(如果使用母板页则可以在母板页添加)

代码如下:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

注:这行代码的含义是在IE8中以IE7的显示模式来进行渲染。

 

固定指定列:

第一步:在程序中添加css代码,既可以保存为单独的文件,也可以在页面中引用。

Css代码如下:

.FixCol

{

   position: relative;

   table-layout:fixed;

   z-index:10;

   left: expression(this.offsetParent.scrollLeft);

}

第二步:在##.aspx.cs文件后台Page_Load引用Css代码(也可以在##.aspx文件的head标签中引用,这里不做介绍)

代码如下:

//-----(((((子页面中引用css   

HtmlLink CssControl = new HtmlLink();

CssControl.Href = "~/Css/Style.css"; //指定路径

CssControl.Attributes.Add("rel", "stylesheet");

Page.Header.Controls.Add(CssControl);

CssControl.Attributes.Add("type", "text/css");

//-----)))))

第三步:在##.aspx文件的DATAGRID(GRIDVIEW)控件中引用

代码如下:

<div style="overflow-x:scroll; width:900px; height:auto;" id="dvbody">

<asp:DataGrid ID="DataGrid1" runat="server">

<Columns>

<asp:BoundColumn DataField="" HeaderText="" ReadOnly="True">

<HeaderStyle CssClass="FixCol" />

<ItemStyle CssClass="FixCol" />

</asp:BoundColumn>

</Columns>

</asp:DataGrid>

 </div>

注:overflow-x:scroll为横向滚动条显示,因为要固定指定的列,一般情况下要指定固定宽度。

在DATAGRID(GRIDVIEW)列的样式中引用Css(CssClass="FixCol ")。

第四步:在页面的<head>标签中引用如下代码。(如果使用母板页则可以在母板页添加)

代码如下:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

注:这行代码的含义是在IE8中以IE7的显示模式来进行渲染。

 

注:这里只是指定了一种方法,具体实现过程中,需要根据实际情况进行细微调整。

posted @ 2012-05-28 14:26  爱智旮旯  阅读(5393)  评论(0编辑  收藏  举报