Question

我有repeater control，它绑定了来自DB的数据。该转发器在单独的DIV中具有LABEL(ID=EmpName)控制权。在此mouseover的{{1}}事件中，我必须LABEL另一个show/hide控件显示某些值的DIV。

目前能够做到这一点，但我使用了点击事件，当我点击转发器控件LABEL中的任何一行时，所有DIV都显示出来。

下面我给出了来源。

(LABEL(ID=EmpName))

java脚本函数：

 <asp:Repeater runat="server" ID="MyCreditRep" OnItemDataBound="MyCreditRep_ItemDataBound"
    OnItemCommand="MyCreditRep_ItemCommand">
    <ItemTemplate>
        <div class="productlist">
            <div>
                <div class="producthead" style="float: left;">
                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td align="left" style="height: 50px">
                                <%--        <p>Test</p>--%>
                                <p id="P1" class="flip">
                                    <asp:Label ID="ProductLbl" runat="server" Text='<%#Eval("Product_Name") %>' class="panel"></asp:Label>
                            </td>
                            </p>
                        </tr>
                    </table>
                </div>
                <div class="clearboth">
                </div>
            </div>
        </div>
        <div id="ProductPointsDiv" runat="server" class="panel">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td style="padding-left: 75px" class="product_point_body">
                        <asp:Label ID="ProductPointLbl" runat="server" Text='<%#Eval("Point_Description") %>'></asp:Label>
                    </td>
                </tr>
            </table>
        </div>
    </ItemTemplate>
</asp:Repeater>

的CSS：

  <script type="text/javascript">
            $(document).ready(function() {
                $(".flip").click(function() {
                    $(".panel").slideToggle("slow");
                });
            });
   </script>

感谢。

Answer 1

Untitled Page //基于：http://blogs.msdn.com/phaniraj/archive/2007/06/20/how-to-perform-operations-on-all-instances-of-a-ajax-control-extender-on-a-page.aspx

            // Function To Collapse all CollapsiblePanels on a page , if not already collapsed, except the one specified.
            function collapseAllOtherCollapsiblePanels(id) {
                    // Loop through all the Behaviors Present in the Page
                    var allBehaviors = Sys.Application.getComponents() ;
                    var currentBehavior = null;
                    for( var loopIndex = 0 ; loopIndex < allBehaviors.length; loopIndex++ ) {
                            currentBehavior = allBehaviors[loopIndex];
                            // If its of type CollapsiblePanelBehavior
                            if( currentBehavior.get_name() === "CollapsiblePanelBehavior" ) {
                                    // Check that the current panel is not the panel that's expanding
                                    if (currentBehavior.get_id() != id) {
                                            // Check if the Panel is Collapsed
                                            if( !currentBehavior.get_Collapsed() ) {
                                                    // If not collapsed , collapse the Panel.
                                                    currentBehavior.collapsePanel();
                                            }
                                    }
                            }
                    }
                    return false;
            }
    </script>
<form id="form1" runat="server">
<div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>              
    <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
            <HeaderTemplate>
                    <table>
                            <thead>
                                    <th>Stuff</th>
                            </thead>
                            <tbody>
            </HeaderTemplate>
            <ItemTemplate>
                    <tr>
                            <td>
                                    <%# Eval("Subject")%>
                                    <asp:LinkButton ID="ShowHideButton" runat="server" Text="Show Time" 
                                            OnClientClick="collapseAllOtherCollapsiblePanels(this.id);"></asp:LinkButton>
                                    <asp:Panel ID="TimePanel" runat="server">
                                            <%# Eval("StartTime", "{0:d}")%> - <%# Eval("EndTime", "{0:d}")%>
                                    </asp:Panel>
                                    <ajaxToolkit:CollapsiblePanelExtender ID="CollapsePanel1" runat="server" SuppressPostBack="true" 
                                            CollapseControlID="ShowHideButton" Collapsed="true" CollapsedText="Show Time" 
                                            ExpandControlID="ShowHideButton" ExpandedText="Hide Time" TargetControlID="TimePanel">
                                    </ajaxToolkit:CollapsiblePanelExtender>
                            </td>
                    </tr>
            </ItemTemplate>
            <FooterTemplate>
                            </tbody>
                    </table>
            </FooterTemplate>
            </asp:Repeater>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                    ConnectionString="<%$ ConnectionStrings:testConnectionString1 %>" 
                    SelectCommand="SELECT [Subject], [StartTime], [EndTime] FROM [DateTest]">
            </asp:SqlDataSource>

</div>
</form>

Answer 2

以下是您需求的完美示例

http://www.4guysfromrolla.com/articles/091504-1.aspx和live example 你可以查看并继续进行

我希望这会有所帮助!!!

在LABEL上切换DIV单击ASP.Net 3.5中的转发器控件内部

2 个答案: