検索コンポーネント

デフォルトのアセンブリに配置されたルックアップフィールドで提供するVisualforceフレームワーク：

検索コンポーネントのVisualforce

いいえ同様の構成要素に雷フレーム。

この目的は、ユーザがルックアップフィールドの値を設定し、関連するオブジェクトレコードを、選択することができるように、ルックアップライトニングフレームアセンブリを作成することです。

結果は以下のとおりである:(顧客がアイテムを検索し、選択するために、オブジェクト）

初期状態：

初期状態

検索結果：

検索結果

レコードを選択：

レコードを選択

もちろん、改善された外観のための特定の必要性。プレゼンテーションを容易にするために、我々は唯一のデフォルトライトニング・デザイン・システムの外観を使用します。

コードの構造

アセンブリ内の以下の部分を含みます。

Ltng_Lookup：検索ボックスと検索ボタン：コンポーネントの外観を示すコアコンポーネント、。私たちはタイプの「プロバイダ」属性「Aura.Component []」を設定した検索の柔軟性を確保するために。このように、我々は、ロジックが別のコンポーネントにカプセル化され、そしてコア成分に設けられた「プロバイダ」属性として、それによって、前端と後端のロジックを分離された特定のレコードを検索することができ
Ltng_Send_Provider_Parameter：イベントは、バックエンドにユーザーの検索文字列を渡すために使用します
Ltng_Get_Provider_Result：イベント、検索結果には、フロント用のバックエンドに渡されます
Ltng_Lookup_Account_Provider：データ・コンポーネントを提供します。そのようなコンポーネントは、バックエンド操作関連するロジックをカプセル化し、上記の二つのイベントを呼び出し、それによってコアにプラグアンドプレイコンポーネントを導く、コアコンポーネントを伝えます。典型的には、各コンポーネントは、オブジェクトタイプに対応します。我々は、「クライアント（Accouont）」の論理検索を確立するためにここにいます
Ltng_Send_SelectedId：選択したレコードIDの送信されたユーザが検索結果の項目を選択する場合、
Ltng_Lookup_Demo：使用ルックアップコンポーネントのプレゼンテーションコンポーネント、および前記選択に記録され、受信したユーザIDの値

コードの実行フロー

成分負荷を設定し、コアコンポーネントの初期化時には、良好なデータを提供しました
コアコンポーネントでのユーザー入力文字は、「検索」ボタンをクリックしてください
コアコンポーネントの呼び出しコントローラは機能を「検索」し、データプロバイダコンポーネントLtng_Send_Provider_Parameterイベントを実行し、ユーザーの入力を発送させていただきます
あなたは、ユーザの入力を取得し、検索を実行するためのApexコントローラを呼び出すことができるように、データは、コンポーネントがハンドラLtng_Send_Provider_Parameterイベントを定義されていて
データが検索結果を取得するコンポーネントを提供した後、Ltng_Get_Provider_Resultイベントの実装では、検索結果を送信されます
あなたは、検索結果がリストに表示され得ることができるので、コアコンポーネントでは、ハンドラLtng_Get_Provider_Resultイベントを定義されています
ユーザ記録IDの送信は、任意のレコードの選択をクリックすることができ、次いで、（例えばコンポーネントアセンブリルックアップを含む外側層として）他のコンポーネントにコアアセンブリLtng_Send_SelectedIdイベントを介して選択されます

完全なコード

イベント

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>

上記3つのイベントそれぞれは、コンポーネント間の転送のための属性値を含みます。

データプロバイダコンポーネント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);
    },
})

ライトニング例：ルックアップアセンブリ

検索コンポーネント

コードの構造

コードの実行フロー

完全なコード

イベント

データプロバイダコンポーネントLtng_Lookup_Account_Provider

コアコンポーネントLtng_Lookup

プレゼンテーションで使用するコンポーネントLtng_Lookup_Demo

おすすめ