Repeater的高级使用

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

前台代码

<style type="text/css">
   #tbList{
    background-color:white;
    border:1px solid #0094ff;
    margin:150px auto;
    width:350px;
    border-collapse:collapse;
     }
    #tbList td,th{
      background-color:white;
      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;  40px">
                            序号
                        </th>
                        <th style="text-align: center;  40%;">
                            事件情况
                        </th>
                        <th style="text-align: center;  30%;">
                            处理意见
                        </th>
                        <th style="text-align: center;  20%;">
                            责任单位
                        </th>
                        <th style="text-align: center;  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);
            }