它的作用与 Repeater 是相同的,均是用来显示数据的。
注:操作 Info 表;建数据集 MyDB
一、GridView显示数据:
1. 在VS右侧的工具箱中,找到数据栏,将 GridView 拖拽进入页面;
2. 在后端代码的 Page_Load 事件中绑定数据源
GridView1.DataSource = new InfoTableAdapter().GetData();
GridView1.DataBind();
此时运行即可得到未加任何修饰的表,如下图:
![](https://i-blog.csdnimg.cn/blog_migrate/de15895e6c359681b468b0bbc3298871.jpeg)
图 1-1
EmptyDataText : 绑定数据为空时显示的文本
二、编辑列
选中 GridvVew ,点开右侧出现的小箭头,选“编辑列”(图 1-2),进入编辑字段界面(图1-3):
![](https://i-blog.csdnimg.cn/blog_migrate/334342c602c965e665a1999568ccbcbd.jpeg)
图 1-2
![](https://i-blog.csdnimg.cn/blog_migrate/6ef2a012c279f1925eaf9e4d12ab14d1.jpeg)
图 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 所在的行为交替行,最后一行即为脚注。
![](https://i-blog.csdnimg.cn/blog_migrate/cdcf8f932a87b4bc495534650c78f6c3.jpeg)
图 1-4
四、外观
1. 整体的外观:选中 GridvVew ,点开右侧出现的小箭头,选“自动套用格式”(图 1-2),进入格式选择界面,根据自己的喜好进行选择风格即可,例如:“红糖”
![](https://i-blog.csdnimg.cn/blog_migrate/8183256835aee2c4357eab5873da3cf1.jpeg)
图 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.此时运行即可得到下图:
![](https://i-blog.csdnimg.cn/blog_migrate/5b8dc699ac4f5656d31cc4a77a88a562.jpeg)
图 2-1
二、修改生日的显示方式,改为“1990年1月1日”格式
打开编辑列界面(图 1-1),在B部分选中 生日 列,在C部分找到 数据 -- DataFormatString ,设置值为: {0:yyyy年MM月dd日} ,此时,运行如下图:
![](https://i-blog.csdnimg.cn/blog_migrate/af46579835aa2e4132b3359a44c35ba9.jpeg)
图 2-2
三、将性别改为 男/女,民族改为汉字,此时就要在 RowDataBound 事件中写代码显示了。
1. 选中GridView,右击-->属性, 出现下图:
![](https://i-blog.csdnimg.cn/blog_migrate/61a95264675f374cac0390c28697511e.jpeg)
图 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() 方法来获取其类型。
![](https://i-blog.csdnimg.cn/blog_migrate/0955a448b3bc3dd21a16256d6b92cee5.jpeg)
图 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>
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/6399564fdf402e95960adf2471335d22.jpeg)
图 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>
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/5fab286bf2a9fd4efdaa7cdd889b7eb7.jpeg)
图 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. 效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/bf628f9dd430f8b76205f93aa676b9c9.jpeg)
图 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;
}
}
}
}
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/c4c1682c736814ce01662c7a5bcf17a9.jpeg)
图 3-4
注:涉及到修改 Gridview 中数据的情况,一般在 RowDataBound 事件中
执行三步:取数据、找控件、改外观