zoukankan      html  css  js  c++  java
  • Repeater与Table的配合使用

    table-repeater
    <asp:Repeater id=Repeater1 runat="server" >
    <HeaderTemplate>
    <table width="100%" style="font: 8pt verdana">
    <tr style="background-color:DFA894">
    <th> First Name </th>
    <th> Last Name </th>
    </tr>
    </HeaderTemplate>
    <ItemTemplate>
    <tr>
    <td><%# DataBinder.Eval(Container, "DataItem.EmployeeName") %>
    </td>
    <td><%# DataBinder.Eval(Container,"DataItem.PhoneNumber") %>
    </td>
    </tr>
    </ItemTemplate>
    <AlternatingItemTemplate>
    <tr>
    <td bgcolor="lightblue">
    <%# DataBinder.Eval(Container, "DataItem.EmployeeName") %> </td>
    <td bgcolor="lightblue">
    <%# DataBinder.Eval(Container,"DataItem.PhoneNumber") %> </td>
    </tr>
    </AlternatingItemTemplate>
    <FooterTemplate> </table> </FooterTemplate>
    </asp:Repeater>

     2

    Two
    <table width="775" border="0" cellspacing="2" cellpadding="0" align="center">
    <tr>
    <td align="center" height="25" class="Login1" width="40%">
    新闻名称
    </td>
    <td align="center" class="Login1">
    分类
    </td>
    <td align="center" class="Login1">
    查看
    </td>
    <td align="center" class="Login1" width="170">
    添加时间
    </td>
    <td align="center" class="Login1" width="100">
    编辑
    /删除</td>
    </tr>
    <asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
    <tr>
    <td align="left" class="Login2" height="25">
    &nbsp;&nbsp;<a href="../View.aspx?id=<%#Eval("id") %>" target="_blank"><%#Eval("Titel") %></a></td>
    <td align="center" class="Login2">
    <%#Eval("Class") %>
    </td>
    <td align="center" class="Login2">
    <a href="../view.aspx?id=<%#Eval("id") %>" target="_blank">查看</a></td>
    <td align="center" class="Login2">
    <%#Eval("Time") %>
    </td>
    <td align="center" class="Login2">
    <a href="EditNews.aspx?id=<%#Eval("id") %>">编辑</a>
    <asp:LinkButton ID="LinkButton1" CommandName='<%#Eval("id") %>' OnCommand="DelComm_Click"
    OnClientClick
    ="return confirm('确定要删除吗?');" runat="server">删除</asp:LinkButton></td>
    </tr>
    </ItemTemplate>
    </asp:Repeater>
    </table>

     3

    CSS Repeater - 交错显示行背景色 table行鼠标进入事件特效 禁止文本换行
    1. 禁止文本换行的CSS: white-space:nowrap;
    strict mode下在IE7和FF中都正常,以前IE用的word
    -break、word-wrap属性对FF无效。

    2. Repeater控件,交替显示table行的背景颜色,鼠标移动到某一行时用特殊背景显示。
    方法purecss给出了很多种,看了一下现在新浪邮箱,使用的也是文章中选择的方法。
    repeater控件:
    <asp:Repeater ID="Repeater1" runat="server">
    <HeaderTemplate>
    <table class="list" cellpadding="0" cellspacing="0">
    <tr class="listheader">
    <th>&nbsp;</th>
    <th>查看</th>
    <th>编辑</th>
    <th>模板ID</th>
    <th>用户编号</th>
    <th>描述</th>
    <th>状态</th>
    <th>控制类</th>
    <th>模板内容</th>
    </tr>
    </HeaderTemplate>
    <ItemTemplate>
    <tr class="listitem1" onmouseover="this.className='over'" onmouseout="this.className='listitem1'">
    <td class="cmdtd">
    <asp:CheckBox ID="CheckBox1" runat="server" />
    <asp:HiddenField ID="templateID" runat="server" Value='<%# DataBinder.Eval(Container.DataItem, "ID")%>'/>
    </td>
    <td class="cmdtd">
    <asp:ImageButton ID="cmdView" runat="server" ImageUrl="http://www.cnblogs.com/Skin/default/icon_view.gif" CausesValidation="False"
    OnCommand
    ="cmdView_Click" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ID")%>'>
    </asp:ImageButton>
    </td>
    <td class="cmdtd">
    <asp:ImageButton ID="cmdEdit" runat="server" ImageUrl="http://www.cnblogs.com/Skin/default/icon_edit.gif" CausesValidation="False"
    OnCommand
    ="cmdEdit_Click" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ID")%>'>
    </asp:ImageButton>
    </td>
    <td><%# DataBinder.Eval(Container.DataItem, "ID")%></td>
    <td><%# RenderUtil.FormatString(DataBinder.Eval(Container.DataItem, "ShortName"))%></td>
    <td><%# RenderUtil.FormatString(DataBinder.Eval(Container.DataItem, "LongDescription"))%></td>
    <td><%# DataBinder.Eval(Container.DataItem, "State")%></td>
    <td><%# RenderUtil.FormatString(DataBinder.Eval(Container.DataItem, "AttributeProvider"))%></td>
    <td>
    <textarea id="Textarea1" rows="3" class="textbox" readonly="readonly" cols="20" style="400px;">
    <%# DataBinder.Eval(Container.DataItem, "Content.Content")%>
    </textarea>
    </td>
    </tr>
    </ItemTemplate>
    <AlternatingItemTemplate>
    <tr class="listitem2" onmouseover="this.className='over'" onmouseout="this.className='listitem2'">
    <td class="cmdtd">
    <asp:CheckBox ID="CheckBox1" runat="server" />
    <asp:HiddenField ID="templateID" runat="server" Value='<%# DataBinder.Eval(Container.DataItem, "ID")%>'/>
    </td>
    <td class="cmdtd">
    <asp:ImageButton ID="cmdView" runat="server" ImageUrl="http://www.cnblogs.com/Skin/default/icon_view.gif" CausesValidation="False"
    OnCommand
    ="cmdView_Click" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ID")%>'>
    </asp:ImageButton>
    </td>
    <td class="cmdtd">
    <asp:ImageButton ID="cmdEdit" runat="server" ImageUrl="http://www.cnblogs.com/Skin/default/icon_edit.gif" CausesValidation="False"
    OnCommand
    ="cmdEdit_Click" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ID")%>'>
    </asp:ImageButton>
    </td>
    <td><%# DataBinder.Eval(Container.DataItem, "ID")%></td>
    <td><%# RenderUtil.FormatString(DataBinder.Eval(Container.DataItem, "ShortName"))%></td>
    <td><%# RenderUtil.FormatString(DataBinder.Eval(Container.DataItem, "LongDescription"))%></td>
    <td><%# DataBinder.Eval(Container.DataItem, "State")%></td>
    <td><%# RenderUtil.FormatString(DataBinder.Eval(Container.DataItem, "AttributeProvider"))%></td>
    <td>
    <textarea id="Textarea1" rows="3" class="textbox" readonly="readonly" cols="20" style="400px;">
    <%# DataBinder.Eval(Container.DataItem, "Content.Content")%>
    </textarea>
    </td>
    </tr>
    </AlternatingItemTemplate>
    <FooterTemplate>
    </table>
    </FooterTemplate>
    </asp:Repeater> CSS:
    .list
    {
    border
    -right:solid 1px #888888;
    border
    -top:solid 1px #888888;
    }
    tr.listheader td,th
    {
    border
    -left:solid 1px #BBBBBB;
    border
    -bottom:solid 1px #BBBBBB;
    background
    -color:#E6F6F6;
    color:#
    444444;
    white
    -space:nowrap;
    padding:1px 1px 1px 1px;
    font
    -weight:bold;
    }
    tr.listitem1 td
    {
    border
    -left:solid 1px #BBBBBB;
    border
    -bottom:solid 1px #BBBBBB;
    background
    -color:#FFFFFF;
    padding:1px 1px 1px 1px;
    text
    -indent:1px;
    }
    tr.listitem2 td
    {
    border
    -left:solid 1px #BBBBBB;
    border
    -bottom:solid 1px #BBBBBB;
    background
    -color:#F6F6F6;
    padding:1px 1px 1px 1px;
    text
    -indent:1px;
    }
    tr.over td
    {
    border
    -left:solid 1px #BBBBBB;
    border
    -bottom:solid 1px #BBBBBB;
    background
    -color:#FEE6BA;
    padding:1px 1px 1px 1px;
    text
    -indent:1px;
    }
    .cmdtd
    {
    text
    -align:center;
    }

     4

    点击Repeater中的button,获取table中item的id,在连接的DataTable中删除数据
    ================================

    在Repeater生成的table中,点击“删除”按钮,能够获取按钮所在的行的索引值,从而找到该行所对应的DataTable中的值,将其删除。更新DataTable!

    ===================================

    1.Repeater生成table表,设置属性OnItemCommand ="Button2_Click",调用按钮事件的处理过程

    <asp:Repeater ID="Repeater1" runat="server" OnItemCommand ="Button2_Click" >
    <HeaderTemplate >
    <table border ="1" >
    <tr>
    <td >用户名称</td>
    <td >用户年龄</td>
    <td >用户密码</td>
    <td >用户邮箱</td>
    <td >用户性别</td>
    <td >用户爱好</td>
    <td >其他</td>
    <td >照片</td>
    </tr>
    </HeaderTemplate>
    <ItemTemplate >
    <tr>
    <td ><%#Eval("用户名称")%></td>
    <td ><%#Eval("用户年龄")%></td>
    <td ><%#Eval("用户密码")%></td>
    <td ><asp:HyperLink ID="HyperLink1" NavigateUrl='<%#Eval("用户邮箱")%>' runat="server"><%#Eval("用户邮箱")%></asp:HyperLink></td>
    <td ><%#Eval("用户性别")%></td>
    <td ><%#Eval("用户爱好")%></td>
    <td ><%#Eval("其他")%></td>
    <td ><asp:HyperLink ID="HyperLink2" NavigateUrl='<%#Eval("照片")%>' runat="server"><%#Eval("照片")%></asp:HyperLink></td>
    <td>
    <asp:Button ID="Button2" runat="server" Text="删除" /></td>
    </tr>
    </ItemTemplate>
    <AlternatingItemTemplate >
    <tr style ="background-color : Aqua" >
    <td ><%#Eval("用户名称")%></td>
    <td ><%#Eval("用户年龄")%></td>
    <td ><%#Eval("用户密码")%></td>
    <td ><asp:HyperLink ID="HyperLink1" NavigateUrl='<%#Eval("用户邮箱")%>' runat="server"><%#Eval("用户邮箱")%></asp:HyperLink></td>
    <td ><%#Eval("用户性别")%></td>
    <td ><%#Eval("用户爱好")%></td>
    <td ><%#Eval("其他")%></td>
    <td ><asp:HyperLink ID="HyperLink2" NavigateUrl='<%#Eval("照片")%>' runat="server"><%#Eval("照片")%></asp:HyperLink></td>
    <td>
    <asp:Button ID="Button2" runat="server" Text="删除" /></td>
    </tr>

    </AlternatingItemTemplate>
    <FooterTemplate>
    </table>
    </FooterTemplate>
    </asp:Repeater>


    2.定义事件

    protected void Button2_Click(object sender, RepeaterCommandEventArgs e)
    {
    dt.Rows.Remove(dt.Rows[ e.Item .ItemIndex]);
    Repeater1.DataSource
    = dt;
    Repeater1.DataBind();
    }

    3.运行按钮“删除”,删除DataTable中的数据
  • 相关阅读:
    21.Merge Two Sorted Lists 、23. Merge k Sorted Lists
    34. Find First and Last Position of Element in Sorted Array
    leetcode 20. Valid Parentheses 、32. Longest Valid Parentheses 、301. Remove Invalid Parentheses
    31. Next Permutation
    17. Letter Combinations of a Phone Number
    android 常见分辨率(mdpi、hdpi 、xhdpi、xxhdpi )及屏幕适配注意事项
    oc 异常处理
    oc 类型判断
    oc Delegate
    oc 协议
  • 原文地址:https://www.cnblogs.com/xvqm00/p/1775572.html
Copyright © 2011-2022 走看看