它的作用与 Repeater 是相同的,均是用来显示数据的。

注:操作 Info 表;建数据集 MyDB

一、GridView显示数据:

1. 在VS右侧的工具箱中,找到数据栏,将 GridView 拖拽进入页面;

2. 在后端代码的 Page_Load 事件中绑定数据源

GridView1.DataSource = new InfoTableAdapter().GetData();
         GridView1.DataBind();

此时运行即可得到未加任何修饰的表,如下图:


android gridview 显示 gridview的使用_Text

              图 1-1

EmptyDataText : 绑定数据为空时显示的文本

二、编辑列

选中 GridvVew ,点开右侧出现的小箭头,选“编辑列”(图 1-2),进入编辑字段界面(图1-3):


android gridview 显示 gridview的使用_字段_02

          图 1-2


android gridview 显示 gridview的使用_android gridview 显示_03

                     图 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 所在的行为交替行,最后一行即为脚注。


android gridview 显示 gridview的使用_Text_04

             图 1-4

四、外观

1. 整体的外观:选中 GridvVew ,点开右侧出现的小箭头,选“自动套用格式”(图 1-2),进入格式选择界面,根据自己的喜好进行选择风格即可,例如:“红糖”


android gridview 显示 gridview的使用_Text_05

      图 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.此时运行即可得到下图:


android gridview 显示 gridview的使用_android gridview 显示_06

                          图 2-1

二、修改生日的显示方式,改为“1990年1月1日”格式

打开编辑列界面(图 1-1),在B部分选中 生日 列,在C部分找到 数据 -- DataFormatString  ,设置值为: {0:yyyy年MM月dd日} ,此时,运行如下图: 


android gridview 显示 gridview的使用_android gridview 显示_07

                        图 2-2

三、将性别改为 男/女,民族改为汉字,此时就要在 RowDataBound 事件中写代码显示了。

1. 选中GridView,右击-->属性,  出现下图:


android gridview 显示 gridview的使用_android gridview 显示_08

               图 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() 方法来获取其类型。


android gridview 显示 gridview的使用_字段_09

                         图 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>

效果图:


android gridview 显示 gridview的使用_字段_10

      图 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>

效果图:


android gridview 显示 gridview的使用_字段_11

        图 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. 效果图:


android gridview 显示 gridview的使用_字段_12

                图 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;
                 }
             }
         }
     }

效果图:


android gridview 显示 gridview的使用_Text_13

                      图 3-4

注:涉及到修改 Gridview 中数据的情况,一般在 RowDataBound 事件中

执行三步:取数据、找控件、改外观