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 绑定的效果好

附：代码下载

Repeater 动态增加删除一行的更多相关文章

JS动态增加删除UL节点LI
JS如何动态增加删除UL节点LI及相关内容. <ul id="ul"> <li id=1>11111111111111111<a href=" ...
Hadoop 2.6.3动态增加/删除DataNode节点
假设集群操作系统均为:CentOS 6.7 x64 Hadoop版本为:2.6.3 一.动态增加DataNode 1.准备新的DataNode节点机器,配置SSH互信,可以直接复制已有DataNode ...
jquery动态加入删除一行数据
<html> <head> <title>加入.删除一行</title> <meta http-equiv="content-type& ...
wpf动态增加删除控件
我在xaml中定义了一个名字为morepictureWrapPan为WrapPanel,然后将控件添加在此WrapPanel中.由于要实现控件的删除功能,所以增加的textbox和button的名字都 ...
jquery validate 动态增加删除验证规则（转载）
页面加载完成初始化form validate $("#user_regForm").validate({ errorPlacement: function(error, eleme ...
jquery validate 动态增加删除验证规则
增加规则示例: $('.class').rules('add',{ required: true, messages:{ required: '这是必填,请填写', } }); 删除规则示例: $(' ...
table动态增加删除
基于网上代码修改实现动态添加表数据行 <!DOCTYPE html> <html lang="cn"> <html> <head> ...
JQuery动态增加删除元素
<form action="" method="post" enctype="multipart/form-data"> < ...
MVC中用jQuery加BootStrap实现动态增加删除文本输入框！
http://www.freejs.net/article_biaodan_278.html 这是在网上找到方法,我修改了一下实合我的项目,发博只为收藏记录并加深记忆. 修改后效果如下 @model ...

随机推荐

FZU 2213 Common Tangents 第六届福建省赛
题目链接:http://acm.fzu.edu.cn/problem.php?pid=2213 题目大意:两个圆,并且知道两个圆的圆心和半径,求这两个圆共同的切线有多少条,若有无数条,输出-1,其他条 ...
[hadoop转载]tearsort
1TB排序通常用于衡量分布式数据处理框架的数据处理能力.Terasort是Hadoop中的的一个排序作业,在2008年,Hadoop在1TB排序基准评估中赢得第一名,耗时209秒.那么Tera ...
《Differential Equations with Boundary-Value Problems》-chaper2-一阶线性方程
学习微分方程中,一个很常见的疑惑就是,我们所熟悉的非齐次微分方程的通解是对应齐次方程的通解加特解,但是更为重要的是,我们需要知道这句话是怎么得来的. 我们探讨一个未知问题的一般思路是将其不断的与已知已 ...
C语言求x的y次方，自定义函数，自己的算法
我是一名高二中学生,初中时接触电脑,非常酷爱电脑技术,自己百度学习了有两年多了,编程语言也零零散散的学习了一点,想在大学学习计算机专业,所以现在准备系统的学习C语言,并在博客中与大家分享我学习中的心得 ...
NOI2007 货币兑换
[问题描述] 小 Y最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A纪念券(以下简称A券)和B纪念券(以下简称B券).每个持有金券的顾客都有一个自己的帐户.金券的数目可以是一个实数.每天 ...
How to Validate XML using Java
Configure Java APIs (SAX, DOM, dom4j, XOM) using JAXP 1.3 to validate XML Documents with DTD and Sch ...
POJ 3734
题目的大意: 给定待粉刷的n个墙砖(排成一行),每一个墙砖能够粉刷的颜色种类为:红.蓝.绿.黄, 问粉刷完成后,红色墙砖和蓝色墙砖都是偶数的粉刷方式有多少种(结果对10007取余). 解题思路: 思路 ...
[D3] 7. Quantitative Scales
# Quantitative Scales var colorScale = d3.scale.quantile() .domain([d3.max(dataset) / 4, d3.max(data ...
android 59 LinearLayout 线性布局
##常见的布局* LinearLayout 线性布局线性布局往左右拉是拉不动的,> 线性布局的朝向 vertical|horizontal> 线性布局的权重 weight 和 0dip一起 ...
python 用pdb调试
简单调试 Python 程序在 Python 中也可以像 gcc/gdb 那样调试程序,只要在运行 Python 程序时引入 pdb 模块(假设要调试的程序名为 d.py): $ vi d.py ...

Repeater 动态增加删除一行

Repeater 动态增加删除一行的更多相关文章

随机推荐

热门专题