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 ...

随机推荐

input hidden用法
之前获取数据传数据,都是写在全局变量里,今天老板告诉我说用input hidden来存,我百度了一下,确实是个好方法,记录之: 1 隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或 ...
time.h
目录 1简介 2代码示例 3从系统时钟获取时间方式 4time函数介绍函数名称: localtime 函数名称: asctime 函数名称: ctime 函数名称: difftime 函数名称: g ...
Tsinsen A1505. 树（张闻涛）倍增LCA,可持久化线段树,DFS序
题目:http://www.tsinsen.com/A1505 A1505. 树(张闻涛) 时间限制:1.0s 内存限制:512.0MB 总提交次数:196 AC次数:65 平均分: ...
《使用wxWidgets进行跨平台程序开发》chap02——一个简单的应用程序
// Name: minimal.cpp // Purpose: Minimal wxWidgets sample // Author: Julian Smart #include "wx/ ...
[zz] makefile中=和:=的区别
转载自:http://www.cnblogs.com/wanqieddy/archive/2011/09/21/2184257.html 在Makefile中我们经常看到 = := ?= +=这几个赋 ...
webview改变网页宽度
- (void)webViewDidFinishLoad:(UIWebView *)webView { //修改服务器页面的meta的值 NSString *meta = [NSString stri ...
在Jersey中如何处理泛型集合
Jersey是一个标准的Restful Web service框架,可以方便的实现Restful的Server端和客户端. 本文主要介绍使用Jersey客户端时如何将Json格式的数组转换成java的 ...
Java从服务器上获取时间，动态在jsp页面显示
Java获取服务器时间,动态显示到jsp页面,大家都是到Java只能获取一次,到页面的时间是静态的,不过通过js和Java的合作,巧妙地实现此功能本人是给电视做系统,客户要求页面能显示时间,因为电视 ...
Java Web学习笔记-Servlet不是线程安全的
由于Servlet只会有一个实例,多个用户同时请求同一个Servlet时,Tomcat会派生出多条线程执行Servlet的代码,因此Servlet有线程不安全的隐患.如果设计不当,系统就会出现问题. ...
jQuery获取鼠标事件源（万能）
//任意位置 $(document).ready(function(){ $(document).click(function(){ $("#id_").hide(); }); } ...

Repeater 动态增加删除一行

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

随机推荐

热门专题