DataGrid控件应用之一

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,*,ASP.NET,程序设计,李德奇主编,28,第十一讲 DataGrid控件应用之一,教学内容,一、DataGrid控件概述,二、数据字段列设计,三、超级链接列设计,四、按钮列设计,五、DataGrid控件应用之一,教学目标,掌握DataGrid控件数据字段列设计；,掌握DataGrid控件超级链接列设计；,掌握DataGrid控件按钮列设计；,掌握购物车技术；,学习DataGrid控件的初步应用。,2,一、DataGrid控件概述,(1/8),DataGrid控件的功能十分强大，可以对二维表中的数据显示、排序和分页等，还可以编辑和删除数据，利用模板列可以向它加入各种子控件，实现十分复杂的功能。,(一)常用属性,DataSource,属性：绑定到控件的数据源，可以是数组、数据集、数据视图等。,DataMember属性：,若DataSource属性指定的是一个数据集，则DataMember属性指定到该数据集的一个数据表。,DataKeyField属性：,用于填充DataKey集合的数据源中的字段，一般应指定到数据表的主键字段。,SelectedIndex属性：,当前选定项的索引号，未选择任何项时为-1。,AutoGenerateColumns属性：,是否自动生成控件的数据绑定列，默认为true。,3,AllowPaging属性：,设置是否打开分页功能，默认为false(不分页)。,AllowCustomPaging属性：,设置是否打开对自定义分页的支持，默认为false。,BackImageUrl属性：,背景图片的路径及文件名。意味着控件可以使用一幅图片作为背景。,ShowHeader属性：,是否显示列标头，默认为true。,ShowFooter属性：,是否显示页脚注，默认为false。,(二)常用事件,DataGrid控件的事件与DataList控件的事件有些类似。因为可以向控件内加入按钮列和模板列等，子控件的事件被反升至容器控件，这些事件称为反升事件。例如CancelCommand、DeleteCommand、EditCommand、ItemCommand等都是，这些事件与子控件的关系同DataList控件。,一、DataGrid控件概述,(2/8),4,ItemCommand事件：,在控件生成事件时发生。向DataGrid控件加入按钮列控件时，其CommandName属性可以设置成7.2节规定的名字，或程序员给定的名字。当这些按钮被单击时，都将引发ItemCommand事件，在这个事件处理程序中通过判断按钮控件的CommandName属性确定引发事件的按钮所在列。,SelectedIndexChanged事件：,当前的选择发生改变时激发。,PageIndexChanged事件：,当前页索引发生改变时激发。,ItemCreated事件：,在控件内创建项时激发。若要对控件内的子控件做某些初始设置时，那些代码要写在这个事件处理程序中。,(三)HTML标记,一、DataGrid控件概述,(3/8),5,(四)使用DataGrid控件的一般步骤,将DataGrid控件拖入到页面后，一般需要对其做以下工作。,1.绑定数据,为了在DadaGrid表格中显示数据源的数据，必须将控件绑定到数据源，数据源一般是一个数据集，它对应于一个数据库。,使用数据连接向导做数据连接，便于之后在属性窗口中设置属性和对属性生成器的操作。如果采用程序代码连接数据库，在DataGrid控件的属性窗口和属性生成器中将看不到数据集、表和字段，不便于操作。,使用数据连接向导将数据库MMIS的数据表employeeInfo连接到页面并生成数据集dataSet11后，再在DataGrid1控件的属性窗口指定DataSource、DataMember和DataKeyFiel属性，操作见下图。,一、DataGrid控件概述,(4/8),6,一、DataGrid控件概述,(5/8),7,虽然已经指定了DataGrid控件的3个数据绑定属性，此时还不能显示数据，必须填充数据集，并调用DataBind方法进行数据绑定才能显示数据。这个操作的代码一般这样写：,private void Page_Load(object sender, System.EventArgs e),if(!IsPostBack),sqlDataAdapter1.Fill(dataSet11,employeeInfo);,DataGrid1.DataBind();,一、DataGrid控件概述,(6/8),8,2.美化外观,为了增强DataGrid控件的表现力，需要对控件的外观作必要的修饰。外观的美化工作可以通过属性窗口设置外观属性或通过自动套用格式和使用属性生成器实现。,使用自动套用格式来美化外观的做法是:右击控件，在弹出菜单上单击【自动套用格式】，然后选择一种格式，单击【确定】。,一、DataGrid控件概述,(7/8),9,使用属性生成器不但可以设置DataGrid控件的外观，还可以确定控件的行为方式，如指定分页，加入按钮列、超级链接列等。右击控件，再在弹出菜单上单击【属性生成器】，通过“格式”和“边框” 对控件外观的设置，如下图。,一、DataGrid控件概述,(8/8),10,二、数据字段列设计,(1/3),DataGrid控件的数据字段列是默认的列，如果没有数据字段列，DataGrid控件就不能显示数据源的数据。默认的情况下在表格中显示数据集中的所有字段，每个字段为一列，列的顺序为字段在数据集中的顺序。注意，仅支持数值类型、字符（串）类型、日期类型和Decimal类型的显示，其他类型（例如图片）无法直接显示在单元格中。,DataGrid控件的AutoGenerateColumns属性设置是否在控件中自动生成数据字段列，默认为true，显示所有字段列。,在控件中有选择性地显示某些数据字段列，有3种办法可选：,1.在提取数据到数据集中时，用select查询语句设定筛选字段名。如“select 姓名，工资 from employeeInfo”仅提取姓名和工资到数据源，将来仅显示姓名和工资这两个字段，并且SQL语句中字段名的排列顺序与DataGrid表格控件中数据字段列的顺序相同。如果还需要更多的字段参与其他运算，那就需要另找途径。,11,2.在HTML标记中设定。设置控件的AutoGenerateColumns属性为false，取消自动生成数据字段列的功能，在DataGrid控件的HTML标记中增加数据字段列标记。,3.使用属性生成器。这种方法方便快捷。,单击DataGrid控件属性窗口下部的“,属性生成器,”超链接，打开控件的属性生成器，在左侧的项目框中选择“列”，如下图。,二、数据字段列设计,(2/3),去掉“在运行时自动创建列”前小方框内的“” 。,在“可用列” 中选择“数据字段”，单击【】按钮将该字段移入已选池中。,12,已选池右侧的“”、“”和“” 按钮用于调整列的显示顺序或移去已选字段。在 “BoundColumn属性”区内，可以编辑已选池中某列的属性。设置的DataGrid表格的显示效果如下图,二、数据字段列设计,(3/3),13,三、超级链接列设计,(1/5),向DataGrid控件添加超级链接列的工作一般在属性生成器中进行。下例中使用product数据库的fruitInfo数据表作为DataGrid控件的数据源。在这个数据表中，有一个“详情网页URL”字段。假定在“详情网页”中详细介绍了这种水果的产地、品种、营养价值等相关资料。将每种水果的详情网页的URL记录于“详情网页URL”字段中。在DataGrid表格中显示各种水果的少量字段，增加一个超级链接列，使能够导航到各种水果的详情网页上去。,首先将各水果的详情网页设计好，每种水果一页或多种水果共用一页，并将每页的URL记录到fruitInfo数据表对应的“详情网页URL”字段中去。可以使用相对路径，若某详情网页的文件名为WebForm2.aspx，可直接在其“详情网页URL”字段中填入“WebForm2.aspx” 。,14,设计主页：向页面拖入一个DataGrid控件创建对象DataGrid1，使用数据连接向导将网页连接到数据库product，提取fruitInfo数据表的所有数据到数据集dataSet11中，将它作为控件DataGrid1的数据源。,三、超级链接列设计,(2/5),打开控件DataGrid1的属性生成器，如右图。为控件指定商品编号、商品名称、产地、等级和单价作为数据字段。再向控件添加一个超级链接列，导航到每种水果的详情网上。,15,在“可用列”列表中选择“超级链接列”，单击【】右移按钮将超级链接列加入到选定的列中，就可以为该列编辑HyperLinkColumn属性了。对HyperLinkColumn属性的各项目说明如下：,页眉文本,：即该列的标头文本，说明该列是什么内容。,页眉图象,：页眉也可以用一幅图片表示，可单击右侧的“”浏览按钮找到图片文件。如果既指定页眉文本又指定页眉图象仅显示页眉图象。,页脚文本：,页的脚注，对列中内容的补充说明。若设置了该项内容，需要将DataGrid控件的ShowFooter属性设置为true。本例页脚文本中输入“不可不看”。,文本：,该列中各单元格中以超链接形式显示的文本。若希望该列各单元格显示相同的超链接文本，就在这里设置。本例输入“更多详情”。,三、超级链接列设计,(3/5),16,文本字段：,若要该列中显示不同的超链接文本，就需要指定该属性。如表格的每行为一个大学的资料，在清华大学这一行的超链接要显示“去清华”，就需要在数据表中专门设计一列保存这个内容，在属性生成器中就将超级链接列的“文本字段”指定为该列。也可以借用数据表的已有字段，如用“学校名称” ，那超级链接列各单元格显示的是各学校名字的超链接文本。如果既指定“文本”又指定“文本字段”，该列显示的超链接文本为“文本字段”的内容。,URL：,程序运行后单击该列的超链接标记要导航去的URL。,URL字段：,若单击该列不同的单元格要导航到不同的位置，就需要设置该项内容。,三、超级链接列设计,(4/5),17,下图是以上设计的DataGrid控件的运行效果。,可以发现，使用超级链接列并不需要为此编写任何后台代码，显得简单易行。事物总有两面性，不需要编写代码当然简单，但若在导航到其他页面之前需要编写一些代码做数据处理的话，这些代码就没有可供利用的事件，这时就要使用按钮列才可以做到。,三、超级链接列设计,(5/5),18,四、按钮列设计,设计按钮列一般也在属性生成器中进行，打开属性生成器的“列”选项，如右图。,在“可用列”中选择“按钮列”（不要展开它），将它移到“选定的列”中。再设置ButtonColumn属性， “按钮类型”选择项可选PushButton(弹压按钮)或LinkButton(链接按钮)。,19,五、 DataGrid控件应用之一,(1/9),以下示例将水果信息展示在一个DataGrid控件中，控件有“买1公斤”和“退1公斤” 两个按钮列。另一个DataGrid控件实现显示购物车信息。效果图如下。,20,(一)展示商品设计,新建一个ASP.NET的Web应用程序项目，拖入2个DataGrid控件到页面，左边的DataGrid1用于展示商品，右边的DataGrid2用作显示购物车数据。使用数据连接向导将页面连接到数据库product，提取数据表fruitInfo的所有数据到数据集dataSet11中。在属性窗口指定DataGrid1的数据源为数据集dataSet11。,为控件DataGrid1确定控件的数据字段列如上图。,(二)按钮列设计,打开属性生成器的“列”选项，为控件DataGrid1加入2个按钮列“买1公斤”和“退1公斤”，设计过程同上。,五、 DataGrid控件应用之一,(2/9),21,后台代码,首先为Form1类定义两个字段级变量，用于购物车的表对象和数据视图。,private DataTable ShopCart;,private DataView ShopCartView;,页面加载时定义购物车对象，对DataGrid1和DataGrid2做数据绑定。,private void Page_Load(object sender, System.EventArgs e),if(SessionShopCart=null),ShopCart=new DataTable();,ShopCart.Columns.Add(new DataColumn(编号,typeof(string);,ShopCart.Columns.Add(new DataColumn(品名,typeof(string);,ShopCart.Columns.Add(new DataColumn(单价,typeof(double);,ShopCart.Columns.Add(new DataColumn(数量,typeof(double);,ShopCart.Columns.Add(new DataColumn(金额,typeof(double);,SessionShopCart=ShopCart;,五、 DataGrid控件应用之一,(3/9),22,else,ShopCart=(DataTable)SessionShopCart;,ShopCartView=new DataView(ShopCart);,DataGrid2.DataSource=ShopCartView;,DataGrid2.DataBind();,if(!IsPostBack),this.Label2.Visible=false;,this.Label3.Visible=false;,this.LabelMoney.Visible=false;,this.DataGrid2.Visible=false;,sqlDataAdapter1.Fill(dataSet11,fruitInfo);,DataGrid1.DataBind();,五、 DataGrid控件应用之一,(4/9),23,按钮列“买1公斤”和“退1公斤”的CommandName属性值不是规定的标准名字，因此它们的单击事件被反升至控件 DataGrid1的ItemCommand事件中，单击【买1公斤】或【退1公斤】按钮的事件处理程序都要写在DataGrid1_ItemCommand事件中，通过判别两个按钮列的CommandName属性来区分单击的究竟是“买1公斤”还是“退1公斤”。,private void DataGrid1_ItemCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e),string BH=e.Item.Cells2.Text;,string PM=e.Item.Cells3.Text;,double JG=double.Parse(e.Item.Cells5.Text);,if(e.CommandName=buy),ShopCartView.Sort=编号;,int n=ShopCartView.Find(BH);,if(n=-1),五、 DataGrid控件应用之一,(5/9),24,DataRow dr=ShopCart.NewRow();,dr编号=BH;,dr品名=PM;,dr单价=JG;,dr“数量”=1;,dr金额=JG;,ShopCart.Rows.Add(dr);,this.Label2.Visible=true;,this.Label3.Visible=true;,this.LabelMoney.Visible=true;,this.DataGrid2.Visible=true;,else,ShopCartViewn数量=(double)ShopCartViewn数量+1;,ShopCartViewn金额=(double)ShopCartViewn金额+JG;,ShopCartView.Sort=null;,五、 DataGrid控件应用之一,(6/9),25,if(e.CommandName=remove),ShopCartView.Sort=编号;,int n=ShopCartView.Find(BH);,if(n=0),if(double)ShopCartViewn“数量”1),ShopCartViewn数量=(double)ShopCartViewn数量-1;,ShopCartViewn金额=(double)ShopCartViewn金额-JG;,else,ShopCartView.Delete(n);,ShopCartView.Sort=null;,五、 DataGrid控件应用之一,(7/9),26,double SUM=0;,if(ShopCartView.Count=0),this.Label2.Visible=false;,this.Label3.Visible=false;,this.LabelMoney.Visible=false;,this.DataGrid2.Visible=false;,else,for(int i=0;iShopCartView.Count;i+),SUM+=(double)ShopCartViewi金额;,this.LabelMoney.Text=SUM.ToString()+元;,sqlDataAdapter1.Fill(dataSet11,fruitInfo);,DataGrid1.DataBind();,ShopCartView=new DataView(ShopCart);,DataGrid2.DataSource=ShopCartView;,DataGrid2.DataBind();,五、 DataGrid控件应用之一,(8/9),27,(四)获取按钮被按下那一行的数据,由后台代码可以看到，要获取按钮被按下那一行的数据，可以利用DataGrid控件ItemCommand事件的参数e，e.Item持有被按下行的数据。至于分辨该行的列字段，可以利用其Cells集合，如：,string BH=e.Item.Cells2.Text;,就是用来获取按钮被按下那一行的第3列的文本。,五、 DataGrid控件应用之一,(9/9),28,