Lightning 实例：Lookup 组件

Lookup 组件

Visualforce 框架默认提供了设置 Lookup 字段的组件：

而在 Lightning 框架中还没有类似的组件。

本文的目的是在 Lightning 框架中建立一个 Lookup 组件，从而让用户可以选择相关的对象记录，设置 Lookup 字段的值。

效果如下：（对客户对象进行搜索，并选择某一项）

初始状态：

显示搜索结果：

选择某条记录：

当然，具体的外观效果还需要进行提高。为了演示方便，我们只用了默认的 Lightning Design System 外观。

代码结构

在该组件包含以下几个部分：

• Ltng_Lookup：核心组件，展示了组件的外观：搜索框和搜索按钮。为了保证搜索的灵活性，我们在其中设置一个 “provider” 属性，类型为 "Aura.Component[]"。这样，我们可以将搜索具体记录的逻辑封装在另一个组件中，并作为 “provider” 属性设置在核心组件里，从而分离了前后端逻辑
• Ltng_Send_Provider_Parameter：事件，用于将用户的搜索字符串传递给后端
• Ltng_Get_Provider_Result：事件，用于将后端的搜索结果传递给前端
• Ltng_Lookup_Account_Provider：提供数据的组件。这类组件封装了后端操作相关的逻辑，并调用上面两个事件和核心组件进行通信，从而做到了对于核心组件的即插即用。一般情况下，每个组件对应一个对象类型。我们这里建立关于“客户（Accouont）”的搜索逻辑
• Ltng_Send_SelectedId：事件，当用户在搜索结果中选择某项的时候，将被选择的记录的 ID 发送出去
• Ltng_Lookup_Demo：演示用的组件，用于使用 Lookup 组件，并接收用户在其中选择的记录的 ID 值

代码执行流程

1. 核心组件初始化的时候，加载设置好的提供数据的组件
2. 用户在核心组件中输入字符，点击“搜索”按钮
3. 核心组件调用控制器中的 “search” 函数，然后执行数据提供组件中的 Ltng_Send_Provider_Parameter 事件，将用户的输入发送出去
4. 数据提供组件中已经定义了 Ltng_Send_Provider_Parameter 事件的处理函数，从而可以得到用户的输入，并调用 Apex 控制器来执行搜索
5. 在数据提供组件得到搜索结果之后，执行 Ltng_Get_Provider_Result 事件，将搜索结果发送出去
6. 在核心组件中已经定义了 Ltng_Get_Provider_Result 事件的处理函数，所以可以得到搜索结果，显示在列表中
7. 用户可以点击任一记录进行选择，然后通过核心组件中的 Ltng_Send_SelectedId 事件将被选择的记录的 ID 发送给其他组件（比如包含了 Lookup 组件的外层组件）

完整代码

事件

Ltng_Send_Provider_Parameter：

<aura:event access="global" type="COMPONENT">
    <aura:attribute name="parameters" type="Object" access="public" />
</aura:event>

Ltng_Get_Provider_Result：

<aura:event access="global" type="COMPONENT">
    <aura:attribute name="data" type="Object" access="public" />
</aura:event>

Ltng_Send_SelectedId：

<aura:event access="global" type="COMPONENT">
    <aura:attribute name="selectedId" type="String" />
</aura:event>

上面三个事件中各包含一个属性，用于在组件之间传递值。

数据提供组件 Ltng_Lookup_Account_Provider

前端代码：

<aura:component controller="Ltng_Account_Controller">

    <!-- 注册两个事件，用于数据的发送和接收 -->
    <aura:registerEvent name="getProviderResult" type="c:Ltng_Get_Provider_Result" />
    <aura:registerEvent name="sendProvideParameter" type="c:Ltng_Send_Provider_Parameter" />
    
    <!-- 将发送数据的事件关联到控制器的 sendProvideParameter 函数 -->
    <aura:handler name="sendProvideParameter" action="{!c.sendProvideParameter}"  event="c:Ltng_Send_Provider_Parameter"/>

</aura:component>

控制器代码：

({
    sendProvideParameter : function(component, event, helper) {    
        var eventParams = event.getParams();
        var searchString = eventParams.parameters.searchString;

        // 调用 Apex 控制器的函数进行搜索
        var action = component.get("c.searchAccount");
        action.setParams({
            'searchString': searchString
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
         
            if(state == "SUCCESS") {
                var result = response.getReturnValue();
               
                // 在得到搜索结果后，将其通过 getProviderResult 事件发送出去
                //   在核心组件中定义了相应的处理函数
                var dataChangeEvent = component.getEvent("getProviderResult");
                dataChangeEvent.setParams({
                      data: result
                });
                dataChangeEvent.fire();
            }
        });
        $A.enqueueAction(action);
    },
})

相关 Apex 控制器代码：

