在Visualforce page中用自带的控件实现Ajax回调后台方法（并且可以用js去动态给parameters赋值）
这里用的组合是：apex:commandLink + apex:actionFunction + apex:outputPanel
这里的 apex:commandLink 和 apex:actionFunction 都可以通过 action 来指定Ajax所回调的后台方法，
方案一：
其中 apex:commandLink 充当直接回调后台方法的控件, 用 oncomplete 指定执行完后台方法之后所调用的 actionFunction
其中 apex:actionFunction 的 name 标识actionFunction的名字，实质上是一个JavaScript方法，其他地方可以直接进行调用，这里用apex:commandLink的oncomplete方法调用, rerender 指定所要刷新的 apex:outputPanel, oncomplete 指定刷新完outputPanel之后所调用的JavaScript方法
1）：后台class的变量和类定义
public List<SalesPersonSales> personSalesTop10_MTD { get; set; } public class SalesPersonSales implements Comparable{ public string OwnerName {get;set;} public string OwnerId {get;set;} public decimal TotalSales {get;set;} public decimal TotalGP {get;set;} public SalesPersonSales(string name, string id, decimal sales, decimal gp){ OwnerName = name; OwnerId = id; TotalSales = sales; TotalGP = gp; } public Integer compareTo(Object objToCompare){ return (((SalesPersonSales)objToCompare).TotalSales - TotalSales).intValue(); } }
2）：前台page的控件布局与JavaScript方法
<apex:form id="theform"> <apex:outputPanel id="SalespeopleReportPanel"> <apex:outputPanel id="SalespeopleReportMTDPanel"> <table> <thead> <tr> <th>Top 10 Salespeople MTD</th> <th>Sales</th> <th>GP$</th> </tr> </thead> <tbody> <apex:repeat value="{!personSalesTop10_MTD}" var="Item_Obj"> <tr> <td> <apex:outputLink value="../apex/DashboardReportDetail"> {!Item_Obj.OwnerName} <apex:param name="oid" value="{!Item_Obj.OwnerId}"/> <apex:param name="timetype" value="MTD"/> </apex:outputLink> </td> <td> <apex:outputText value="{0,number,$#,###.##}" > <apex:param value="{!Item_Obj.TotalSales}" /> </apex:outputText> </td> <td> <apex:outputText value="{0,number,$#,###.##}" > <apex:param value="{!Item_Obj.TotalGP}" /> </apex:outputText> </td> </tr> </apex:repeat> <tr> <td> <apex:commandLink action="{!LoadAllSalespeople}" oncomplete="rerenderSalespeopleReportMTDPanel();" status="sstatus"> Show All <apex:param value="All" name="topType"/> <apex:param value="MTD" name="timeType"/> </apex:commandLink> </td> <td></td> <td></td> </tr> </tbody> </table> </apex:outputPanel> <apex:actionFunction name="rerenderSalespeopleReportMTDPanel" rerender="SalespeopleReportMTDPanel" oncomplete="refreshSalespeopleDashboardChart();"/> </apex:outputPanel> </apex:form> <script type="text/javascript"> function refreshSalespeopleDashboardChart(){ // Your JS function.... } </script>
【 注：如果Ajax回调的方法更新了后台的某个变量，前台JS方法中想要直接用{!myVariable}这种方法是获取不到更新之后的值的，这样的处理方式细想一下还是很合理的。】
【 要想获取更新之后的值的话，要将变量的值存储到更新的outputPanel中的某个控件中，然后通过JS的方法获取更新之后控件的内容就可以了。】
3）：Ajax回调的后台方法
public pagereference LoadAllSalespeople(){ string topType = ApexPages.currentPage().getParameters().get('topType'); string timeType = ApexPages.currentPage().getParameters().get('timeType'); if(timeType == 'MTD'){ // to do } else{ // to do } return null; }
上面的这种方式有一个很大的弊端，就是不能够动态的给parameter赋值，如果想满足这点请看如下方案
方案二：
其中 apex:commandLink 仅当做一个触发器，通过前台JS方法去调用apex:actionFunction所对应的后台方法，这个JS方法做了一个非常重要的事情就是动态的传递Parameter的值。形式为：actionFunction的名字（param1, param2, ...）
其中 apex:actionFunction 的 name 标识actionFunction的名字，实质上是一个JavaScript方法，其他地方可以直接进行调用，rerender 指定所要刷新的 apex:outputPanel, oncomplete 指定刷新完outputPanel之后所调用的JavaScript方法
那么所对应的Apex Page代码如下所示：
<apex:form id="theform"> <apex:outputPanel id="SalespeopleReportPanel"> <apex:outputPanel id="SalespeopleReportMTDPanel"> <table> <thead> <tr> <th>Top 10 Salespeople MTD</th> <th>Sales</th> <th>GP$</th> </tr> </thead> <tbody> <apex:repeat value="{!personSalesTop10_MTD}" var="Item_Obj"> <tr> <td> <apex:outputLink value="../apex/DashboardReportDetail"> {!Item_Obj.OwnerName} <apex:param name="oid" value="{!Item_Obj.OwnerId}"/> <apex:param name="timetype" value="MTD"/> </apex:outputLink> </td> <td> <apex:outputText value="{0,number,$#,###.##}" > <apex:param value="{!Item_Obj.TotalSales}" /> </apex:outputText> </td> <td> <apex:outputText value="{0,number,$#,###.##}" > <apex:param value="{!Item_Obj.TotalGP}" /> </apex:outputText> </td> </tr> </apex:repeat> <tr> <td> <apex:commandLink onclick="CallActionFunction();">Show All</apex:commandLink> </td> <td></td> <td></td> </tr> </tbody> </table> </apex:outputPanel> <apex:actionFunction name="rerenderSalespeopleReportMTDPanel" action="{!LoadAllSalespeople}" rerender="SalespeopleReportMTDPanel" oncomplete="refreshSalespeopleDashboardChart();"/> <apex:param value="All" name=""/> <apex:param value="MTD" name=""/> </apex:actionFunction> </apex:outputPanel> </apex:form> <script type="text/javascript"> function CallActionFunction(){ rerenderSalespeopleReportMTDPanel('topType', 'timeType'); // these two parameters can get automatically by js } function refreshSalespeopleDashboardChart(){ // Your JS function.... } </script>
对比方案一和方案二：
方案一的基本代码结构（轻actionFunction，重commandLink）
<apex:outputPanel id="SalespeopleReportMTDPanel"> <apex:commandLink action="{!LoadAllSalespeople}" oncomplete="rerenderSalespeopleReportMTDPanel();"> Show All <apex:param value="All" name="topType"/> <apex:param value="MTD" name="timeType"/> </apex:commandLink> <apex:actionFunction name="rerenderSalespeopleReportMTDPanel" rerender="SalespeopleReportMTDPanel" oncomplete="refreshSalespeopleDashboardChart();"/> </apex:outputPanel> <script type="text/javascript"> function refreshSalespeopleDashboardChart(){ // Your JS function.... } </script>
方案二的基本代码结构（轻commandLink，重actionFunction）
<apex:outputPanel id="SalespeopleReportMTDPanel"> <apex:commandLink onclick="CallActionFunction();">Show All</apex:commandLink> <apex:actionFunction name="rerenderSalespeopleReportMTDPanel" action="{!LoadAllSalespeople}" rerender="SalespeopleReportMTDPanel" oncomplete="refreshSalespeopleDashboardChart();"/> <apex:param value="All" name=""/> <apex:param value="MTD" name=""/> </apex:actionFunction> </apex:outputPanel> <script type="text/javascript"> function CallActionFunction(){ rerenderSalespeopleReportMTDPanel('topType', 'timeType'); // these two parameters can get automatically by js } function refreshSalespeopleDashboardChart(){ // Your JS function.... } </script>
进一步引申：
我们发现可以完全用其他控件来代替commandLink的触发器作用，来调用actionFunction所指定的后台方法，具体的代码结构如下所示：
<apex:outputPanel id="SalespeopleReportMTDPanel"> <input type="button" value="Show All" title="ShowAll" name="ShowAll" onclick="CallActionFunction();"/> <apex:actionFunction name="rerenderSalespeopleReportMTDPanel" action="{!LoadAllSalespeople}" rerender="SalespeopleReportMTDPanel" oncomplete="refreshSalespeopleDashboardChart();"/> <apex:param value="All" name=""/> <apex:param value="MTD" name=""/> </apex:actionFunction> </apex:outputPanel> <script type="text/javascript"> function CallActionFunction(){ // other custom logic rerenderSalespeopleReportMTDPanel('topType', 'timeType'); // these two parameters can get automatically by js } function refreshSalespeopleDashboardChart(){ // Your JS function.... } </script>
这里附上另一种Ajax回调的方式，请看这个链接：http://www.cnblogs.com/mingmingruyuedlut/p/3385532.html
