Repeater的高级使用

下面看一个简单的例子学习使用repeater实现新增多条记录的功能

前台代码

<style type="text/css">
   #tbList{
    border:1px solid #0094ff;
    margin:150px auto;
    width:350px;
    border-collapse:collapse;
     }
    #tbList td,th{
      border:2px solid #0094ff;
      padding:5px;
    }
</style>

<asp:ScriptManager runat="server" ID="SM" EnablePartialRendering="true">

</asp:ScriptManager> 这个是为了实现新增多条记录时实现无刷新！

<table id="tbList">

<tr>

<td>

设施设备

</td>

<td colspan="7">

<asp:UpdatePanel ID="updatePanel1" runat="server">

<ContentTemplate>

<asp:Button ID="addEquipmentBtn" runat="server" Text="新增" OnClick="AddEquipment_Click"/>

<asp:Repeater ID="rptInstallationEquipment" runat="server" OnItemCommand="rptInstallationEquipment_ItemCommand" OnItemDataBound="rptInstallationEquipment_ItemDataBound">

<HeaderTemplate>

<table id="tblInstallationEquipment" width="100%">

<tr>

<th>

序号

</th>

<th>

专业

</th>

<th>

日期时间

</th>

<th>

详细内容

</th>

<th>

故障号

</th>

<th>

处理结果

</th>

<th>

操作

</th>

</tr>

</HeaderTemplate>

<ItemTemplate>

<tr>

<td class="bg nowidth">

<asp:Label runat="server" ID="EquipmentSortOrder" Text=‘<%#Container.ItemIndex + 1%>‘></asp:Label>

</td>

<td class="bg nowidth">

<asp:DropDownList runat="server" ID="EquipmentType" >

<asp:ListItem Value="lanwhy">lanwhy</asp:ListItem>

<asp:ListItem Value="8023">8023</asp:ListItem>

</asp:DropDownList>

</td>

<td class="bg nowidth">

<asp:TextBox ID="FaultDateTime" Text=‘<%#Eval("FaultDateTime") %>‘  isAddRedStar="false" runat="server" validator="required,pattern[date]">

</asp:TextBox>

</td>

<td class="bg nowidth">

<asp:TextBox runat="server" ID="DetailContent" Text=‘<%#Eval("DetailContent") %>‘

MaxLength="1000" TextMode="MultiLine" validator="length[1,1000]"></asp:TextBox>

</td>

<td class="bg nowidth">

<asp:TextBox runat="server" ID="FaultSortOrder" Text=‘<%#Eval("FaultSortOrder") %>‘ ></asp:TextBox>

</td>

<td class="bg nowidth">

<asp:TextBox runat="server" ID="Result" Text=‘<%#Eval("Result") %>‘ MaxLength="1000" TextMode="MultiLine" validator="length[1,1000]"></asp:TextBox>

</td>

<td class="bg nowidth">

<asp:Button ID="btnDelete" runat="server" Text="删除" CommandName="EquipmentDeleteInfo"

CommandArgument=‘<%#Container.ItemIndex + 1%>‘ />

<asp:HiddenField runat="server" ID="hidInstallationEquipmentID" Value=‘<%#Eval("InstallationEquipmentID") %>‘ />

</td>

</tr>

</ItemTemplate>

<FooterTemplate>

</table>

</FooterTemplate>

</asp:Repeater>

</ContentTemplate>

</asp:UpdatePanel>

</td>

</tr>

</table>

后台代码

添加设施设备  也就是新增按钮的点击事件
protected void AddEquipment_Click(object sender, EventArgs e)
        {
            DataTable dt = this.CopyFormDetailData();
            DataRow dr = dt.NewRow();
            dt.Rows.Add(dr);
            ViewState.Add("EquipmentData", dt);
            DetailDataBinds();
        }
