中继器行在单击时展开答案

【问题标题】：Repeater row expand upon click中继器行在单击时展开
【发布时间】：2013-09-12 03:04:07
【问题描述】：

我想要我的中继器行 - 当单击时扩展面板中的几个文本框。这里我已经使用数据库中的数据以表格格式完成了中继器。当单击中继器中的每一行时，我需要一个面板可见带有文本框。当再次单击该行时，面板必须变为不可见。

提前感谢您的帮助

<asp:Repeater ID="RepSample" runat="server" DataSourceID="SqlDataSource1">
    <HeaderTemplate>
        <table cellpadding="1" cellspacing="1" width="100%" style="font-family: Verdana;
            border: 1px solid #C0C0C0; background-color: #D8D8D8">
            <tr bgcolor="#FF781E">
                <th>
                    LicenseID
                </th>
                <th>
                    LicenseName
                </th>
                <th>
                    StartDate
                </th>
                <th>
                    EndDate
                </th>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr style="background-color: White">
            <td>
                <%#DataBinder.Eval(Container, "DataItem.LicenseID")%>
            </td>
            <td>
                <%#DataBinder.Eval(Container, "DataItem.LicenseName")%>
            </td>
            <td>
                <%#DataBinder.Eval(Container, "DataItem.StartDate")%>
            </td>
            <td>
                <%#DataBinder.Eval(Container, "DataItem.EndDate")%>
            </td>
        </tr>
    </ItemTemplate>
    <AlternatingItemTemplate>
        <tr>
            <td>
                <%#DataBinder.Eval(Container, "DataItem.LicenseID")%>
            </td>
            <td>
                <%#DataBinder.Eval(Container, "DataItem.LicenseName")%>
            </td>
            <td>
                <%#DataBinder.Eval(Container, "DataItem.StartDate")%>
            </td>
            <td>
                <%#DataBinder.Eval(Container, "DataItem.EndDate")%>
            </td>
        </tr>
    </AlternatingItemTemplate>
    <FooterTemplate>
        </table></FooterTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:KTestConnectionString %>"
    SelectCommand="SELECT LicenseID, LicenseName, StartDate, EndDate FROM Krish">
</asp:SqlDataSource>

【问题讨论】：

你需要重新写你的问题，你想做什么..到目前为止你尝试了什么..如果你遇到错误是什么
Devraj 谢谢你的帮助

标签： asp.net vb.net panel repeater

【解决方案1】：

jQuery 可以帮助...

用下面的 jQuery 代码制作你的 jQuery 插件...

(function($) {
    $.fn.extend({
        collapsiblePanel: function() {
            //Call the ConfigureCollapsiblePanel function for the selected element
            return $(this).each(ConfigureCollapsiblePanel);
        }
    });
})(jQuery);

function ConfigureCollapsiblePanel() {
    //Wrap the contents of the container within a new div.
    $(this).children().wrapAll("<div class='collapsibleContainerContent'></div>");

    //Create a new div as the first item within the container.
    $("<div class='collapsibleContainerTitle'></div>").prependTo($(this));

    //Assign a call to CollapsibleContainerTitleOnClick for the click event of the new div.
    $(".collapsibleContainerTitle", this).click(CollapsibleContainerTitleOnClick);
}

function CollapsibleContainerTitleOnClick() {
    //The item clicked is the new div... get this parent (the overall container) and toggle the content within it.
    $(".collapsibleContainerContent", $(this).parent()).slideToggle();
}

aspx 标记部分

在你的 Repeater ItemTemplate 中放置一个 div 并给它类 collapsibleContainer

<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
        <div class="collapsibleContainer">
            <%-- Put your text boxes and other contents here --%>
        </div>
    </ItemTemplate>
</asp:Repeater>

现在，只剩下页面中的 $().ready 函数了。

$().ready(function() {
    $(".collapsibleContainer").collapsiblePanel();
});

当然，您需要将 jQuery 插件引用作为脚本标签包含在您的页面上。

【讨论】：