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"属性进行规定。