Repeater 动态增加删除一行

文章参考：文章参考http://www.cnblogs.com/dataadapter/archive/2012/06/25/2562885.html

效果：

前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="rptTest.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div class="dataTable" >
        <asp:HiddenField ID="hfRptColumns" runat="server" Value="receiver,expense_amount,cut_payment_amount,acutal_amount,bank_no,bank_name" />
        <table cellpadding="" cellspacing="" border="" style=" width:800px">
            <thead>
                <tr>
                    <th></th>
                    <th >
                        序号
                    </th>
                    <th>
                        收款人
                    </th>
                    <th>
                        报销金额
                    </th>
                    <th>
                        扣款金额
                    </th>
                    <th>
                        实付金额
                    </th>
                    <th>
                        银行账号
                    </th>
                    <th>
                        开户行
                    </th>
                </tr>
            </thead>
            <tbody>
                <asp:Repeater ID="rptTest" runat="server">
                    <ItemTemplate>
                        <tr>
                            <td><asp:CheckBox runat="server" ID="ckBox" /></td>
                            <td><%# Container.ItemIndex+ %></td>
                            <td><asp:Label ID="lblReceiver" runat="server" Text='<%#Eval("receiver") %>'></asp:Label></td>
                            <td><asp:TextBox ID="txtExpenseAmount" runat="server" Text='<%#Eval("expense_amount") %>'></asp:TextBox></td>
                            <td><asp:TextBox ID="txtCutPaymentAmount" runat="server" Text='<%#Eval("cut_payment_amount") %>'></asp:TextBox></td>
                            <td><asp:Label ID="lblAcutalAmount" runat="server" Text='<%#Eval("acutal_amount") %>'></asp:Label></td>
                            <td><asp:Label ID="lblBankNo" runat="server" Text='<%#Eval("bank_no") %>'></asp:Label></td>
                            <td><asp:Label ID="lblBankName" runat="server" Text='<%#Eval("bank_name") %>'></asp:Label></td>
                        </tr>
                    </ItemTemplate>
                </asp:Repeater>
            </tbody>
        </table>

        <div>
            <asp:Button ID="btnAddNewRow" runat="server" OnClick="btnAddNewRow_Click" Text="添加一行" />
            <asp:Button ID="btnDel" runat="server" Text="删除选中行" onclick="btnDel_Click" />
        </div>
    </div>
    </form>
</body>
</html>

后台代码：

添加一行：

protected void btnAddNewRow_Click(object sender, EventArgs e)
        {
            //首先，恢复数据源
            DataTable dt = DefineDataTableSchema(hfRptColumns.Value);
            foreach (RepeaterItem item in rptTest.Items)
            {
                DataRow newRow = dt.NewRow();
                newRow["receiver"] = ((Label)item.FindControl("lblReceiver")).Text;
                newRow["expense_amount"] = ((TextBox)item.FindControl("txtExpenseAmount")).Text;
                newRow["cut_payment_amount"] = ((TextBox)item.FindControl("txtCutPaymentAmount")).Text;
                newRow["acutal_amount"] = ((Label)item.FindControl("lblAcutalAmount")).Text;
                newRow["bank_no"] = ((Label)item.FindControl("lblBankNo")).Text;
                newRow["bank_name"] = ((Label)item.FindControl("lblBankName")).Text;
                dt.Rows.Add(newRow);
            }

            //添加一行
            DataRow row = dt.NewRow();
            dt.Rows.Add(row);
            rptTest.DataSource = dt;
            rptTest.DataBind();
        }

删除一行

protected void btnDel_Click(object sender, EventArgs e)
        {
            var arr = new System.Collections.ArrayList();
            DataTable dt = DefineDataTableSchema(hfRptColumns.Value);
            foreach (RepeaterItem item in rptTest.Items)
            {
                var chk = item.FindControl("ckBox") as CheckBox;
                if (chk.Checked) continue;

                DataRow newRow = dt.NewRow();
                newRow["receiver"] = ((Label)item.FindControl("lblReceiver")).Text;
                newRow["expense_amount"] = ((TextBox)item.FindControl("txtExpenseAmount")).Text;
                newRow["cut_payment_amount"] = ((TextBox)item.FindControl("txtCutPaymentAmount")).Text;
                newRow["acutal_amount"] = ((Label)item.FindControl("lblAcutalAmount")).Text;
                newRow["bank_no"] = ((Label)item.FindControl("lblBankNo")).Text;
                newRow["bank_name"] = ((Label)item.FindControl("lblBankName")).Text;
                dt.Rows.Add(newRow);
            }

            rptTest.DataSource = dt;
            rptTest.DataBind();
        }

因为Repeater是服务端控件，所以用它动态增加或删除一行会刷新页面。用户体验远没有用 knockoutjs 绑定的效果好

附：代码下载