GridView的基本应用

它的作用与 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 事件中

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