GirdView,包含DropDownList,DatePicker的数据增加删除,修改

其中日期使用了WdatePicker控件.

<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <mce:script language="javascript" type="text/javascript" src="../../DatePicker/WdatePicker.js" mce_src="DatePicker/WdatePicker.js"></mce:script>

放置一个GridView控件,并设置属性如下.

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None" Width="100%" OnRowCancelingEdit="GridView2_RowCancelingEdit" OnRowDeleting="GridView2_RowDeleting" OnRowEditing="GridView2_RowEditing" OnRowCommand="GridView2_RowCommand" OnRowUpdating="GridView2_RowUpdating" ShowFooter="True"> <RowStyle BackColor="#F7F6F3" ForeColor="#333333" /> <Columns> <asp:TemplateField HeaderText="ID"> <EditItemTemplate> <asp:Label ID="Label2" runat="server" Text='<%# Bind("ID") %>'></asp:Label> </EditItemTemplate> <ItemTemplate> <asp:Label ID="Label2" runat="server" Text='<%# Bind("ID") %>'></asp:Label> </ItemTemplate> <ItemStyle Width="50px" /> <FooterTemplate> <asp:Label ID="Label6" runat="server" Text=""></asp:Label> </FooterTemplate> <FooterStyle BackColor="#FFC0FF" /> </asp:TemplateField> <asp:TemplateField HeaderText="Date"> <EditItemTemplate> <input class="Wdate" type="text" runat="server" style="width: 98%" id="txtTime" value='<%# Bind("Date") %>' readonly="readonly" onfocus="WdatePicker()" /> </EditItemTemplate> <ItemTemplate> <asp:Label ID="Label1" runat="server" Text='<%# Bind("Date") %>'></asp:Label> </ItemTemplate> <HeaderStyle Width="100px" /> <FooterTemplate> <input class="Wdate" type="text" runat="server" style="width: 98%" id="Text1" readonly="readonly" onfocus="WdatePicker()" /> </FooterTemplate> <FooterStyle BackColor="#FFC0FF" /> </asp:TemplateField> <asp:TemplateField HeaderText="Name"> <EditItemTemplate> <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox> </EditItemTemplate> <FooterTemplate> <asp:TextBox ID="TextBox2" runat="server" Width="100%"></asp:TextBox> </FooterTemplate> <ItemTemplate> <asp:Label ID="Label3" runat="server" Text='<%# Bind("Name") %>'></asp:Label> </ItemTemplate> <FooterStyle BackColor="#FFC0FF" /> <ItemStyle Width="100px" /> </asp:TemplateField> <asp:TemplateField HeaderText="Type"> <EditItemTemplate> <asp:DropDownList ID="DropDownList2" runat="server"> <asp:ListItem Value="1">大金龙</asp:ListItem> <asp:ListItem Value="2">海格</asp:ListItem> </asp:DropDownList> </EditItemTemplate> <ItemTemplate> <asp:Label ID="Label4" runat="server" Text='<%# Bind("Type") %>'></asp:Label> </ItemTemplate> <HeaderStyle Width="100px" /> <FooterTemplate> <asp:DropDownList ID="DropDownList1" runat="server" Width="100%"> <asp:ListItem Text="大金龙" Value="1"></asp:ListItem> <asp:ListItem Text="海格" Value="2"></asp:ListItem> </asp:DropDownList> </FooterTemplate> <FooterStyle BackColor="#FFC0FF" /> </asp:TemplateField> <asp:TemplateField HeaderText="Count"> <EditItemTemplate> <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Count") %>'></asp:TextBox> </EditItemTemplate> <FooterTemplate> <asp:TextBox ID="TextBox3" runat="server" Width="100%"></asp:TextBox> </FooterTemplate> <ItemTemplate> <asp:Label ID="Label5" runat="server" Text='<%# Bind("Count") %>'></asp:Label> </ItemTemplate> <FooterStyle BackColor="#FFC0FF" /> </asp:TemplateField> <asp:TemplateField HeaderText="Cost"> <EditItemTemplate> <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("Cost") %>'></asp:TextBox> </EditItemTemplate> <FooterTemplate> <asp:TextBox ID="TextBox4" runat="server" Width="100%"></asp:TextBox> </FooterTemplate> <ItemTemplate> <asp:Label ID="Label6" runat="server" Text='<%# Bind("Cost") %>'></asp:Label> </ItemTemplate> <FooterStyle BackColor="#FFC0FF" /> </asp:TemplateField> <asp:TemplateField HeaderText="操作" ShowHeader="False"> <EditItemTemplate> <asp:Button ID="Button1" runat="server" CausesValidation="True" CommandName="Update" Text="更新" /> <asp:Button ID="Button2" runat="server" CausesValidation="False" CommandName="Cancel" Text="取消" /> </EditItemTemplate> <FooterTemplate> <asp:Button CssClass="button" ID="Button1" CommandName="Save" runat="server" Text="保存" /> <asp:Button CssClass="button" ID="Button2" CommandName="Clear" runat="server" Text="清除" /> </FooterTemplate> <ItemTemplate> <asp:Button ID="Button1" runat="server" CausesValidation="False" CommandName="Edit" Text="编辑" /> <asp:Button ID="Button2" runat="server" CausesValidation="False" CommandName="Delete" Text="删除" /> </ItemTemplate> <ControlStyle CssClass="button" /> <FooterStyle BackColor="#FFC0FF" HorizontalAlign="Right" /> <ItemStyle HorizontalAlign="Right" /> </asp:TemplateField> </Columns> <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /> <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /> <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <EditRowStyle BackColor="Lavender" /> <AlternatingRowStyle BackColor="White" ForeColor="#284775" /> </asp:GridView>

