使用Repeater实现类似GridView编辑功能
Repeater控件他给了我们编程人员完好的可编辑性,而且执行效率是微软三个数据控件最快的(相关资料可以参考这里) ,但是由于自身局限性(没有EditTemplate属性)还不能很好的实现类似于Gridview中的添加、修改、删除功能,但是是不是不能实现了呢,嘿嘿。
要实现上面功能,首先有两个技术点要解决:
1、
2、
第一个可以通过linkbutton的CommandName和CommandArgument两个属性进行设置,代码如下
<tr>
<td style="background-color: #FFF; height:25px; width:30%;">
<%# DataBinder.Eval(Container.DataItem, "a")%>
</td>
<td style="background-color: #FFF; width:30%;">
<%# DataBinder.Eval(Container.DataItem,"b") %>
</td>
<td style="background-color: #FFF; width:30%;">
<%# DataBinder.Eval(Container.DataItem,"c") %>
</td>
<td style="background-color: #FFF; width:10%;">
<asp:LinkButton runat="server" ID="lbtEdit" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ID")%>'
CommandName="Edit" Text="编辑"></asp:LinkButton>
<asp:LinkButton runat="server" ID="lbtDelete" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ID")%>'
CommandName="Delete" Text="删除"></asp:LinkButton>
</td>
</tr>
然后在后台设置Repeater的OnItemDataBound事件,通过
e.CommandName
可以确定是什么操作。
而关于第二点有有点二了,暂时没找到更好的解决方案。我是这样的,在ItemTemplate中加入两个Panel分别放正常和编辑状态显示的内容,如下
<ItemTemplate>
<asp:Panel ID="plItem" runat="server">
<tr>
<td style="background-color: #FFF; height: 25px; width: 30%;">
<%# DataBinder.Eval(Container.DataItem, "a")%>
</td>
<td style="background-color: #FFF; width: 30%;">
<%# DataBinder.Eval(Container.DataItem,"b") %>
</td>
<td style="background-color: #FFF; width: 30%;">
<%# DataBinder.Eval(Container.DataItem,"c") %>
</td>
<td style="background-color: #FFF; width: 10%;">
<asp:LinkButton runat="server" ID="lbtEdit" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ID")%>'
CommandName="Edit" Text="编辑"></asp:LinkButton>
<asp:LinkButton runat="server" ID="lbtDelete" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ID")%>'
CommandName="Delete" Text="删除"></asp:LinkButton>
</td>
</tr>
</asp:Panel>
<asp:Panel ID="plEdit" runat="server">
<tr>
<td style="background-color: #FFF; height: 25px; width: 30%;">
<asp:TextBox ID="txtA" Text='<%# DataBinder.Eval(Container.DataItem,"a") %>' runat="server"></asp:TextBox>
</td>
<td style="background-color: #FFF; width: 30%;">
<asp:TextBox ID="txtB" Text='<%# DataBinder.Eval(Container.DataItem,"b") %>' runat="server"></asp:TextBox>
</td>
<td style="background-color: #FFF; width: 30%;">
<asp:TextBox ID="txtC" Text='<%# DataBinder.Eval(Container.DataItem,"c") %>' runat="server"></asp:TextBox>
</td>
<td style="background-color: #FFF; width: 80px; width: 10%;">
<asp:LinkButton runat="server" ID="lbtUpdate" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ID")%>'
CommandName="Update" Text="更新"></asp:LinkButton>
<asp:LinkButton runat="server" ID="lbtCancel" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ID")%>'
CommandName="Cancel" Text="取消"></asp:LinkButton>
</td>
</tr>
</asp:Panel>
</ItemTemplate>
这样有一个缺点,会在每行tr标签前后多出div标签,虽然这不影响显示(在IE和FF中测试过),但是这给页面造成了垃圾代码,希望那位知道其他解决方案告知下,我在这里就抛砖引玉了:)
接着由后台判断,代码如下
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
if (m_dt.Rows[e.Item.ItemIndex]["ID"].ToString() != m_iID.ToString())
{
((Panel)e.Item.FindControl("plItem")).Visible = true;
((Panel)e.Item.FindControl("plEdit")).Visible = false;
}
else
{
((Panel)e.Item.FindControl("plItem")).Visible = false;
((Panel)e.Item.FindControl("plEdit")).Visible = true;
}
}
}
![](/Images/OutliningIndicators/None.gif)
protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName == "Edit")
{
m_iID = int.Parse(e.CommandArgument.ToString());
}
else if (e.CommandName == "Cancel")
{
m_iID = -1;
}
else if (e.CommandName == "Update")
{
//Update![](https://www.cnblogs.com/Images/dot.gif)
.
![](/Images/OutliningIndicators/InBlock.gif)
string sA = ((TextBox)this.Repeater1.Items[e.Item.ItemIndex].FindControl("txtA")).Text.Trim();
string sB = ((TextBox)this.Repeater1.Items[e.Item.ItemIndex].FindControl("txtB")).Text.Trim();
string sC = ((TextBox)this.Repeater1.Items[e.Item.ItemIndex].FindControl("txtC")).Text.Trim();
![](/Images/OutliningIndicators/InBlock.gif)
this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), "key", "alert('更新ID:" +
e.CommandArgument + ";页面值:A," + sA + "----B," + sB + "----C," + sC + "');", true);
}
else if (e.CommandName == "Delete")
{
//Delete![](https://www.cnblogs.com/Images/dot.gif)
.
this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), "key", "alert('删除ID:" + e.CommandArgument + "');", true);
}
![](/Images/OutliningIndicators/InBlock.gif)
Repeater1.DataSource = this.InitDataTable();
Repeater1.DataBind();
}
效果可以点这里进行浏览
代码点击这里
^o^
要实现上面功能,首先有两个技术点要解决:
1、
2、
第一个可以通过linkbutton的CommandName和CommandArgument两个属性进行设置,代码如下
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
然后在后台设置Repeater的OnItemDataBound事件,通过
![](/Images/OutliningIndicators/None.gif)
而关于第二点有有点二了,暂时没找到更好的解决方案。我是这样的,在ItemTemplate中加入两个Panel分别放正常和编辑状态显示的内容,如下
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
这样有一个缺点,会在每行tr标签前后多出div标签,虽然这不影响显示(在IE和FF中测试过),但是这给页面造成了垃圾代码,希望那位知道其他解决方案告知下,我在这里就抛砖引玉了:)
接着由后台判断,代码如下
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
效果可以点这里进行浏览
代码点击这里
^o^