Question

我有一个由DataList填充的asp DataTable。

<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控件”中做到这一点。

很快就需要帮助..感谢您的所有宝贵意见。

Answer 1

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

更新：为了使用jQuery做客户端看看here。基本上在ItemTemplate中为表添加一个类，并显示更多链接，并在页面的某处添加javascript代码。

在这里添加jQuery脚本（假设row是你的item类，showMore是显示更多项的链接，在这种情况下所有这些都是为了简化它）：

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

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

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

请注意，如果您的页面速度很慢，则用户将看到整个表格，当页面完成加载时，列表中的大多数行都将消失。为了避免在渲染数据列表后立即执行javascript。

如何使ASP'datalist'单元格可扩展/可折叠？

1 个答案: