Visualforce中如何仅渲染OpportunityLineItems复选框选中的行？

没问题！由于你使用Salesforce专业版无法编写Apex代码，完全可以通过Visualforce+客户端JavaScript实现只显示复选框选中的行的需求。下面是具体的实现方案和修改后的代码：

核心思路 #

给每个OpportunityLineItem行添加一个复选框，通过JavaScript监听复选框的状态变化（或手动触发筛选），动态控制对应行的显示/隐藏。因为是纯客户端操作，不会涉及服务器端逻辑，完美适配专业版的限制。

修改后的完整代码 #

<apex:page standardController="Opportunity">
    <script>
        // 筛选已勾选的行
        function filterSelectedRows() {
            // 获取所有复选框元素
            const checkboxes = document.querySelectorAll('.oli-checkbox');
            
            checkboxes.forEach(checkbox => {
                // 找到当前复选框所在的表格行
                const row = checkbox.closest('tr');
                if (checkbox.checked) {
                    // 显示选中的行
                    row.style.display = '';
                } else {
                    // 隐藏未选中的行
                    row.style.display = 'none';
                }
            });
        }

        // 页面加载时自动执行一次筛选（如果需要初始就只显示已勾选的行）
        window.addEventListener('load', function() {
            filterSelectedRows();
        });
    </script>

    <!-- 添加筛选按钮（可选，也可以让复选框实时触发筛选） -->
    <apex:commandButton value="只显示选中产品" onclick="filterSelectedRows(); return false;" style="margin-bottom:10px;"/>

    <apex:variable var="index" value="{!1}"/>
    <apex:dataTable width="100%" value="{!Opportunity.OpportunityLineItems}" var="oli" rowClasses="oli-row">
        <!-- 新增复选框列 -->
        <apex:column width="5%" headerClass="tableheadercenter" styleClass="tablebodycenter">
            <apex:facet name="header">选择</apex:facet>
            <!-- 给复选框加类名，方便JS定位，同时绑定oli的勾选状态字段 -->
            <apex:inputCheckbox value="{!oli.Selected__c}" styleClass="oli-checkbox" onchange="filterSelectedRows();"/>
        </apex:column>

        <apex:column width="10%" headerClass="tableheaderleft" styleClass="tablebodycenter">
            <apex:outputLabel value="{!index}."/>
            <apex:variable var="index" value="{!index+1}"/>
            <apex:facet name="header"></apex:facet>
        </apex:column>

        <apex:column width="40%" headerClass="tableheaderleft" styleClass="tablebodyleft">
            <apex:facet name="header">Bezeichnung</apex:facet>
            <apex:OutputField value="{!oli.Name}"/>
            <br/>
            <table border="0" width="100%" style="border-collapse: collapse; margin-bottom:10px">
                <tr>
                    <td width="30%" style="padding: 0px;line-height: 100%;">
                        <strong>Leistungszeitraum:</strong>&nbsp;<br/>
                        <apex:outputText value="{0, date, dd.MM.yyyy}">
                            <apex:param value="{!oli.ServiceDate}" />
                        </apex:outputText>&nbsp;-&nbsp;
                        <apex:outputText value="{0, date, dd.MM.yyyy}">
                            <apex:param value="{!oli.Licensing_Period_Calculated__c}" />
                        </apex:outputText>
                    </td>
                </tr>
            </table>
        </apex:column>

        <apex:column width="10%" headerClass="tableheadercenter" footerClass="tablefootercenter" styleClass="tablebodycenter">
            <apex:facet name="header">Anzahl</apex:facet>
            <apex:OutputField value="{!oli.Quantity}"/>
            <apex:facet name="footer"></apex:facet>
        </apex:column>

        <apex:column width="20%" headerClass="tableheadercenter" styleClass="tablebodycenter">
            <apex:facet name="header">Einzelbetrag</apex:facet>
            <apex:OutputField value="{!oli.UnitPrice}"/>
            <apex:facet name="footer"></apex:facet>
        </apex:column>

        <apex:column rendered="{!Opportunity.TotalDiscount__c != 0}" headerClass="tableheadercenter" footerClass="tablefootercenter" styleClass="tablebodycenter">
            <apex:facet name="header">Rabatt</apex:facet>
            <apex:OutputField value="{!oli.Discount}"/>
            <apex:facet name="footer"></apex:facet>
        </apex:column>

        <apex:column width="20%" headerClass="tableheaderright" styleClass="tablebodyright">
            <apex:facet name="header">Gesamtbetrag</apex:facet>
            <apex:OutputField value="{!oli.TotalPrice}"/>
            <apex:facet name="footer"></apex:facet>
        </apex:column>
    </apex:dataTable>
</apex:page>

关键细节说明 #

1. 复选框字段准备：我假设你已经在OpportunityLineItem对象上创建了一个名为Selected__c的复选框字段（用来存储勾选状态）。如果还没创建，直接在对象管理器里新增这个布尔型字段即可。
2. 两种筛选触发方式：
   • 复选框的onchange事件会实时触发筛选，勾选/取消勾选时立刻显示/隐藏对应行
   • 顶部的按钮可以手动触发筛选，适合批量操作后统一执行
3. 页面加载自动筛选：通过window.addEventListener('load')，页面加载完成后会自动隐藏未勾选的行，直接满足你“仅渲染选中行”的初始需求
4. 原代码错误修正：原代码里的value=" !Opportunity.OpportunityLineItems}"少了左大括号，我已经修正为value="{!Opportunity.OpportunityLineItems}"

这个方案完全不需要Apex代码，纯客户端实现，完美适配Salesforce专业版的限制。

内容的提问来源于stack exchange，提问作者Dennis1995