GridView控件實現首列固定的方法探究

張鈺鵬

摘要：該文闡述了在ASP.NET的GridView控件中，實現首列固定的方法，所列代碼已在Vistual Studio和SQL Server的開發環境中通過驗證。

關鍵詞：ASP.NET;GridView控件;首列固定

中圖分類號：TP311? ? ? ? 文獻標識碼：A? ? ? ? 文章編號：1009-3044（2019）02-0210-02

GridView是ASP.NET中的重要數據控件，能夠很直觀地將數據庫中的數據以表格的形式呈現。在Web頁面的開發過程中，時常會存在顯示的表格列數過多，需要拖動顯示的情況，而首列數據往往是最為重要的數據。因此實現GridView控件的首列固定的功能，具有十分重要的意義。

1 GridView控件簡介

ASP.NET提供了許多工具用來在網格中顯示表格數據，而GridView控件是其中的佼佼者。通過使用GridView控件，可以對多種數據源中的數據進行顯示、編輯、刪除等操作，還可以通過設置模板來更加靈活地操作數據[1]。GridView控件通常是以二維表格形式顯示數據，而在實際應用中，為了使得表格更加美觀實用，表格中會出現首列固定的情況，這種情況就需要通過一些代碼來實現了。

2 GridView控件的數據操作

GridView控件的列 GridView控件創建列最主要的有兩種方式：一是綁定數據源，二是創建模板列。Columns集合用來存儲呈現在GridView控件中的所有顯式聲明的列字段，這些列字段按照它們出現在Columns集合中的順序顯示在GridView控件中[2]。要實現GridView首列固定，可以生成兩個GridView，一個顯示全部數據，另一個僅顯示首列數據，將僅顯示首列數據的GridView覆蓋在顯示全部數據的GridView上，即可實現GridView的首列固定。

GridView控件的數據綁定 在ASP.NET中，GridView數據綁定可以通過直接在前臺配置控件以及后臺手動綁定來實現[3]。通過前臺配置，只需點選GridView控件中的按鈕，按提示一步步操作即可，這里便不再贅述;通過后臺手動綁定數據，則需要編寫一些代碼來實現，這種方式較為靈活，更加實用。

3 首列固定功能的實現

假設SQL Server數據庫中，數據表的結構如表1所示。

4 顯示數據表

4.1 顯示效果

程序的運行效果如圖1所示，首列固定的設置建立在此效果的基礎上。

可以看出，由于屏幕大小的限制，EMail字段數據并不能完全顯示出來，因此實現首列固定尤為重要。

4.2 前臺頁面編程

在aspx頁面中添加GridView控件，代碼如下：

4.3 后臺頁面編程

在與前臺aspx頁面相對應的后臺aspx.cs頁面中進行編程，首先編寫Bind 方法，調用所需顯示的數據并且與GridView綁定以顯示數據，再在Page_Load事件中調用Bind方法。

⑴Bind方法

//NewDataSet方法功能：

//①str：字符串變量，方法的輸入值;②ds：返回一個DataSet，用于存儲查詢結果。

private DataSet NewDataSet（string str）

{

string sql = "Data Source=ZHANG-PC;Integrated Security=SSPI;Initial Catalog=Automation;User ID=sa;Password=******";

//定義數據庫連接字符串，使用SQL Server身份驗證方式，登錄名sa。

SqlConnection mycon = new SqlConnection（sql）;

mycon.Open（）;

SqlCommand com = new SqlCommand（str， mycon）;

SqlDataAdapter sda = new SqlDataAdapter（com）;

DataSet ds = new DataSet（）;

sda.Fill（ds）;

mycon.Close（）;//關閉數據庫連接

return ds;

}

protected void Bind（）

{

string str;

str = "select * from [MemberImformation]";//定義數據查詢字符串

DataSet ds = NewDataSet（str）;

//使用NewDataSet方法，輸入str字符串，得到返回的查詢結果ds。

GridView1.DataSource = ds;//設置GridView控件的數據源為ds

GridView1.DataBind（）;//令GridView控件數據綁定

}

⑵在Page_Load事件中調用Bind方法，代碼如下

if （！IsPostBack）//判斷是否首次加載頁面

{

Bind（）;//調用Bind方法

}

首列固定

4.4 運行效果

程序的運行效果如圖2所示。拖動橫向滾動條，首列姓名列固定顯示，其他列滾動顯示。

4.5 前臺頁面編程

添加GridView控件，用于顯示首列數據，代碼如下：

在前面添加的GridView控件GridView1，外部包裹了一個div控件，其css樣式[4]為："width：3000px;position：absolute;left：0px;top：0px;z-index：10"。width表示其寬度[5];position表示該控件的定位類型，通常有absolute、fixed、relative、static、inherit五種類型;position：absolute表示生成絕對定位的控件，相對于其上一級父元素（本例中為aspx頁面）進行定位，控件的位置通過"left"，"top"，"right"以及"bottom"屬性進行規定[6];z-index屬性設置元素的堆疊順序，擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面，換句話說，值越大其堆疊順序優先級越高[7]。

而現在添加的顯示首列的GridView控件firstGridView，其外部div控件的css樣式為："position：fixed;left：0px;top：0px;z-index：899"。position：fixed表示生成絕對定位的控件，相對于瀏覽器窗口進行定位，控件的位置通過"left"，"top"，"right"以及"bottom"屬性進行規定。