使用中继器的水平表

时间:2011-08-02 15:00:05

标签: html asp.net .net html-table repeater

我正在尝试使用转发器获取下表。

<table>
    <tr>
        <td>Description:</td>
        <td>Start time:</td>
        <td>End time:</td>
        <td>Game type:</td>
        <td>Description:</td>
        <td>Start time:</td>
        <td>End time:</td>
        <td>Game type:</td>
    </tr>
    <tr>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
        <td>Data4</td>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
        <td>Data4</td>
    </tr>
</table>

但我无法解决如何做到这一点。我尝试过以下方法:

<asp:Repeater ID="rptGames" runat="server">
    <HeaderTemplate>
        <table>
        <tr>
    </HeaderTemplate>
        <ItemTemplate>
            <td>Description:</td>
            <td>Start time:</td>
            <td>End time:</td>
            <td>Game type:</td>
        </ItemTemplate>
        <SeparatorTemplate>
            </tr><tr>
        </SeparatorTemplate>
        <AlternatingItemTemplate>
            <td><%# Eval("Description") %></td>
            <td><%# Eval("StartTime") %></td>
            <td><%# Eval("EndTime") %></td>
            <td><%# Eval("GameType") %></td>
        </AlternatingItemTemplate>
    <FooterTemplate>
        </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

如果最后应用了分隔符模板,它会很有效。 那么使用每个数据项的单个表来使这种模式工作的唯一方法是什么?或者我有一种方法可以使用一个表来实现我的目标吗?

5 个答案:

答案 0 :(得分:4)

您可以尝试在HeaderTemplate中编写表格的标题和ItemTemplate中的行;-)

编辑:首先,我认为您只需要标题中的标题,每行代表数据项。所以我建议使用以下代码:

<asp:Repeater ID="rptGames" runat="server">
    <HeaderTemplate>
        <table>
        <tr>
            <td>Description:</td>
            <td>Start time:</td>
            <td>End time:</td>
            <td>Game type:</td>
        </tr>
    </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td><%# Eval("Description") %></td>
                <td><%# Eval("StartTime") %></td>
                <td><%# Eval("EndTime") %></td>
                <td><%# Eval("GameType") %></td>
            </tr>
        </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

现在,在您的评论中重复每个数据项上方的标题后,我建议如下:

<asp:Repeater ID="rptGames" runat="server">
    <HeaderTemplate>
        <table>
    </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td>Description:</td>
                <td>Start time:</td>
                <td>End time:</td>
                <td>Game type:</td>
            </tr>
            <tr>
                <td><%# Eval("Description") %></td>
                <td><%# Eval("StartTime") %></td>
                <td><%# Eval("EndTime") %></td>
                <td><%# Eval("GameType") %></td>
            </tr>
        </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

注意:您使用的AlternatingItemTemplate也表示数据项。通过使用此功能,您可以为每个项目以不同的方式显示数据项(通常,您对奇数和偶数行使用不同的背景颜色)

编辑2: 我希望,这次我正确理解了这个问题: - )

<asp:Repeater ID="rptGames" runat="server" OnItemCreated="rptGames_ItemCreated">
    <HeaderTemplate>
        <table>
    </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td>Description:</td>
                <td>Start time:</td>
                <td>End time:</td>
                <td>Game type:</td>
                <td>Description:</td>
                <td>Start time:</td>
                <td>End time:</td>
                <td>Game type:</td>
            </tr>
            <tr>
                <td><%# Eval("Description") %></td>
                <td><%# Eval("StartTime") %></td>
                <td><%# Eval("EndTime") %></td>
                <td><%# Eval("GameType") %></td>
        </ItemTemplate>
        <AlernatingItemTemplate>
                <td><%# Eval("Description") %></td>
                <td><%# Eval("StartTime") %></td>
                <td><%# Eval("EndTime") %></td>
                <td><%# Eval("GameType") %></td>
            </tr>
        </AlernatingItemTemplate>

</asp:Repeater>

在后面的代码(rptGames_ItemCreated)中,您可以根据数据项的数量设置页脚模板</table></tr></table> 注意:我没有测试过这个

答案 1 :(得分:1)

试试这样:

