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
    }

   示例代碼：rptTest.rar