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，有兴趣的朋友可以自己添加以及完善。