Visualforce 嵌套的 pageblocksections 全部折叠 space

Question

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

<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>

结果是

如何解决。

Answer 1

您的代码有误，但与“twistSection”无关。

当您使用 pageBlockSectionItem you "promise" there will be 2 tags inside it and SF will put them as columns in the table. First will be used as "field label", second will be "field value". If there's just 1 tag - your content will be centered in the space where the 2 columns should be. Between this and the default being 2-column layout inside 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 个单元格。

看看您是否可以将脚本移出该部分（但您必须提供 more detailed "path" 个 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 和在页面结构更改时破坏内容？

Visualforce 嵌套的 pageblocksections 全部折叠 space

Visualforce nested pageblocksections collapse all space

javascript

salesforce

apex