如何通过Lightning选择列表过滤Lightning DataTable并调整JS/Helper？

需求说明 #

通过点击lightning:select组件的值过滤lightning:datatable的结果：

• 选择“Alle”时显示全部数据
• 选择其他选项时按对应类型过滤数据

已编写两个Apex方法（全量查询/按类型过滤查询），需调整JS控制器与Helper实现该逻辑。

现有代码 #

Apex 控制器类 #

public class MediathekSearchController {

    @AuraEnabled(cacheable=true)
    public static List<List<sObject>> getSearchResult(String searchKey, String KategorieValue){
     String findStr = '*'+searchKey+'*';
     Boolean isEmptySearch = String.isEmpty(searchKey);
    
         List<List<sObject>> searchResult = [FIND : findStr
                                            IN ALL FIELDS RETURNING
                                            Mediathek__c (Id, Name, Bezeichnung__c, Typ__c, Zielgruppe__c, Umfang__c, Bezeichnung_Link__c, Bezeichnung_Search__c)];
        return searchResult; 
        }
    
        
    public static List<List<sObject>> getFilteredSearchResult(String searchKey, String KategorieValue){
     String findStr = '*'+searchKey+'*';
     Boolean isEmptySearch = String.isEmpty(searchKey);
        
         List<List<sObject>> searchResultFiltered = [FIND : findStr
                                                    IN ALL FIELDS RETURNING
                                                    Mediathek__c (Id, Name, Bezeichnung__c, Typ__c, Zielgruppe__c, Umfang__c, Bezeichnung_Link__c, Bezeichnung_Search__c WHERE Typ__c=:KategorieValue)];
        return searchResultFiltered; 
        }
}

Lightning 组件 #

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="MediathekSearchController">

<!-- handlers-->
<aura:handler name="init" value="{!this}" action="{!c.init}"/>

<!-- attributes -->
<aura:attribute name="showSearchResults" type="Boolean" default="false"/>
<aura:attribute name="searchKey" type="String"/>
<aura:attribute name="mediathekList" type="List" default="Mediathek[]"/>
<aura:attribute name="mediathekColumns" type="List"/>
 <aura:attribute name="KategorieValue" type="String" default="Alle"/>


<div class= "slds-box">
    <div class="slds-grid slds-wrap" >
        <div class="slds-size_12-of-12">
    <lightning:layout multipleRows="true">
        <lightning:layoutItem  size="8">
            <lightning:input name="searchKey" placeholder="Suchbegriff einfügen" value="{!v.searchKey}"  onkeydown="{!c.search}"/>
        </lightning:layoutItem>
        <lightning:layoutItem  size="2">
            <lightning:button variant="brand" label="Suchen" title="Search" onclick="{!c.search}" class="customButton" />
        </lightning:layoutItem>
        <lightning:layoutItem  size="2">
         <lightning:select aura:id="KategorieValue" name="Kategorie" label="Kategorie" required="false" value="{!v.KategorieValue}">
                  
        <option value="Alle">Alle</option>
        <option value="Formular">Formular</option>
        <option value="Merkblatt">Merkblatt</option>
        <option value="Flyer">Flyer</option>
        <option value="Infobroschüre">Infobroschüre</option>
        </lightning:select>
        </lightning:layoutItem>
    </lightning:layout>
</div>
</div>
<div class="haha">
    <aura:if isTrue="{!v.showSearchResults}">
 
        <lightning:layout multipleRows="true">
            <lightning:layoutItem padding="around-small" size="12" >
                <lightning:datatable keyField="id"
                                     data="{!v.mediathekList}"
                                     columns="{!v.mediathekColumns}"
                                     hideCheckboxColumn="true"/>
                
                
    
            </lightning:layoutItem>
        </lightning:layout>
    </aura:if>
</div>
    </div>
</aura:component>

JS 控制器 #

