0

我正在尝试将 jquery slideToggle() 函数绑定到 apex:pageBlockTable 中的一行数据。

我在表格中显示了一些信息，并希望如果有人单击任何行，与该联系人相关的更多信息将显示在滑块中，其余行向下移动。当他再次点击时，滑块向上移动，一切恢复正常。

如果我没记错的话，我想我需要在一个 div 中绑定行元素（apex:columns），在另一个 div 中绑定滑块中的信息。但不知何故，这是行不通的。

这是代码：

<apex:page controller="xingShowSearchResult">

<head>
<style type="text/css"> 
#rowInfo,#rows{
        padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#rowInfo { 
    width:50px;
    display:none; 
}
 </style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<script>
$j = jQuery.noConflict();

   $j(document).ready(function(){
      $j("#rows").click(function(){
    $j("#rowInfo").slideToggle("slow");
  });
});

</script>

</head>
<body>

<apex:pageMessages />
    <div id='backtoDiv' style="height:20px;">
        <apex:outputLink value="/apex/XingPageTab" style="color:blue;">Back to Home Page</apex:outputLink>
    </div>

<apex:pageBlock title="Suche Kontakte"> 
    <apex:pageBlockSection columns="1">
    <apex:form style="float:right" >
        <apex:commandLink style="height:20px;font-weight: bold;" value="Suchergebnisse entfernen" action="{!deleteSearchResult}" />
    </apex:form>
    </apex:pageBlockSection>
    <apex:pageBlockTable value="{!newList}" var="contacts" id="contactsTable">

       <div id="rows">
        <apex:column > 
            <apex:image url="{!contacts.photoURL__c}" /> 
        </apex:column>


        <apex:column headerValue="Name"> {!contacts.displayName__c}</apex:column>


        <apex:column headerValue="Firma"> {!contacts.firma__c}</apex:column>
        <apex:column headerValue="Title" > {!contacts.title__c}</apex:column>
      </div>



     <div id="rowInfo" >
         <p>
            This is the paragraph to end all paragraphs.  You
            should feel <em>lucky</em> to have seen such a paragraph in
            your life.  Congratulations!
         </p>
     </div>  
     </apex:pageBlockTable>
</apex:pageBlock>              
</body>



</apex:page>

我正在尝试了解 Visualforce 和 JS，因此我们将不胜感激。

最好的，Ankit

4

2 回答 2

0 
 <apex:page standardController="RequestActivity__c" recordSetvar="RequestActivity" extensions="MDFClaimForRequestActivity" id="thePage" showHeader="true">
    <apex:includeScript value="{!$Resource.min}"/>

            <apex:includeScript value="{!URLFOR($Resource.acclayout, 'accorpanel/jquery-1.9.1.js')}"/>
            <apex:includeScript value="{!URLFOR($Resource.acclayout, 'accorpanel/jquery-ui.js')}"/>
            <apex:stylesheet value="{!URLFOR($Resource.acclayout, 'accorpanel/jquery-ui.css')}"/>

    <style>
    .pgTdClass.active
    {
      background-image: url({!URLFOR($Resource.HpMDFAccordions,'HpAccordion/minus_sign.png')});
       background-repeat : no-repeat;
       background-position:left center;
    } 
    .pgTdClass
    {
    background-image: url({!URLFOR($Resource.HpMDFAccordions,'HpAccordion/plus_sign.png')});
       background-repeat : no-repeat;
       background-position:left center;
    }
    </style>

    <apex:form id="pgFrmId">
        <apex:pageBlock title="Activities" id="pgBlkId">
        <table width="100%" border="0" cellspacing="0" cellpadding="5" class="myAccordion" id="pgTbleId">
        <thead> 
            <tr>
            <td class="tableHeader"></td>
                <td class="tableHeader">Activity Name</td>      
                <td class="tableHeader">Activity Description</td>
                <td class="tableHeader">Status</td>
                <td class="tableHeader">Requested HP Investment</td>
                <td class="tableHeader">Claim Status</td>
            </tr>
        </thead>
         <tbody>
            <apex:repeat value="{!fWrapper}" var="activity">
                <tr class="pgTrId" style="border-left: 5px solid #000;" >
                    <td class="pgTdClass" onclick="getActivityDetails('{!activity.reqActivity}');">
                         <span class="pgImgClas"  id="{!activity.reqActivity}" ></span>
                    </td>

                    <td class="tableContent" id="aname">{!activity.reqActivity.Name}</td>
                    <td class="tableContent">{!activity.reqActivity.Activity_Descrpition__c}</td>
                    <td class="tableContent">{!activity.reqActivity.Status__c}</td>
                    <td class="tableContent">{!activity.reqActivity.RequestedHPInvestment__c}</td>
                    <td class="tableContent">{!activity.reqActivity.ClaimStatusTraffic__c}</td>
                </tr>
                <tr class="accordion" style="border-left: 5px solid #000; background-color:#fff;" >
                 <td colspan="6">
                 <apex:outputPanel id="actDetailPanel">
                    <h2 id="section1">Activity Details</h2>
                    <p>Hi youe data goes here...</p>
            </apex:outputPanel>
           </td>
           </tr>
            </apex:repeat>
        </tbody>
    </table>
    </apex:pageBlock>
    </apex:form>
    <script>
    jQuery(document).ready(function ($) 
    {
        var divs=$('.accordion').hide(); 
        var h2s=$('.pgTdClass').click(function () 
        {
           h2s.not(this).removeClass('active')
           $(this).toggleClass('active')
           var parentEle= $(this).parent();
           divs.not(parentEle.next()).slideUp()
           parentEle.next().slideToggle()
           return false; 
        });
    });    

    </script>
    </apex:page>
于 2013-09-23T07:20:13.497 回答
0

如果我正确理解您的代码，将会有多个 div<div id="rows">和多个 div <div id="rowInfo" >。如果我的这个假设是错误的，请告诉我。

理想情况下，应该只有一个 1 id 的元素而不是多个元素。这可能会导致意外行为。您可以将其分别更改为<div class="rows">和<div id="rowInfo" >。

并尝试

<script>
$j = jQuery.noConflict();

   $j(document).ready(function(){
      $j(".rows").click(function(){
    $j(".rowInfo").slideToggle("slow");
  });
});

</script>

如果这也不起作用..检查javascript控制台是否有任何错误..如果它在任何特定浏览器或所有浏览器上失败，也让我知道？

于 2013-05-15T05:22:00.970 回答