用CSS樣式來實現DataGrid、GridView控制項表頭固定、指定列固定

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

固定表頭：

第一步：在程式中添加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)控制項中引用

代碼如下：

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

…

</Columns>

…

</asp:DataGrid>

</div>

註：overflow-y:scroll為豎向捲軸顯示，因為要固定表頭，一般情況下要指定固定高度。

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

第四步：在頁面的<head>標籤中引用如下代碼。（如果使用母板頁則可以在母板頁添加）

代碼如下：

註：這行代碼的含義是在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)控制項中引用

代碼如下：

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

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

</asp:BoundColumn>

…

</Columns>

…

</asp:DataGrid>

</div>

註：overflow-x:scroll為橫向捲軸顯示，因為要固定指定的列，一般情況下要指定固定寬度。

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

第四步：在頁面的<head>標籤中引用如下代碼。（如果使用母板頁則可以在母板頁添加）

代碼如下：

註：這行代碼的含義是在IE8中以IE7的顯示模式來進行渲染。

註：這裡只是指定了一種方法，具體實現過程中，需要根據實際情況進行細微調整。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More