salesforce 零基礎學習（二十八）使用ajax方式實現聯動

之前的一篇介紹過關於salesforce手動配置關聯關系實現PickList的聯動效果，但是現實的開發中，很多數據不是定死的，應該通過ajax來動態獲取，本篇講述通過JavaScript Remoting 方式實現聯動效果。

一、JavaScript Remoting簡單介紹

 

上圖為PDF中基本介紹，在VF中調用格式如下：

Visualforce.remoting.Manager.invokeAction (                    
      '{!$RemoteAction.MyController.myFunction}', 
    param1,param2,
    function(result, event){ 
        //TODO    處理返回結果                
    },
    {escape: true}
);        

其中需要在MyController的myFunction上通過@RemoteAction注解標識一下,即

public class MyController {
   @RemoteAction
   public returnType myFunction(param1,param2) {
     //returnType為方法需要返回的類型
   }
}

 二.聯動制作

1.省市關聯表制作

省和市具有關聯關系，不同的省對應着不同的城市。設計省市關聯表：Province_City__c,主要字段包括Name(存儲省或市名稱),ID__c(編號),Parent_ID__c(此記錄對應的父)以及Order_Number__c(此條記錄的排序號)

並添加幾條記錄，記錄如下所示：

2.ProvinceCityController的制作

此類中應該實現以下功能：

1.加載需要顯示的省；

2.選中某個省后通過省得ID獲取此省對應所有的市。

類的內容如下所示：

public with sharing class ProvinceCityController {
    
    public List<SelectOption> provinceOptionList{get;set;}
    
    public String provinceId{get;set;}
    
    public static String cityId{get;set;}
    
    public ProvinceCityController() {
        List<Province_City__c> provinceList = [select Id,Name,ID__c from Province_City__c where Parent_Id__c = '0' order by Order_Number__c asc];
        if(provinceList == null) {
            provinceList = new List<Province_City__c>();
        }
        provinceOptionList = new List<SelectOption>();
        for(Province_City__c province : provinceList) {
            provinceOptionList.add(new SelectOption(province.ID__c,province.Name));
        }
    }
    
    @RemoteAction
    public static List<Province_City__c> getCityListByProvince(String provinceId) {
        List<Province_City__c> cityList;
        if(provinceId != null && provinceId.length() > 0) {
            cityList = [select Id,Name,ID__c from Province_City__c where Parent_Id__c = :provinceId  order by Order_Number__c asc];
        } 
        if(cityList == null) {
            cityId = null;
            cityList = new List<Province_City__c>();
        }
        return cityList;
    }
}

3.ProvinceCityPage頁面制作

頁面中包含兩個下拉框，選擇省以后才可以顯示市，選擇市以后彈出對話框顯示市的ID__c

頁面代碼如下：

<apex:page controller="ProvinceCityController">
    <apex:form id="form">
        <apex:selectList value="{!provinceId}" id="province" multiselect="false" size="1" onchange="showCity();">
        <apex:selectOption itemLabel="--None--"  itemValue="--None--"  rendered="{!if(provinceId==null,true,false)}" />
            <apex:selectOptions value="{!provinceOptionList}">
            </apex:selectOptions>
        </apex:selectList>
        
        <apex:selectList value="{!cityId}" id="city" multiselect="false" size="1" onchange="showDetail();">
            <apex:selectOption itemLabel="--None--" itemValue="--None--"  rendered="{!if(cityId==null,true,false)}" />
        </apex:selectList>
    </apex:form>
    
    <script>
        function showCity() {
            var provinceId = document.getElementById("{!$Component.form.province}").value;
            console.log(provinceId);
            Visualforce.remoting.Manager.invokeAction (
                '{!$RemoteAction.ProvinceCityController.getCityListByProvince}', 
                provinceId,
                function(result, event){ 
                    //clear options
                    document.getElementById("{!$Component.form.city}").length = 0;
                    if (event.status) {
                        if(result != null && result.length > 0) {
                            for(var i=0;i<result.length;i++) {
                                var tempOption = new Option();
                                tempOption.value=result[i].ID__c;
                                tempOption.text = result[i].Name;
                                document.getElementById("{!$Component.form.city}").add(tempOption);
                            }
                        } else {
                            var tempOption = new Option();
                            tempOption.value= '--None--';
                            tempOption.text = '--None--';
                            document.getElementById("{!$Component.form.city}").add(tempOption);
                        }
                    }
                },
                {escape: true}
            );
        }
        
        function showDetail() {
            var cityId = document.getElementById("{!$Component.form.city}").value;
            alert(cityId);
        }
    </script>
</apex:page>

顯示效果如下所示：

當選擇黑龍江以后，右側的市便會顯示黑龍江省所包含的市。

當選中具體的市的item，會彈出此城市對應的ID__c。

總結：項目中實現關聯主要用到的是js Remoting,只要掌握其基本寫法，遠程調用請求寫法將會很簡單方便，代碼中只是實現基本功能，未作相關的check，有興趣的朋友可以自己添加以及完善。