protected DataTable CopyFormDetailData()
        {
            if ((ViewState["EquipmentData"] as DataTable) == null)
            {
                DataTable dtView = new DataTable();
                dtView.Columns.Add("InstallationEquipmentID", typeof(string));
                dtView.Columns.Add("EquipmentCode", typeof(string));
                dtView.Columns.Add("EquipmentName", typeof(string));
                dtView.Columns.Add("FaultDateTime", typeof(string));
                dtView.Columns.Add("DetailContent", typeof(string));
                dtView.Columns.Add("FaultSortOrder", typeof(string));
                dtView.Columns.Add("Result", typeof(string));
                dtView.Rows.Add(dtView.NewRow());
                ViewState.Add("EquipmentData", dtView);
            }
            DataTable dt = (ViewState["EquipmentData"] as DataTable).Clone();
            foreach (RepeaterItem ri in this.rptInstallationEquipment.Items)
            {
                DataRow dr = dt.NewRow();
                dr["InstallationEquipmentID"] = (ri.FindControl("hidInstallationEquipmentID") as HiddenField).Value;
                dr["EquipmentCode"] = (ri.FindControl("EquipmentType") as DropDownList).SelectedValue;
                dr["EquipmentName"] = (ri.FindControl("EquipmentType") as DropDownList).SelectedItem.Text;
                dr["FaultDateTime"] = (ri.FindControl("FaultDateTime") as TextBox).Text;
                dr["DetailContent"] = (ri.FindControl("DetailContent") as TextBox).Text;
                dr["FaultSortOrder"] = (ri.FindControl("FaultSortOrder") as TextBox).Text;
                dr["Result"] = (ri.FindControl("Result") as TextBox).Text;
                dt.Rows.Add(dr);
            }
            return dt;
        }
 
        protected void DetailDataBinds()
        {
            DataTable dt = ViewState["EquipmentData"] as DataTable;
            rptInstallationEquipment.DataSource = dt;
            rptInstallationEquipment.DataBind();
        }
删除设施设备数据
protected void rptInstallationEquipment_ItemCommand(object sender, RepeaterCommandEventArgs e)
        {
            if (e.CommandName == "EquipmentDeleteInfo")
            {
                DataTable dt = new DataTable();
                dt = this.CopyFormDetailData();
 
                dt.Rows.RemoveAt(e.Item.ItemIndex);
                this.rptInstallationEquipment.DataSource = dt;
                this.rptInstallationEquipment.DataBind();
                int cnt = this.rptInstallationEquipment.Items.Count;
                if (cnt > 0)
                {
                    ((Button)this.rptInstallationEquipment.Items[cnt - 1].FindControl("btnDelete")).Focus();
                }
                else
                {
                    this.addEquipmentBtn.Focus();
                }
            }
        }
绑定设施设备数据
protected void rptInstallationEquipment_ItemDataBound(object sender, RepeaterItemEventArgs e)
     { //因为专业和处理结果每次新增新行时都会有默认值，不做处理的话会把上一行的数据覆盖
            TextBox txtResult = (TextBox)e.Item.FindControl("Result");
            if (txtResult != null)
            {
                txtResult.Text = "未修复";
                DataRowView drv = (DataRowView)e.Item.DataItem;
                if (!string.IsNullOrWhiteSpace(drv["Result"].ToString()))
                {
                    txtResult.Text = drv["Result"].ToString();
                }
            }
 
            DropDownList dropEquipmentType = (DropDownList)e.Item.FindControl("EquipmentType");
            if (dropEquipmentType != null)
            {
                dropEquipmentType.DataBind();
                DataRowView drv = (DataRowView)e.Item.DataItem;
                //保持下拉框选择的项
                if (!string.IsNullOrWhiteSpace(drv["EquipmentName"].ToString()))
                {
                    dropEquipmentType.Items.FindByText(drv["EquipmentName"].ToString()).Selected = true;
                }
            }
        }

可以看出，第一次点击新增时，增加了序号为1的行，输入数据后，再次点击新增按钮，发现序号1的行的数据还是会保持！

之前没接触这种用法时，可以用JavaScript或者JQuery实现这种新增多行的需求，当进行项目开发时，学会了这种，可以很容易实现这种需求，快捷完成增删改查！

点击删除按钮可以删除整行

下面简单介绍下使用JQuery的方式实现增加多条记录

<table>

<tr>

<th class="thTitle" colspan="10" style="text-align: left">

近期工作安排

<input type="button" onclick="addSecurity()" value="增加"  />

</th>

</tr>

<tr>

<td colspan="10">

<table width="100%" class="formitem" id="tabSecurity">

<tr>

<th style="text-align: center; width: 40px">

序号

