1

によって設定されるaspDataListがあり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 コントロール内でこれを達成するにはどうすればよいですか? これを実現するために特定の「div」タグに対して使用できる JQuery プラグインがあることは知っていますが、「DataList コントロール」内でこれを行う方法がわかりません。

これについてすぐに助けが必要です..すべての貴重なアドバイスに感謝します.

4

1 に答える 1

2

必要なのはページネーションです。これを実現する方法を示す記事は次のとおりです。

更新: クライアント側で jQuery を使用する場合は、こちらを参照してください。基本的に、ItemTemplate と Show more リンクのテーブルにクラスを追加し、ページのどこかに JavaScript コードを追加します。

ここに jQuery スクリプトを追加します (row が項目クラスであり、showMore がより多くの項目を表示するリンクであると仮定します。この場合は単純にするためにすべての項目を表示します):

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

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

さらに、さらに興味深い動作を追加するために、slice() 関数をいじることができます。

ページが遅い場合、ユーザーにはテーブル全体が表示され、ページの読み込みが完了すると、リスト内のほとんどの行が表示されなくなることに注意してください。それを避けるには、データリストをレンダリングした直後に JavaScript を実行します。

于 2011-12-28T20:46:05.250 に答える