public with sharing class Ltng_Account_Controller {
    public class SearchResult {
        public String id {get;set;}
        public String value {get;set;}
    }
    
    @AuraEnabled
    public static String searchAccount(String searchString) {
        searchString = searchString + '%';

        List<Account> resultList = [SELECT Id, Name
                                        FROM Account
                                        WHERE Name LIKE :searchString];

        List<SearchResult> searchResults = new List<SearchResult>();

        for(Account res : resultList) {
            SearchResult sr = new SearchResult();
            sr.id = res.Id;
            sr.value = res.Name;

            searchResults.add(sr);
        }

        // 将搜索结果保存为 ID 和 Name 的列表，发送回 Lightning 组件中
        return JSON.serialize(searchResults);
    }
}

核心组件 Ltng_Lookup

外观如下：

<aura:component extensible="true">
    
    <!-- 初始化组件 -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <!-- 数据提供组件属性 -->
    <aura:attribute name="provider" type="Aura.Component[]" access="public" description="Search provider" />

    <!-- 外观模板属性。当此组件被继承时，子组件可以重写该组件中定义了 template 的部分 -->
    <aura:attribute name="template" type="Aura.ComponentDefRef[]" access="public" />

    <aura:attribute name="searchString" type="String" access="public" />
    <aura:attribute name="searchResultList" type="List" access="public" />
    
    <aura:registerEvent name="LtngSendSelectedId" type="c:Ltng_Send_SelectedId" />
    
    <div class="slds">
        <div class="slds-form--inline">
            <div class="slds-form-element">                
                <ui:inputText aura:id="searchInput" class="slds-input" value="{!v.searchString}" />
            </div>
            
            <div class="slds-form-element">
                <button class="slds-button slds-button--brand" onclick="{!c.search}">
                    搜索
                </button>
            </div>
            
            <ul class="slds-has-dividers--top">
                <aura:iteration items="{!v.searchResultList}" var="searchResult" template="{!v.template}">
                    <li class="slds-item">
                        <button class="slds-button" onclick="{!c.makeSelection}" id="{!searchResult.id}" name="{!searchResult.value}">{!searchResult.value}</button>
                    </li>
                </aura:iteration>
            </ul>  
        </div>
        {!v.body}
    </div>
    
</aura:component>

控制器代码：

({
    doInit: function(component, event, helper) {
        var providers = component.get('v.provider') || [];
        var provider = providers[0];

        // 设定提供数据的组件中的 “getProviderResult” 事件的关联函数
        // 当提供数据的组件得到搜索结果后，将使用此组件中的 getProviderResult 函数来处理
        // 注意，event 的 register 和 handler 所在的组件必须相关联，
        //   所以不能提供数据的组件中静态的使用 <aura:handler> 来设置
        provider.addEventHandler("getProviderResult", component.getReference("c.getProviderResult"));
    },

    search : function(component, event, helper) {
        var providers = component.get('v.provider') || [];
        var provider = providers[0];

        // 调用提供数据的组件中注册的 “sendProvideParameter” 事件，
        //   将用户的输入发送出去，进行搜索
        provider.get('e.sendProvideParameter').setParams({
            parameters: {
                searchString: component.get('v.searchString')
            }
        }).fire();
    },

    getProviderResult: function(component, event, helper) {    
        // 从事件中得到搜索结果，并赋值给组件的属性
        var receivedData = JSON.parse( event.getParam('data') );
        component.set("v.searchResultList", receivedData);
    },
    
    makeSelection: function(component, event, helper) {
        var selectedId = event.target.id;
        var selectedName = event.target.name;
        component.set("v.searchString", selectedName);
        component.set('v.searchResultList', null);

        // 将选择的记录的 ID 的值发送给其他组件（使用该 Lookup 组件的组件）
        var compEvent = component.getEvent('LtngSendSelectedId');
        compEvent.setParams({
            selectedId: selectedId
        });
        compEvent.fire();
    },
})

演示用的组件 Ltng_Lookup_Demo

外观如下：

<aura:component >
    <aura:attribute name="selectedAccountId" type="String" access="public" />
    
    <aura:handler name="LtngSendSelectedId" event="c:Ltng_Send_SelectedId" action="{!c.getSelectedAccountId}" />
    
    <p>请搜索客户：</p>
    
    <!-- 直接设置 Lookup 组件相关联的数据提供组件 -->
    <c:Ltng_Lookup >
        <aura:set attribute="provider">
            <c:Ltng_Lookup_Account_Provider />
        </aura:set>
    </c:Ltng_Lookup>
    
    <p>选择的客户ID 是：{!v.selectedAccountId}</p>
</aura:component>

控制器代码：

({
    getSelectedAccountId: function(component, event, helper) {
        var selectedId = event.getParam('selectedId');
        component.set('v.selectedAccountId', selectedId);
    },
})