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控件,并设置属性如下.

<textarea cols="50" rows="15" name="code" class="xhtml:firstline[24]"> <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>
<
4000
;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></textarea>

添加后台代码如下:

]        #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就产生了