repeater 动态添加一行

repeater 动态添加一行

    背景：有时候，需要为列表动态地添加一行，并且在后台代码中能访问到，即repeater在后台动态的添加一行（如果您只需要在前台用js添加一行，那本文不适合您的应用）。当然很多其它的控件可以轻而易举地做到，但显示的样式可能不是我们想要的，所以在这样的情况下，我们需要用repeater做后台动态添加一行；

    现状：在网上主要有，用session来保存状态。额，抛开性能问题不说，这样做也不能保存在页面上输入的数据。所以这次主要实现的是实现保存页面上输入的数据的状态，并在后台动态地添加一行。

    解决方法：在后台恢复页面上的数据并存入DataTable,然后为DataTable添加一新行，并重新绑定；

 

    前台代码：

    <div class="dataTable" >
        <asp:HiddenField ID="hfRptColumns" runat="server" Value="receiver,expense_amount,cut_payment_amount,acutal_amount,bank_no,bank_name" />
        <table cellpadding="1" cellspacing="0" border="1" style=" width:800px">
            <thead>
                <tr>
                    <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><%# Container.ItemIndex+1 %></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="添加一行" /></div>
    </div>

    后台代码

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack) 
            {
                BindData();
            }
        }

        #region 绑定数据源
        /// <summary>
        /// 绑定repeater的数据源
        /// </summary>
        private void BindData() 
        {
            DataTable dt = DefineDataTableSchema(hfRptColumns.Value);
            LoadTestData(dt);
            rptTest.DataSource = dt;
            rptTest.DataBind();
        }

        /// <summary>
        /// 生成测试数据
        /// </summary>
        /// <param name="dt"></param>
        private void LoadTestData(DataTable dt) 
        {
            //默认显示5行
            for (int i = 0; i < 5; i++) 
            {
                DataRow row = dt.NewRow();
                dt.Rows.Add(row);
            }

            //为第一行加载一些数据
            DataRow row0 = dt.Rows[0];
            row0["receiver"] = "Mike.Jiang";
            row0["expense_amount"] = "1000";
            row0["cut_payment_amount"] = "300";
            row0["acutal_amount"] = "700";
            row0["bank_no"] = "325222222232522";
            row0["bank_name"] = "建设银行";
        }

        /// <summary>
        /// 根据repeater相对应的列名，定义数据源datatable的schema
        /// </summary>
        /// <param name="columns">列名</param>
        /// <returns></returns>
        public DataTable DefineDataTableSchema(string columns) 
        {
            DataTable dt = new DataTable();
            string[] columnsAry = columns.Split(',');
            foreach (string str in columnsAry) 
            {
                dt.Columns.Add(str);
            }
            return dt;
        }
        #endregion

        #region 添加一行
        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();
        }
        #endregion
    }

百度云有源代码