Как я могу сделать ячейки ASP 'datalist' расширяемыми / складывающимися? - PullRequest
Новая
       40

Как я могу сделать ячейки ASP 'datalist' расширяемыми / складывающимися?

1 голос
/ 29 декабря 2011

У меня есть оса DataList, которая заполняется 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.

Скоро понадобится помощь по этому вопросу. Цените все ваши ценные советы.

1 Ответ

2 голосов
/ 29 декабря 2011

Что вам нужно, это нумерация страниц. Здесь - это статья, в которой показано, как это сделать.

Обновление : для этого на стороне клиента с помощью jQuery посмотрите здесь ,В основном добавьте класс к таблице в ItemTemplate и ссылку Show more и добавьте код javascript где-нибудь на странице.

Добавление сюда сценария jQuery (при условии, что row - это класс вашего элемента, а showMore - это ссылка, которая показывает больше элементов, в данном случае все они для простоты): 

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

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

Youдалее можно поиграть с функцией slice (), чтобы добавить более интересное поведение.

Обратите внимание, что если ваша страница работает медленно, пользователи увидят всю таблицу, а когда страница будет готова, загрузив большинство строк в спискеисчезнет.Чтобы избежать этого, выполняйте JavaScript сразу после рендеринга списка данных.

...