带有jQuery手风琴的转发器内的中继器

时间:2013-08-07 21:45:09

标签: c# jquery nested accordion repeater

我最近根据本教程做了嵌套转发器。同样的事情

http://www.codeproject.com/Articles/6140/A-quick-guide-to-using-nested-repeaters-in-ASP-NET

但是我添加了一个jQuery手风琴,就像这个例子一样:

http://www.snyderplace.com/demos/accordion.html

一切都很好,但我意识到了一些UI问题。我的意思是,例如,如果我的一个嵌套中继器有100个记录而另一个只有1个记录,对于第二个只有1个记录,它有一个空白空间保留,因为它也有100个记录。有人知道如何使每个嵌套转发器的高度适合其元素吗?

<div id="accordion">
    <asp:Repeater ID="summary" runat="server" OnItemDataBound="summary_ItemDataBound">
        <HeaderTemplate>
        </HeaderTemplate>
        <ItemTemplate>
            <div>
                Id:<asp:Literal ID="litCategory" runat="server" />
            </div>
            <div>
                <asp:Repeater ID="detail" runat="server" OnItemDataBound="detail_ItemDataBound">
                <HeaderTemplate>
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                            </tr>
                        </thead>
                        <tbody>
                </HeaderTemplate>
                <ItemTemplate>
                        <tr>
                            <td><asp:Literal ID="litID" runat="server" /></td>
                            <td><asp:Literal ID="litName" runat="server" /></td>
                        </tr>
                </ItemTemplate>
                <FooterTemplate>
                        </tbody>
                    </table>
                </FooterTemplate>
            </asp:Repeater>
            </div>
        </ItemTemplate>
        <FooterTemplate>
        </FooterTemplate>
    </asp:Repeater>
</div>

1 个答案:

答案 0 :(得分:0)

我明白了!我找到了这个解决方案!

    $(function () {
        $("#accordion").accordion({
            collapsible: true,
            heightStyle: "content"
        });
    });

我需要指定属性,就是它!