1

我有一个DataListDataTable.

<asp:PlaceHolder ID="ph3" runat="server">
    <asp:DataList ID="dlspec" runat="server" GridLines="Vertical" OnItemDataBound="dlspec_ItemDataBound">
        <FooterStyle BackColor="#CCCCCC" />
        <AlternatingItemStyle CssClass="alt-grey" />
        <SelectedItemStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
        <ItemTemplate>
            <table width="320px">
                <tr>
                    <td class="leftcol">
                        <asp:Label ID="lblDimension" runat="server" Text='<%# Eval("Dimension") %>'></asp:Label>:
                    </td>
                    <td class="ProductDetailData">
                        <asp:Label ID="lblName" runat="server" Text='<%# Eval("Attribute") %>'></asp:Label>
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:DataList> 
</asp:placeholder>

问题是我只需要显示数据列表中的前 5 个元素,我需要隐藏其余的单元格并根据要求使它们“可扩展”。如何在 DataList 控件中实现这一点?我知道有一些 JQuery 插件可以针对特定的“div”标签使用来实现这一点,但我不知道如何在“DataList 控件”中做到这一点。

很快就需要帮助。感谢您的所有宝贵建议。

4

1 回答 1

2

你需要的是分页。是一篇文章,向您展示如何完成它。

更新: 用 jQuery 做客户端看看这里。基本上将一个类添加到 ItemTemplate 中的表和一个显示更多链接,然后在页面中的某处添加 javascript 代码。

在此处添加 jQuery 脚本(假设 row 是您的项目类,而 showMore 是显示更多项目的链接,在这种情况下,所有这些都是为了保持简单):

$(function() {
    $(".row").slice(2).hide();

    $("#showMore").click(function() {
        $(".row").show();
    });
});

您可以进一步使用 slice() 函数来添加更多有趣的行为。

请注意,如果您的页面速度很慢,用户将看到整个表格,并且当页面加载完成后,列表中的大部分行都会消失。为避免在呈现数据列表后立即执行 javascript。

于 2011-12-28T20:46:05.250 回答