</th>

<th style="text-align: center; width: 40%;">

事件情况

</th>

<th style="text-align: center; width: 30%;">

处理意见

</th>

<th style="text-align: center; width: 20%;">

责任单位

</th>

<th style="text-align: center; width: 55px">

操作

</th>

</tr>

</table>

</td>

</tr>

</table>

//增加近期工作安排

function addSecurity() {

var trNum = $("#tabSecurity tr").length;

var html = ‘<tr>‘;

html += ‘<td>‘ + trNum + ‘</td>‘;

html += ‘<td><textarea validator="required,length[1,2000]" class="textareaAutoHeight"></textarea></td>‘;

html += ‘<td><textarea validator="required,length[1,2000]" class="textareaAutoHeight"></textarea></td>‘;

html += ‘<td><input type="hidden" /><textarea validator="required"  class="textareaAutoHeight"></textarea></td>‘;

html += ‘<td><input type="button" onclick="deleteSecurity(this)" class="com_b" value="删除" /></td>‘;

html += ‘</tr>‘;

$("#tabSecurity").append(html);

//tabSecurity.ResetHeight();

}

function deleteSecurity(_this) {

$(_this).parent().parent().remove();

$("#tabSecurity tr").each(function (index, element) {

if (index > 0) {

$(this).find(‘td‘).eq(0).html(index);

}

});

}

function getItemDetail() {

var resultArray = [];

$("#tabSecurity tr").each(function (index, element) {

if (index > 0) {

var entity = {};

entity.ORDER = $(this).children().eq(0).html();

entity.EVENTNOTE = $(this).children().eq(1).children().eq(0).val();

entity.DealProposal = $(this).children().eq(2).children().eq(0).val();

entity.RESORGIDS = $(this).children().eq(3).children().eq(0).val();

resultArray.push(entity);

}

});

return resultArray;

}

如何获取repeater中多行数据？

List<InstallationEquipmentInfo> listInstallationEquipmentInfo = new List<InstallationEquipmentInfo>();

foreach (Control record in this.rptInstallationEquipment.Items)

{

InstallationEquipmentInfo installationEquipmentInfo = new InstallationEquipmentInfo();

installationEquipmentInfo.EquipmentCode = ((DropDownList)record.FindControl("EquipmentType")).SelectedValue;

installationEquipmentInfo.EquipmentName = ((DropDownList)record.FindControl("EquipmentType")).SelectedItem.Text;

installationEquipmentInfo.EquipmentSortOrder = ((Label)record.FindControl("EquipmentSortOrder")).Text;

installationEquipmentInfo.DetailContent = ((TextBox)record.FindControl("DetailContent")).Text;

installationEquipmentInfo.FaultDateTime = ((TextBox)record.FindControl("FaultDateTime")).Text.ToString();

installationEquipmentInfo.FaultSortOrder = ((TextBox)record.FindControl("FaultSortOrder")).Text;

installationEquipmentInfo.Result = ((TextBox)record.FindControl("Result")).Text;

listInstallationEquipmentInfo.Add(installationEquipmentInfo);

}

时间： 2024-10-12 23:57:14

Repeater的高级使用的相关文章

Asp.Net 初级 高级 学习笔记

