之前的一篇介紹過關于salesforce手動配置關聯關系實作PickList的關聯效果,但是現實的開發中,很多資料不是定死的,應該通過ajax來動态擷取,本篇講述通過JavaScript Remoting 方式實作關聯效果。
一、JavaScript Remoting簡單介紹
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnLzEDMzUDNwMTOtATOwAzM5AzMxYDM2AjNxAjMtYjN5ATM58CX2AjNxAjMvwlN2kDMxkzLcd2bsJ2Lc12bj5ycn9Gbi52YuUTMwIzcldWYtl2Lc9CX6MHc0RHaiojIsJye.png)
1 Visualforce.remoting.Manager.invokeAction (
'{!$RemoteAction.MyController.myFunction}',
2 param1,param2,
3 function(result, event){
4 //TODO 處理傳回結果
5 },
6 {escape: true}
7 );
其中需要在MyController的myFunction上通過@RemoteAction注解辨別一下,即
1 public class MyController {
2 @RemoteAction
3 public returnType myFunction(param1,param2) {
4 //returnType為方法需要傳回的類型
5 }
6 }
二.關聯制作
1.省市關聯表制作
省和市具有關聯關系,不同的省對應着不同的城市。設計省市關聯表:Province_City__c,主要字段包括Name(存儲省或市名稱),ID__c(編号),Parent_ID__c(此記錄對應的父)以及Order_Number__c(此條記錄的排序号)
并添加幾條記錄,記錄如下所示:
2.ProvinceCityController的制作
此類中應該實作以下功能:
1.加載需要顯示的省;
2.選中某個省後通過省得ID擷取此省對應所有的市。
類的内容如下所示:
1 public with sharing class ProvinceCityController {
2
3 public List<SelectOption> provinceOptionList{get;set;}
4
5 public String provinceId{get;set;}
6
7 public static String cityId{get;set;}
8
9 public ProvinceCityController() {
10 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];
11 if(provinceList == null) {
12 provinceList = new List<Province_City__c>();
13 }
14 provinceOptionList = new List<SelectOption>();
15 for(Province_City__c province : provinceList) {
16 provinceOptionList.add(new SelectOption(province.ID__c,province.Name));
17 }
18 }
19
20 @RemoteAction
21 public static List<Province_City__c> getCityListByProvince(String provinceId) {
22 List<Province_City__c> cityList;
23 if(provinceId != null && provinceId.length() > 0) {
24 cityList = [select Id,Name,ID__c from Province_City__c where Parent_Id__c = :provinceId order by Order_Number__c asc];
25 }
26 if(cityList == null) {
27 cityId = null;
28 cityList = new List<Province_City__c>();
29 }
30 return cityList;
31 }
32 }
3.ProvinceCityPage頁面制作
頁面中包含兩個下拉框,選擇省以後才可以顯示市,選擇市以後彈出對話框顯示市的ID__c
頁面代碼如下:
1 <apex:page controller="ProvinceCityController">
2 <apex:form id="form">
3 <apex:selectList value="{!provinceId}" id="province" multiselect="false" size="1" onchange="showCity();">
4 <apex:selectOption itemLabel="--None--" itemValue="--None--" rendered="{!if(provinceId==null,true,false)}" />
5 <apex:selectOptions value="{!provinceOptionList}">
6 </apex:selectOptions>
7 </apex:selectList>
8
9 <apex:selectList value="{!cityId}" id="city" multiselect="false" size="1" onchange="showDetail();">
10 <apex:selectOption itemLabel="--None--" itemValue="--None--" rendered="{!if(cityId==null,true,false)}" />
11 </apex:selectList>
12 </apex:form>
13
14 <script>
15 function showCity() {
16 var provinceId = document.getElementById("{!$Component.form.province}").value;
17 console.log(provinceId);
18 Visualforce.remoting.Manager.invokeAction (
19 '{!$RemoteAction.ProvinceCityController.getCityListByProvince}',
20 provinceId,
21 function(result, event){
22 //clear options
23 document.getElementById("{!$Component.form.city}").length = 0;
24 if (event.status) {
25 if(result != null && result.length > 0) {
26 for(var i=0;i<result.length;i++) {
27 var tempOption = new Option();
28 tempOption.value=result[i].ID__c;
29 tempOption.text = result[i].Name;
30 document.getElementById("{!$Component.form.city}").add(tempOption);
31 }
32 } else {
33 var tempOption = new Option();
34 tempOption.value= '--None--';
35 tempOption.text = '--None--';
36 document.getElementById("{!$Component.form.city}").add(tempOption);
37 }
38 }
39 },
40 {escape: true}
41 );
42 }
43
44 function showDetail() {
45 var cityId = document.getElementById("{!$Component.form.city}").value;
46 alert(cityId);
47 }
48 </script>
49 </apex:page>
顯示效果如下所示:
當選擇黑龍江以後,右側的市便會顯示黑龍江省所包含的市。
當選中具體的市的item,會彈出此城市對應的ID__c。
總結:項目中實作關聯主要用到的是js Remoting,隻要掌握其基本寫法,遠端調用請求寫法将會很簡單友善,代碼中隻是實作基本功能,未作相關的check,有興趣的朋友可以自己添加以及完善。
作者:zero
部落格位址:http://www.cnblogs.com/zero-zyq/
本文歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接配接
個人下載下傳了一些相關學習的PDF檔案,如果需要下載下傳請通路百度雲 點選此處通路 密碼:jhuy
如果文章的内容對你有幫助,歡迎點贊~
為友善手機端檢視部落格,現正在将部落格遷移至微信公衆号:Salesforce零基礎學習,歡迎各位關注。