zoukankan      html  css  js  c++  java
  • repeater 动态添加一行

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

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

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

        前台代码:

    View Code
        <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=" 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>

        后台代码

    View Code
            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

  • 相关阅读:
    欧拉函数的一个性质及其证明
    【机器人M号】题解
    【求和】题解
    uva11292贪心基础题目
    hdu 1009 贪心基础题
    近期计划,理清思路,大步向前
    hdu1712 分组背包
    TOJ3596 二维背包
    hdu1114 完全背包
    BestCoder Round #81 (div.2)1001
  • 原文地址:https://www.cnblogs.com/dataadapter/p/2562885.html
Copyright © 2011-2022 走看看