Lookup 組件
Visualforce 框架默認(rèn)提供了設(shè)置 Lookup 字段的組件：
Visualforce 中的 Lookup 組件
而在 Lightning 框架中還沒(méi)有類(lèi)似的組件。
本文的目的是在 Lightning 框架中建立一個(gè) Lookup 組件，從而讓用戶(hù)可以選擇相關(guān)的對(duì)象記錄，設(shè)置 Lookup 字段的值。
效果如下：（對(duì)客戶(hù)對(duì)象進(jìn)行搜索额获，并選擇某一項(xiàng)）
初始狀態(tài)：
初始狀態(tài)
顯示搜索結(jié)果：
顯示搜索結(jié)果
選擇某條記錄：
選擇某條記錄
當(dāng)然，具體的外觀效果還需要進(jìn)行提高。為了演示方便路翻，我們只用了默認(rèn)的 Lightning Design System 外觀。
代碼結(jié)構(gòu)
在該組件包含以下幾個(gè)部分：
- Ltng_Lookup：核心組件茄靠，展示了組件的外觀：搜索框和搜索按鈕茂契。為了保證搜索的靈活性，我們?cè)谄渲性O(shè)置一個(gè) “provider” 屬性慨绳，類(lèi)型為 "Aura.Component[]"掉冶。這樣，我們可以將搜索具體記錄的邏輯封裝在另一個(gè)組件中脐雪，并作為 “provider” 屬性設(shè)置在核心組件里厌小，從而分離了前后端邏輯
- Ltng_Send_Provider_Parameter：事件，用于將用戶(hù)的搜索字符串傳遞給后端
- Ltng_Get_Provider_Result：事件战秋，用于將后端的搜索結(jié)果傳遞給前端
- Ltng_Lookup_Account_Provider：提供數(shù)據(jù)的組件璧亚。這類(lèi)組件封裝了后端操作相關(guān)的邏輯，并調(diào)用上面兩個(gè)事件和核心組件進(jìn)行通信脂信，從而做到了對(duì)于核心組件的即插即用癣蟋。一般情況下，每個(gè)組件對(duì)應(yīng)一個(gè)對(duì)象類(lèi)型狰闪。我們這里建立關(guān)于“客戶(hù)（Accouont）”的搜索邏輯
- Ltng_Send_SelectedId：事件疯搅，當(dāng)用戶(hù)在搜索結(jié)果中選擇某項(xiàng)的時(shí)候，將被選擇的記錄的 ID 發(fā)送出去
- Ltng_Lookup_Demo：演示用的組件埋泵，用于使用 Lookup 組件幔欧，并接收用戶(hù)在其中選擇的記錄的 ID 值
代碼執(zhí)行流程
- 核心組件初始化的時(shí)候，加載設(shè)置好的提供數(shù)據(jù)的組件
- 用戶(hù)在核心組件中輸入字符丽声，點(diǎn)擊“搜索”按鈕
- 核心組件調(diào)用控制器中的 “search” 函數(shù)礁蔗，然后執(zhí)行數(shù)據(jù)提供組件中的 Ltng_Send_Provider_Parameter 事件，將用戶(hù)的輸入發(fā)送出去
- 數(shù)據(jù)提供組件中已經(jīng)定義了 Ltng_Send_Provider_Parameter 事件的處理函數(shù)雁社，從而可以得到用戶(hù)的輸入瘦麸，并調(diào)用 Apex 控制器來(lái)執(zhí)行搜索
- 在數(shù)據(jù)提供組件得到搜索結(jié)果之后，執(zhí)行 Ltng_Get_Provider_Result 事件歧胁，將搜索結(jié)果發(fā)送出去
- 在核心組件中已經(jīng)定義了 Ltng_Get_Provider_Result 事件的處理函數(shù)滋饲，所以可以得到搜索結(jié)果厉碟，顯示在列表中
- 用戶(hù)可以點(diǎn)擊任一記錄進(jìn)行選擇，然后通過(guò)核心組件中的 Ltng_Send_SelectedId 事件將被選擇的記錄的 ID 發(fā)送給其他組件（比如包含了 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>
上面三個(gè)事件中各包含一個(gè)屬性屠缭，用于在組件之間傳遞值箍鼓。
數(shù)據(jù)提供組件 Ltng_Lookup_Account_Provider
前端代碼：
<aura:component controller="Ltng_Account_Controller">
<!-- 注冊(cè)兩個(gè)事件，用于數(shù)據(jù)的發(fā)送和接收 -->
<aura:registerEvent name="getProviderResult" type="c:Ltng_Get_Provider_Result" />
<aura:registerEvent name="sendProvideParameter" type="c:Ltng_Send_Provider_Parameter" />
<!-- 將發(fā)送數(shù)據(jù)的事件關(guān)聯(lián)到控制器的 sendProvideParameter 函數(shù) -->
<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;
// 調(diào)用 Apex 控制器的函數(shù)進(jìn)行搜索
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();
// 在得到搜索結(jié)果后呵曹，將其通過(guò) getProviderResult 事件發(fā)送出去
// 在核心組件中定義了相應(yīng)的處理函數(shù)
var dataChangeEvent = component.getEvent("getProviderResult");
dataChangeEvent.setParams({
data: result
});
dataChangeEvent.fire();
}
});
$A.enqueueAction(action);
},
})
相關(guān) 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);
}
// 將搜索結(jié)果保存為 ID 和 Name 的列表款咖，發(fā)送回 Lightning 組件中
return JSON.serialize(searchResults);
}
}
核心組件 Ltng_Lookup
外觀如下：
<aura:component extensible="true">
<!-- 初始化組件 -->
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<!-- 數(shù)據(jù)提供組件屬性 -->
<aura:attribute name="provider" type="Aura.Component[]" access="public" description="Search provider" />
<!-- 外觀模板屬性。當(dāng)此組件被繼承時(shí)奄喂，子組件可以重寫(xiě)該組件中定義了 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];
// 設(shè)定提供數(shù)據(jù)的組件中的 “getProviderResult” 事件的關(guān)聯(lián)函數(shù)
// 當(dāng)提供數(shù)據(jù)的組件得到搜索結(jié)果后铐殃，將使用此組件中的 getProviderResult 函數(shù)來(lái)處理
// 注意，event 的 register 和 handler 所在的組件必須相關(guān)聯(lián)跨新，
// 所以不能提供數(shù)據(jù)的組件中靜態(tài)的使用 <aura:handler> 來(lái)設(shè)置
provider.addEventHandler("getProviderResult", component.getReference("c.getProviderResult"));
},
search : function(component, event, helper) {
var providers = component.get('v.provider') || [];
var provider = providers[0];
// 調(diào)用提供數(shù)據(jù)的組件中注冊(cè)的 “sendProvideParameter” 事件贴谎，
// 將用戶(hù)的輸入發(fā)送出去誉察，進(jìn)行搜索
provider.get('e.sendProvideParameter').setParams({
parameters: {
searchString: component.get('v.searchString')
}
}).fire();
},
getProviderResult: function(component, event, helper) {
// 從事件中得到搜索結(jié)果毒租，并賦值給組件的屬性
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 的值發(fā)送給其他組件（使用該 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>請(qǐng)搜索客戶(hù)：</p>
<!-- 直接設(shè)置 Lookup 組件相關(guān)聯(lián)的數(shù)據(jù)提供組件 -->
<c:Ltng_Lookup >
<aura:set attribute="provider">
<c:Ltng_Lookup_Account_Provider />
</aura:set>
</c:Ltng_Lookup>
<p>選擇的客戶(hù)ID 是：{!v.selectedAccountId}</p>
</aura:component>
控制器代碼：
({
getSelectedAccountId: function(component, event, helper) {
var selectedId = event.getParam('selectedId');
component.set('v.selectedAccountId', selectedId);
},
})