({
init: function (component, event, helper){
   component.set('v.mediathekColumns', [
        {label: 'Bezeichnung', fieldName: 'Bezeichnung_Search__c', type: 'url' , fixedWidth: 395, 
         typeAttributes: {label: { fieldName: 'Bezeichnung__c' }, target: '_blank'}
        },
       {label: 'Typ', fieldName: 'Typ__c', type: 'text',  fixedWidth: 116,
        },
       {label: 'Zielgruppe', fieldName: 'Zielgruppe__c', type: 'text', fixedWidth: 116,
        },
       {label: 'Umfang', fieldName: 'Umfang__c', type: 'text', fixedWidth: 112,
       },
       
     
      ]);
         var action = component.get("c.getSearchResult");
   
    action.setCallback(this, function(response){
        var state = response.getState();
        if (state === "SUCCESS") {
            var records =response.getReturnValue();
            records.forEach(function(record){
                
                record.BEZ = record.Bezeichnung__c;
            });
            component.set("v.mediathekList", records);
        }
    });
    $A.enqueueAction(action);
},



    
search : function(component, event, helper) {
    helper.getSearchResultsFromApex(component, event, helper);
    component.set("v.showSearchResults",true);
} })

JS Helper #

({
    getSearchResultsFromApex : function(component, event, helper){
     
        var action = component.get("c.getSearchResult");
        
       
        action.setParams({ searchKey : searchStr, KategorieValue :  kategoryVal});
        // Create a callback that is executed after
        // the server-side action returns
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
 var result = response.getReturnValue();
  result.forEach(function(result){
                    result.Name = '/'+result.Id;
                    
                });
               
                // SOSL will always return the list in the order they were queried
                component.set("v.mediathekList",result[0]);
                  
                
            }
            else if (state === "INCOMPLETE") {
                // do something
            }
                else if (state === "ERROR") {
                    var errors = response.getError();
                    if (errors) {
                        if (errors[0] && errors[0].message) {
                            console.log("Error message: " +
                                        errors[0].message);
                        }
                    } else {
                        console.log("Unknown error");
                    }
                }
        });
        $A.enqueueAction(action);
    }
 })

调整方案 #

1. 修改JS Helper #

修复变量未定义问题，根据选择的类别判断调用哪个Apex方法：

({
    getSearchResultsFromApex : function(component, event, helper){
        // 获取组件上的搜索关键词和类别值
        var searchStr = component.get("v.searchKey") || '';
        var kategoryVal = component.get("v.KategorieValue");
        
        // 根据类别选择对应的Apex方法
        var actionName = kategoryVal === 'Alle' ? 'c.getSearchResult' : 'c.getFilteredSearchResult';
        var action = component.get(actionName);
        
        // 设置参数
        action.setParams({ 
            searchKey : searchStr, 
            KategorieValue : kategoryVal
        });
        
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var result = response.getReturnValue();
                // SOSL返回的是List<List<sObject>>，取第一个列表
                var mediathekRecords = result[0] || [];
                
                component.set("v.mediathekList", mediathekRecords);
            }
            else if (state === "ERROR") {
                var errors = response.getError();
                if (errors && errors[0] && errors[0].message) {
                    console.log("Error message: " + errors[0].message);
                } else {
                    console.log("Unknown error");
                }
            }
        });
        $A.enqueueAction(action);
    }
 })

2. 优化JS控制器 #

给init方法补充参数传递，确保初始化时能正确加载数据：

({
    init: function (component, event, helper){
        component.set('v.mediathekColumns', [
            {label: 'Bezeichnung', fieldName: 'Bezeichnung_Search__c', type: 'url' , fixedWidth: 395, 
             typeAttributes: {label: { fieldName: 'Bezeichnung__c' }, target: '_blank'}
            },
           {label: 'Typ', fieldName: 'Typ__c', type: 'text',  fixedWidth: 116},
           {label: 'Zielgruppe', fieldName: 'Zielgruppe__c', type: 'text', fixedWidth: 116},
           {label: 'Umfang', fieldName: 'Umfang__c', type: 'text', fixedWidth: 112}
        ]);
        // 初始化时调用Helper加载全量数据
        helper.getSearchResultsFromApex(component, event, helper);
        component.set("v.showSearchResults", true);
    },

    search : function(component, event, helper) {
        helper.getSearchResultsFromApex(component, event, helper);
        component.set("v.showSearchResults",true);
    } 
})

3. 组件添加Select onChange事件 #

让选择类别时自动触发搜索，修改lightning:select标签：

<lightning:select aura:id="KategorieValue" name="Kategorie" label="Kategorie" required="false" value="{!v.KategorieValue}" onchange="{!c.search}">
    <option value="Alle">Alle</option>
    <option value="Formular">Formular</option>
    <option value="Merkblatt">Merkblatt</option>
    <option value="Flyer">Flyer</option>
    <option value="Infobroschüre">Infobroschüre</option>
</lightning:select>

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