添加后台代码如下:

#region 属性 /// <summary> /// 数据 /// </summary> private DataTable data { get { if (Cache["data"] != null) { return (DataTable)Cache["data"]; } else { return null; } } set { Cache["data"] = value; } } #endregion #region 事件 /// <summary> /// Load /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { DataTable dt = new DataTable(); dt.Columns.Add("ID", typeof(int)); dt.Columns.Add("Date", typeof(string)); dt.Columns.Add("Name", typeof(string)); dt.Columns.Add("Type", typeof(string)); dt.Columns.Add("Count", typeof(string)); dt.Columns.Add("Cost", typeof(string)); DataRow dr1 = dt.NewRow(); dr1["ID"] = "1"; dr1["Date"] = "2010-07-05"; dr1["Name"] = "出行观光用车"; dr1["Type"] = "大金龙"; dr1["Count"] = "5"; dr1["Cost"] = "600.43"; dt.Rows.Add(dr1); DataRow dr2 = dt.NewRow(); dr2["ID"] = "2"; dr2["Date"] = "2010-07-06"; dr2["Name"] = "出行会议用车"; dr2["Type"] = "海格"; dr2["Count"] = "6"; dr2["Cost"] = "1200.43"; dt.Rows.Add(dr2); data = dt; bind(); } } /// <summary> /// 编辑 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void GridView2_RowEditing(object sender, GridViewEditEventArgs e) { GridView2.EditIndex = e.NewEditIndex; bind(); ((DropDownList)GridView2.Rows[e.NewEditIndex].Cells[3].Controls[1]).SelectedValue = data.Rows[e.NewEditIndex]["Type"].ToString() == "大金龙" ? "1" : "2"; } /// <summary> /// 删除 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void GridView2_RowDeleting(object sender, GridViewDeleteEventArgs e) { foreach (DataRow dr in data.Rows) { if (dr["ID"].ToString() == GridView2.DataKeys[e.RowIndex].Value.ToString()) { data.Rows.Remove(dr); data.AcceptChanges(); break; } } bind(); } /// <summary> /// 取消 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void GridView2_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e) { GridView2.EditIndex = -1; bind(); } /// <summary> /// 保存,清除 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void GridView2_RowCommand(object sender, GridViewCommandEventArgs e) { if (e.CommandName == "Save" || e.CommandName == "Clear") { Label liId = (Label)GridView2.FooterRow.Cells[0].Controls[1]; HtmlInputText txtDate = (HtmlInputText)GridView2.FooterRow.Cells[1].Controls[1]; TextBox txtName = (TextBox)GridView2.FooterRow.Cells[2].Controls[1]; DropDownList ddlType = (DropDownList)GridView2.FooterRow.Cells[3].Controls[1]; TextBox txtCount = (TextBox)GridView2.FooterRow.Cells[4].Controls[1]; TextBox txtCost = (TextBox)GridView2.FooterRow.Cells[5].Controls[1]; if (e.CommandName == "Save") { DataRow dr = data.NewRow(); dr["ID"] = liId.Text; dr["Date"] = txtDate.Value; dr["Name"] = txtName.Text; dr["Type"] = ddlType.SelectedItem.Text; dr["Count"] = txtCount.Text; dr["Cost"] = txtCost.Text; data.Rows.Add(dr); bind(); } if (e.CommandName == "Clear") { txtDate.Value = ""; txtName.Text = ""; txtCount.Text = ""; txtCost.Text = ""; } } } /// <summary> /// 修改 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void GridView2_RowUpdating(object sender, GridViewUpdateEventArgs e) { foreach (DataRow dr in data.Rows) { if (dr["ID"].ToString() == GridView2.DataKeys[e.RowIndex].Value.ToString()) { //dr["ID"] = ((TextBox)(GridView2.Rows[e.RowIndex].Cells[0].Controls[1])).Text.ToString().Trim(); dr["Date"] = ((HtmlInputText)(GridView2.Rows[e.RowIndex].Cells[1].Controls[1])).Value; dr["Name"] = ((TextBox)(GridView2.Rows[e.RowIndex].Cells[2].Controls[1])).Text.ToString().Trim(); dr["Type"] = ((DropDownList)(GridView2.Rows[e.RowIndex].Cells[3].Controls[1])).SelectedItem.Text; dr["Count"] = ((TextBox)(GridView2.Rows[e.RowIndex].Cells[4].Controls[1])).Text.ToString().Trim(); dr["Cost"] = ((TextBox)(GridView2.Rows[e.RowIndex].Cells[5].Controls[1])).Text.ToString().Trim(); break; } } GridView2.EditIndex = -1; bind(); } #endregion #region 方法 /// <summary> /// 绑定数据 /// </summary> private void bind() { GridView2.DataSource = data; GridView2.DataKeyNames = new string[] { "ID" }; GridView2.DataBind(); Label liId = (Label)GridView2.FooterRow.Cells[0].Controls[1]; liId.Text = Convert.ToString(data.Rows.Count + 1); } #endregion

如此一个可以动态编辑数据的GridView就产生了