更新:要重复标题(根据OP的评论),请按照这样修改(如果您想要更多列,请在每个td中添加更多tr):

注意:假设OP想要以不同方式设置标题样式,请添加背景颜色(仅提供一个想法)。

<asp:Repeater ID="rptGames" runat="server">
    <HeaderTemplate>
        <table>
    </HeaderTemplate>
        <ItemTemplate>
            <tr style="background-color: whiteSmoke">
              <td>Description:</td>
              <td>Start time:</td>
              <td>End time:</td>
              <td>Game type:</td>
            </tr>
        </ItemTemplate>
        <AlternatingItemTemplate>
          <tr>
            <td><%# Eval("Description") %></td>
            <td><%# Eval("StartTime") %></td>
            <td><%# Eval("EndTime") %></td>
            <td><%# Eval("GameType") %></td>
          </tr>
        </AlternatingItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

答案 2 :(得分:1)

将表格标题行移动到标题中,并将每个项目封装在tr

<asp:Repeater ID="rptGames" runat="server">
    <HeaderTemplate>
        <table>
        <tr>
            <td>Description:</td>
            <td>Start time:</td>
            <td>End time:</td>
            <td>Game type:</td>
        </tr>
    </HeaderTemplate>
        <ItemTemplate>
           <tr>
            <td><%# Eval("Description") %></td>
            <td><%# Eval("StartTime") %></td>
            <td><%# Eval("EndTime") %></td>
            <td><%# Eval("GameType") %></td>
           </tr>
        </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

答案 3 :(得分:0)

您需要将<tr>放入商品模板(以及交替商品模板)(而不是标题)。

<ItemTemplate>
<tr>
   <td>Description:</td>
   <td>Start time:</td>
   <td>End time:</td>
   <td>Game type:</td>
</tr>
</ItemTemplate>

然后调整您的分隔符模板:

<SeparatorTemplate>
   <tr></tr>
</SeparatorTemplate>

答案 4 :(得分:0)

试试这个:

<asp:Repeater ID="rptGames" runat="server">
    <HeaderTemplate>
        <table>
    </HeaderTemplate>
        <ItemTemplate>
          <tr>
              <th>Description:</th>
              <th>Start time:</th>
              <th>End time:</th>
              <th>Game type:</th>
              <th>Description:</th>
              <th>Start time:</th>
              <th>End time:</th>
              <th>Game type:</th>
            </tr>
          <tr> 
            <td><%# Eval("Description") %></td>
            <td><%# Eval("StartTime") %></td>
            <td><%# Eval("EndTime") %></td>
            <td><%# Eval("GameType") %></td>
        </ItemTemplate>
        <AlternatingItemTemplate>
            <td><%# Eval("Description") %></td>
            <td><%# Eval("StartTime") %></td>
            <td><%# Eval("EndTime") %></td>
            <td><%# Eval("GameType") %></td>
          </tr>
        </AlternatingItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

我的例子中唯一的问题是,如果没有偶数个记录,则不会打印结束</tr>,表格可能会失控。我相信你可以在后面的代码中检查它并为此添加一个hack。也许你可以在运行时修改literal

<强>更新

该代码应该产生以下六条记录的结果:

<table>
    <tr>
        <td>Description:</td>
        <td>Start time:</td>
        <td>End time:</td>
        <td>Game type:</td>
        <td>Description:</td>
        <td>Start time:</td>
        <td>End time:</td>
        <td>Game type:</td>
    </tr>
    <tr>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
        <td>Data4</td>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
        <td>Data4</td>
    </tr>
    <tr>
        <td>Description:</td>
        <td>Start time:</td>
        <td>End time:</td>
        <td>Game type:</td>
        <td>Description:</td>
        <td>Start time:</td>
        <td>End time:</td>
        <td>Game type:</td>
    </tr>
    <tr>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
        <td>Data4</td>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
        <td>Data4</td>
    </tr>
    <tr>
        <td>Description:</td>
        <td>Start time:</td>
        <td>End time:</td>
        <td>Game type:</td>
        <td>Description:</td>
        <td>Start time:</td>
        <td>End time:</td>
        <td>Game type:</td>
    </tr>
    <tr>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
        <td>Data4</td>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
        <td>Data4</td>
    </tr>
</table>