时间戳

首页 > 解决方案 > Visualforce 嵌套页面块部分折叠所有空间

javascript - Visualforce 嵌套页面块部分折叠所有空间

问题描述

我正在尝试在 visualforce 顶点页面中嵌套 pageblocksections。我希望这些部分默认折叠。我在网上搜索并找到了一个默认折叠部分的javascript代码。但是当我在部分中放置一些文本时，它会出现在中间。此代码在文本前面添加了不必要的空格。我的代码是

<apex:page  >
   <apex:pageBlock>
      <apex:pageBlockSection title="Option 1" id="op1">
          <script> twistSection(document.getElementById('img_{!$Component.op1}')); 
                </script>
            <apex:pageBlockSectionItem>
                    <span>This is a test</span>
          </apex:pageBlockSectionItem>  
       </apex:pageBlockSection>
    <apex:pageBlockSection title="Option 2" id="op2">
        <script> twistSection(document.getElementById('img_{!$Component.op2}')); 
                </script>
            <apex:pageBlockSectionItem>
                    <span>This is a test</span>
          </apex:pageBlockSectionItem>  
       </apex:pageBlockSection>
       <apex:pageBlockSection title="Option 3" id="op3">
           <script> twistSection(document.getElementById('img_{!$Component.op3}')); 
                </script>
            <apex:pageBlockSectionItem>
                    <span>This is a test</span>
          </apex:pageBlockSectionItem>  
       </apex:pageBlockSection>
    </apex:pageBlock>
    
</apex:page>

结果是

在此处输入图像描述

如何修复它。

标签： javascriptsalesforceapex

解决方案

您的代码是错误的，但它与“twistSection”无关。

当您使用pageBlockSectionItem“承诺”时，其中会有 2 个标签，SF 会将它们作为列放在表格中。第一个将用作“字段标签”，第二个将用作“字段值”。如果只有 1 个标签 - 您的内容将位于 2 列应位于的空间中。在这和内部的默认 2 列布局之间pageBlockSection- 东西看起来居中。

看看这是否会给你更好的想法

<apex:page >
    <apex:pageBlock >
        <apex:pageBlockSection title="Option 1" id="op1">
            <script> twistSection(document.getElementById('img_{!$Component.op1}')); </script>
            <apex:pageBlockSectionItem >
                <span>This is a test</span>
            </apex:pageBlockSectionItem>    
        </apex:pageBlockSection>

        <apex:pageBlockSection title="Option 2" id="op2" columns="1">
            <script> twistSection(document.getElementById('img_{!$Component.op2}')); </script>
            <apex:pageBlockSectionItem >
                <apex:outputLabel >Label here</apex:outputLabel>
                <apex:outputText >Payload here</apex:outputText>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>

        <apex:pageBlockSection title="Option 3" id="op3">
            <script> twistSection(document.getElementById('img_{!$Component.op3}'));</script>
            <span>Or without section items at all</span>
        </apex:pageBlockSection>

        <apex:pageBlockSection title="Option 4" id="op4" columns="1">
            <script> twistSection(document.getElementById('img_{!$Component.op4}')); </script>
            <apex:pageBlockSectionItem >
                <span style="text-align:left">Or still as 1 tag but left-aligned.</span>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>    
</apex:page>

在此处输入图像描述

编辑以回答评论

如果 pageblocksection 内只有一个 pageblocksectionitem，它就可以工作。我需要页面块部分内的三列。当我再添加两个 pageblocksectionitems 时，间距会回来，即使所有三个都存在左对齐

那不是间距，那是<script>标签也占据 1 个单元格。

在此处输入图像描述

看看您是否可以将脚本移到该部分之外（但您必须提供更详细的 id 的“路径”。

<apex:page id="p">
    <apex:pageBlock id="pb">
        <apex:pageBlockSection title="Option 4" id="op4" columns="3">
            <apex:pageBlockSectionItem >
                <span style="text-align:left">Content 1</span>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem >
                <span style="text-align:left">Content 2</span>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem >
                <span style="text-align:left">Content 3</span>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
    <script> twistSection(document.getElementById('img_{!$Component.p.pb.op4}'));</script>
</apex:page>

或者你可以看看apex:panelBar, apex:panelBarItem“适当的”类似手风琴的功能，而不需要额外的 JS hack 和页面结构改变时的东西破坏？

推荐阅读