第讲 datagrid控件应用之二.ppt

第十二讲 DataGrid控件应用之二 教学内容 一、DataGrid控件的编辑列和删除列设计 二、DataGrid控件的模板列设计 三、DataGrid控件的分页功能 四、DataGrid控件应用之二 教学目标 掌握DataGrid控件的编辑列设计方法； 掌握DataGrid控件的删除列设计方法； 掌握DataGrid控件的模板列的设计方法； 掌握DataGrid控件的分页功能； 进一步学习DataGrid控件的应用。 ?一、DataGrid控件的编辑列和删除列设计（1/13）? 示例 DataGrid控件的编辑列和删除列应用 使用数据连接向导将页面连接到数据库product，提取数据表fruitInfo的所有数据到数据集dataSet11中。在页面上放置一个DataGrid1控件，将数据集作为DataGrid1控件的数据源。加入编辑列和删除列到控件，实现编辑和删除功能。 (一) 数据字段列设计 使用属性生成器，加入商品编号、商品名称、等级、单价和数量5个字段到数据字段列中，将商品编号设为只读，防止修改该字段的值。 ?一、 DataGrid控件的编辑列和删除列设计（2/13） (二)? 编辑列设计 展开可用列中的按钮列，将“编辑、更新、取消”列加入到选定的列中， 编辑列的EditCommandColumn属性设置如图。 ?一、 DataGrid控件的编辑列和删除列设计（3/13） ? (三) 删除列设计 展开可用列中的按钮列，将删除列加入到选定的列中，删除列的ButtonColumn属性的设置如下图。 ?一、 DataGrid控件的编辑列和删除列设计（4/13） ? 程序运行后，单击编号为“1004” 所在行中的【编辑】按钮，该按钮变为 “更新”和“取消”两个按钮，右边的非只读字段都变成文本框，以便编辑修改。编辑完后单击【更新】按钮将数据更新到数据库；单击【取消】按钮就取消编辑，恢复原状，如下图。 ?一、 DataGrid控件的编辑列和删除列设计（5/13） ? 在DataGrid控件某行上单击【删除】按钮将弹出一个确认框，在确认框中单击【确定】按钮，将删除该行；若单击【取消】按钮，不会做删除。如下图。 ?一、 DataGrid控件的编辑列和删除列设计（6/13） (四) 后台代码 页面加载时填充数据集，对控件DataGrid1作数据绑定。 private void Page_Load(object sender, System.EventArgs e) { if(!IsPostBack) { sqlDataAdapter1.Fill(dataSet11,fruitInfo); DataGrid1.DataBind(); } } ?一、 DataGrid控件的编辑列和删除列设计（7/13） 单击【编辑】按钮时，将引发控件DataGrid1的EditCommand事件，在该事件中处理编辑功能。 private void DataGrid1_EditCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e) { //进入编辑模式，编辑按钮变成“更新” //和＂取消＂，单元格中出现文本框 DataGrid1.EditItemIndex=e.Item.ItemIndex; this.sqlDataAdapter1.Fill(dataSet11,fruitInfo); this.DataGrid1.DataBind(); } ?一、 DataGrid控件的编辑列和删除列设计（8/13） 单击【取消】按钮时，将引发控件DataGrid1的CancelCommand事件，在该事件中处理取消功能。 private void DataGrid1_CancelCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e) { //跳出编辑模式 LabelMessage.Text=; DataGrid1.EditItemIndex=-1; this.sqlDataAdapter1.Fill(dataSet11,fruitInfo); this.DataGrid1.DataBind(); } 一、 DataGrid控件的编辑列和删除列设计（9/13） ? 单击【更新】按钮时，将引发控件DataGrid1的UpdateCommand事件，在该事件