它的作用与 Repeater 是相同的，均是用来显示数据的。
注：操作 Info 表；建数据集 MyDB
一、GridView显示数据：
1. 在VS右侧的工具箱中，找到数据栏，将 GridView 拖拽进入页面；
2. 在后端代码的 Page_Load 事件中绑定数据源
GridView1.DataSource = new InfoTableAdapter().GetData();
GridView1.DataBind();此时运行即可得到未加任何修饰的表，如下图：
图 1-1
EmptyDataText : 绑定数据为空时显示的文本
二、编辑列
选中 GridvVew ，点开右侧出现的小箭头，选“编辑列”（图 1-2），进入编辑字段界面（图1-3）：
图 1-2
图 1-3
编辑列界面主要分为三部分，如图 1-3 ，
1. B 部分下的“自动生成字段”的复选框勾上后， 是将数据库中所有的字段作为列，显示的是数据库当前表的所有数据， 图 1-1中显示数据的方式就是默认将此够打上了。此时C部分的字段就没用了；要用自定义列，需自己添加列，
2. A 部分是列的类别 ； BoundField -- 绑定列、CheckBoxField -- 复选框列、HyperLinkField -- 超链接列、ImageField -- 图片列、 ButtonField -- 按钮列、CommandField -- 命令列、TempLateField -- 模板列；
3. B 部分是所添加的列 （在 A 中任选一个，点添加按钮，就在 B 中添加一列），即是在界面上显示的列
4. C 部分是列的属性，其中主要的属性有（不同类型的列属性稍有不同）：
* 数据 --> DataField：绑定到数据库表的字段名（数据库列名）
* 外观 --> HeaderText：界面显示的列的名称
* 样式 --> HeaderStyle：该列标头的样式
* 样式 --> ItemStyle：该列显示数据的单元格的样式
* 数据 --> DataFormatString：格式化字符串，如：格式化时间 {0:yyyy年MM月dd日} ，其中 0 即代指 DataField 中指定的列；
5. B 部分右侧的上下的箭头可以调整 B 中字段的顺序，第三个按钮是删除按钮。
三、行类型和行状态：
1. GridView中的行类型分为：数据行（DataRow）、空行（EmptyDataRow）脚注行（Footer）、标题行（Header）、分页行（Pager）、行分隔符（Separator）
2. 如图 1-4 ，第一行为标题行，p001 到 p004所在的行为数据行，用来显示数据。最后一行即为脚注行。
3. GridView中的行状态分为：标头（Header）、脚注（Footer）、普通行（Normal）、交替行（Alternate）、选中行（Selected）、编辑行（Edit）、插入行（Insert）。
4. 如图 1-4 ，p001 和 p002所在的行为普通行，p003 和 p004 所在的行为交替行，最后一行即为脚注。
图 1-4
四、外观
1. 整体的外观：选中 GridvVew ，点开右侧出现的小箭头，选“自动套用格式”（图 1-2），进入格式选择界面，根据自己的喜好进行选择风格即可，例如：“红糖”
图 1-5
2. 行外观：
在 GridVIew 的属性中找到样式，即可设置行的样式
SelectedRowStyle：选中行的样式；
AlternatingRowStyle：交替行的样式；
EditROwStyle：编辑行的样式；
FooterStyle：脚注的样式；
HeaderStyle：标头的样式；
RowStyle：普通行的样式；
*属性中的外观中：ShowFooter--显示脚注；ShowHeader--显示标头
3. 列外观
在编辑列的界面中的属性中设置；
五、事件。
GridView 显示数据是 “逐行创建，逐行绑定” 的过程
相当于创建完一行后，就接着填充数据
1. DataCreate 事件：在创建一行后触发的事件
2. RowDataBound 事件：在填充完一行的数据后触发的事件
GridView（二）BoundField 1
一、准备：
操作 人事信息 数据库，建立 MyDB 数据集；
1. 进入编辑列界面，将自动生成字段前的勾去掉，添加五个BoundFIeld 列，分别绑定（DataField）code、name、sex、nation、birthday，列名（HeaderText）分别为代号、姓名、性别、民族、生日。
2. 后端代码绑定数据源
GridView1.DataSource = new InfoTableAdapter().GetData();
GridView1.DataBind();
3.此时运行即可得到下图:
图 2-1
二、修改生日的显示方式，改为“1990年1月1日”格式
打开编辑列界面（图 1-1），在B部分选中 生日 列，在C部分找到 数据 -- DataFormatString ，设置值为： {0:yyyy年MM月dd日} ，此时，运行如下图：
图 2-2
三、将性别改为 男/女，民族改为汉字，此时就要在 RowDataBound 事件中写代码显示了。
1. 选中GridView，右击-->属性， 出现下图：
图 2-3
双击 RowDataBound 进入事件函数写代码；
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e){ …… }事件中的参数e
e.Row——刚刚创建（绑定）出来的行对象。
e.Row.RowType——刚刚创建（绑定）出来的行对象的类型
e.Row.RowState——刚刚创建（绑定）出来的数据行(DataRow)对象所得的状态（Normal,Alternate,Selected,Edit）
e.Row.Cells——刚刚创建（绑定）出来的行的格，指的是可见的外观
e.Row.DataItem——刚刚创建（绑定）出来的行后端的数据，当 GridView 绑定的数据源为数据集时，e.Row.DataItem 为DataRowView 类型的；当 GridView 绑定的数据源为对象的泛型集合时，e.Row.DataItem 为其中的对象元素；
后台代码：
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
// 判断行类型是否为数据行;行类型（DataControlRowType）为枚举类型
if (e.Row.RowType == DataControlRowType.DataRow)
{
// 判断行状态是否为普通行或是交替行，行状态 DataControlRowState）为枚举类型
if (e.Row.RowState == DataControlRowState.Normal || e.Row.RowState == DataControlRowState.Alternate)
{
// 取此行后绑定的数据 转型
MyDB.InfoRow row = (e.Row.DataItem as DataRowView).Row as MyDB.InfoRow;
e.Row.Cells[2].Text = row.Sex ? "男" : "女";
e.Row.Cells[3].Text = GetNationName(row.Nation);
}
}
}
private string GetNationName(string nationCode)
{
MyDB.NationDataTable table = new NationTableAdapter().GetByCode(nationCode); //GetByCode---nation 表中定义的根据民族编号查民族名称的方法
MyDB.NationRow row = table[0];
return row.Name;
}
* 此处可以通过设置断点来判断 e.Row.DataItem 的类型。
在即时窗口中输入 e.Row.DataItem.GetType().ToString() 来获取其类型
行类型和行状态也可以通过 GetType() 方法来获取其类型。
图 2-4
GridView（三）BoundField 2
四、在三的基础上，给GridView加事件，使鼠标悬浮时，改行变色；鼠标离开，恢复；
后端代码：
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
if (e.Row.RowState == DataControlRowState.Alternate || e.Row.RowState == DataControlRowState.Normal)
{
……三中的其他代码……
e.Row.Attributes.Add("onmouseover", "mover(this)");
e.Row.Attributes.Add("onmouseout", "mout(this)");
}
}
}
前端页面代码：
<script language="javascript">
function mover(tr)
{
tr.style.backgroundColor="yellow";
}
function mout(tr)
{
tr.style.backgroundColor="white";
}
</script>
效果图：
图 3-1
五、在 三 的基础上在代号一列前加一列复选框，点标头上的复选框全选，点按钮显示全部选中列的主键值
1. 编辑列：加一列绑定列，移至首位，
DataField设为code，
DataFormatString 设为：<input type='checkbox' name='chk' class='ch' value={0}/>
行为 --> HtmlEncode 设为：False
*HtmlEncode ：如果格式化字符串为Html语句，是否执行。False 执行；
2. 后端代码：
Gridview 的 RowDataBound 事件：
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
e.Row.Cells[0].Text = "<input type='checkbox' name='ck' class='chkall' >";
}
……三 中的其他代码……
}
按钮点击事件：
protected void Button1_Click(object sender, EventArgs e)
{
if (Request["chk"] != null)
{
Label1.Text = Request["chk"].ToString();
}
}
3. 前台代码：使用Jquery
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$(".chkall").click(function () {
var state = $(this).attr("checked");
$(".ch").attr("checked", state);
});
});
</script>
效果图：
图 3-2
六、在 三 的基础上，和五类似 ，将复选框换成单选钮；点按钮，取主键。
1. 编辑列：加一列绑定列，移至首位，
DataField设为code，
DataFormatString 设为：<input type='radio' name='rad' value='{0}' />
行为 --> HtmlEncode 设为：False
2. 后端按钮点击事件：
protected void Button1_Click(object sender, EventArgs e)
{
if (Request["rad"] != null)
{
Label1.Text = Request["rad"].ToString();
}
}
3. 效果图：
图 3-3
七、在 三 的基础上，将民族是汉族的人员的民族列字体加粗，变红色
后端代码：
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
if (e.Row.RowState == DataControlRowState.Normal || e.Row.RowState == DataControlRowState.Alternate)
{
MyDB.InfoRow row = (e.Row.DataItem as DataRowView).Row as MyDB.InfoRow;
// ……三中的其他代码……
if (e.Row.Cells[3].Text == "汉族")
{
e.Row.Cells[3].ForeColor = System.Drawing.Color.Red;
e.Row.Cells[3].Font.Bold = true;
}
}
}
}
效果图：
图 3-4
注：涉及到修改 Gridview 中数据的情况，一般在 RowDataBound 事件中
执行三步：取数据、找控件、改外观