本文并非作者原创,但是作者发表! 不知道十年后,会用多少人收益我的文章,哈哈! 各位,来加个关注![注*]改文章总结了ASP.Net从入门到高级的知识! 朱磊:2012 - 0212 -------------- [朱磊是本文的原创大神,据说当年在黑马刚毕业,月薪税前1W]-------------01.Main函数是什么?在程序中使用Main函数有什么需要注意的地方?02.CLR是什么?程序集是什么?当运行一个程序集的时候,CLR做了什么事情?03.值类型的默认值是什么?(情况一:字段或全局静

AxureRP7.0基础教程系列 部件详解 中继器部件Repeater

原型库网站-讲师金乌原创发布,可自由转载,请注明出处! Axure中文官网:www.AxureRP.cn   <AxureRP7.0部件详解> 中继器概述 REPEATER OVERVIEW 中继器部件是一款高级部件,用来显示重复的文本.图片和链接. 通常使用中继器来显示商品列表.联系人信息列表.数据表或其他. 中继器的构成 2 PARTS OFREPEATER 中继器数据集 Repeater Dataset 中继器部件是由中继器数据集中的数据项填充的.这些填充的数据项可以是文本.图片或页面链

Java精品高级课，架构课，java8新特性，P2P金融项目，程序设计，功能设计，数据库设计，第三方支付，web安全，视频教程

36套精品Java架构师,高并发,高性能,高可用,分布式,集群,电商,缓存,性能调优,设计模式,项目实战,P2P金融项目,大型分布式电商实战视频教程 视频课程包含: 高级Java架构师包含:Spring boot.Spring  cloud.Dubbo.Elasticsearch,Redis.ActiveMQ.Nginx.Mycat.Spring.MongoDB.ZeroMQ.Git.Nosql.Jvm.Mecached.Netty.Nio.Mina.java8新特性,P2P金融项目,程序设计,

Spark性能优化指南——高级篇

Spark性能优化指南--高级篇 [TOC] 前言 继基础篇讲解了每个Spark开发人员都必须熟知的开发调优与资源调优之后,本文作为<Spark性能优化指南>的高级篇,将深入分析数据倾斜调优与shuffle调优,以解决更加棘手的性能问题. 数据倾斜调优 调优概述 有的时候,我们可能会遇到大数据计算中一个最棘手的问题--数据倾斜,此时Spark作业的性能会比期望差很多.数据倾斜调优,就是使用各种技术方案解决不同类型的数据倾斜问题,以保证Spark作业的性能. 数据倾斜发生时的现象 绝大多数tas

mybatis之高级结果映射

先贴一句官方文档内容 如果世界总是这么简单就好了. 正如官方文档所说:如果一切都是这么简单,那该多好啊,但是实际上,我们面对的是复杂的对象,就是对象里有对象,有列表对象,总之五花八门的对象.这个时候我们期盼这mybatis能帮我们来解决这个问题. 今天,我就遇到了这样的一个问题: 在做基于RBAC权限分配模型中,一共有五张表 sys_permission  记录权限信息,包括权限名称,权限url等 sys_role 记录角色信息,包括角色名和角色id sys_role_permission 记录

Linux高级文本处理之sed（四）

模式空间是sed内部维护的一个缓存空间,它存放着读入的一行或者多行内容.但是模式空间的一个限制是无法保存模式空间中被处理的行,因此sed又引入了另外一个缓存空间--模式空间(Hold Space). 一.保持空间 保持空间用于保存模式空间的内容,模式空间的内容可以复制到保持空间,同样地保持空间的内容可以复制回模式空间.sed提供了几组命令用来完成复制的工作,其它命令无法匹配也不能修改模式空间的内容. 操作保持空间的命令如下所示: 这几组命令提供了保存.取回以及交换三个动作,交换命令比较容易理解,

HAProxy 高级应用（一）

HAProxy 高级应用 ================================================================================ 概述:   本章将继续上章的内容介绍haprosy代理配置段的相关参数,具体如下: ACL控制访问列表: 4层检测机制:dst,dst_port,src,src_port 7层检查机制:path.req.hdr.res.hdr: http层访问控制相关的参数: block,http-request TCP层的访

java 16-8 泛型高级之通配符

泛型高级(通配符) ?:任意类型,如果没有明确,那么就是Object以及任意的Java类了 ? extends E:向下限定,E及其子类 ? super E:向上限定,E极其父类 1 import java.util.ArrayList; 2 import java.util.Collection; 3 public class GenericDemo { 4 public static void main(String[] args) { 5 // 泛型如果明确的写的时候,前后必须一致 6 C

Newtonsoft.Json(Json.Net)学习笔记-高级使用（转）

1.忽略某些属性 2.默认值的处理 3.空值的处理 4.支持非公共成员 5.日期处理 6.自定义序列化的字段名称 7.动态决定属性是否序列化 8.枚举值的自定义格式化问题 9.自定义类型转换 10.全局序列化设置  一.忽略某些属性 类似本问开头介绍的接口优化,实体中有些属性不需要序列化返回,可以使用该特性.首先介绍Json.Net序列化的模式:OptOut 和 OptIn OptOut 默认值,类中所有公有成员会被序列化,如果不想被序列化,可以用特性JsonIgnore OptIn 默认情况下