首页 > 代码库 > Salesforce零基础（三）简单的数据增删改查页面的构建(Ajax样式)
Salesforce零基础（三）简单的数据增删改查页面的构建(Ajax样式)
VisualForce封装了很多的标签用来进行页面设计
下面以一个单一的表进行数据增删改查。表结构如图1所示。通过图可以看出GOODS表自己定义的参数主要包括以下：
GoodsName__c,GoodsType__c,GoodsBrand__c,GoodsDescribe__c,GoodsPrice__c。
图1
VF每个页面都是以<apex:page>标签起始</apex:page>结束，每个VF页面都有一个Controller用来控制其业务逻辑。本篇例子中主要用到的控件包括如下：
<apex:inputText>：输入框,类似于HTML中的<input type="text"/>,绑定的value类型可以为任意类型;
<apex:inputFile>：输入框,类似于HTML中的<input type="text"/>,区别上者为value类型必须是sObject类型;
<apex:commandButton>：按钮，类似于<input type="button"/>;
<apex:selectList>：下拉框，类似于html中的<select>;
<apex:selectOptions>:下拉框下元素，类似于html中的<option>;
<apex:pageBlockTable>:表格元素，类似于html中的table。用法与jstl类似，可以指定items属性绑定列表,var属性指定变量;
<apex:column>:表格的列元素，用于显示表格每一列的值;
<apex:commandLink>:链接，类似于html中的<a>标签;
<apex:param>:参数传递使用，用于给Controller层传递参数，传递的参数通过键值对传递;
<apex:form>:表单元素，类似于html中的form表单。
后台的值在前台可以通过{!object}形式（是不是类似EL表达式）来获取后台object的变量。
eg：后台声明Integer i = 1; 前台通过{!i}便可以获取到i的值。
如果想要获取系统的变量，比如想要获取某个当前元素的ID属性，则可以通过{!$Compontent.currentElementId}
在<apex:commandLink>或者<apex:commandButton>标签绑定事件时，action绑定的格式为{!function}
eg:在<apex:commandButton>标签绑定的action为{!query},则当点击按钮后，会调用Controller层的query方法。
注释: OK，以下为代码部分以及显示的样式，通过add按钮可以添加一行数据，输入内容后点击save即可保存数据，上方为搜索区域。如果需要一次性插入多条数据，可以多操作几次add按钮，每个都输入内容后执行save操作。
VF页面代码如下
1 <apex:page controller="GoodsController" showHeader="false"> 2 <!-- <script> 3 function query123(goodsName) { 4 5 var goodsName = document.getElementById(goodsName).value; 6 console.log(‘goodsName:‘+goodsName); 7 Visualforce.remoting.Manager.invokeAction( 8 ‘{!$RemoteAction.GoodsController.queryForName}‘, 9 goodsName, 10 function(result, event){ 11 console.log(‘aaa‘); 12 if (event.status) { // Get DOM IDs for HTML and Visualforce elements like this 13 } else if (event.type === ‘exception‘) { 14 } else { 15 } 16 }, 17 {escape: false} 18 ); 19 } 20 </script>--> 21 <apex:messages /> 22 <apex:form > 23 <apex:pageBlock title="GOODS"> 24 <apex:pageBlockSection title="query goods"> 25 <apex:inputText value="http://www.mamicode.com/{!goodsName}" tabIndex="4" label="goodsName" 26 id="goodsName" /> 27 <apex:selectList multiselect="false" size="1" value="http://www.mamicode.com/{!goodsType}" 28 label="goodsType:"> 29 <apex:selectOptions value="http://www.mamicode.com/{!typeNames}"> 30 </apex:selectOptions> 31 </apex:selectList> 32 <apex:inputText value="http://www.mamicode.com/{!goodsPriceStart}" tabIndex="3" 33 label="goodsPriceStart" /> 34 <apex:inputText value="http://www.mamicode.com/{!goodsPriceEnd}" tabIndex="5" 35 label="goodsPriceEnd" /> 36 <apex:inputText value="http://www.mamicode.com/{!goodsDescribe}" tabIndex="1" 37 label="goodsDescribe" /> 38 <apex:commandButton value="http://www.mamicode.com/query" action="{!query}" 39 /> 40 </apex:pageBlockSection> 41 42 <!-- <apex:pageBlockSection title="query goods By Name Via JS"> 43 <apex:inputText label="goodsName" id="goodsName1" /> 44 <apex:commandButton value="http://www.mamicode.com/query" onclick="query123(‘{!$Component.goodsName1}‘)" 45 styleClass="centerStyle" /> 46 </apex:pageBlockSection> --> 47 48 <apex:pageBlockTable value="http://www.mamicode.com/{!goodsList}" var="goods" id="resultGoods"> 49 <apex:column headervalue="http://www.mamicode.com/goodsName"> 50 <apex:inputField value="http://www.mamicode.com/{!goods.GoodsName__c}"/> 51 </apex:column> 52 <apex:column headervalue="http://www.mamicode.com/goodsPrice"> 53 <apex:inputField value="http://www.mamicode.com/{!goods.GoodsPrice__c}" /> 54 </apex:column> 55 <apex:column headervalue="http://www.mamicode.com/goodsType"> 56 <apex:inputField value="http://www.mamicode.com/{!goods.GoodsType__c}" /> 57 </apex:column> 58 <apex:column headervalue="http://www.mamicode.com/goodsDescribe"> 59 <apex:inputField value="http://www.mamicode.com/{!goods.GoodsDescribe__c}" /> 60 </apex:column> 61 <apex:column headervalue="http://www.mamicode.com/delete?"> 62 <apex:commandLink value="http://www.mamicode.com/delete" action="{!deleteGoods}"> 63 <apex:param name="goodsId" value="http://www.mamicode.com/{!goods.Id}"></apex:param> 64 </apex:commandLink> 65 </apex:column> 66 </apex:pageBlockTable> 67 68 <!-- <apex:pageBlockTable value="http://www.mamicode.com/{!goodsList}" var="goods" rendered="{!goodsList == null || goods == null}"> 69 <apex:column colspan="7"> 70 <apex:outputText value="http://www.mamicode.com/no records"/> 71 </apex:column> 72 </apex:pageBlockTable> --> 73 74 <apex:pageBlockSection > 75 <apex:commandButton value="http://www.mamicode.com/add" action="{!add}" /> 76 <apex:commandButton value="http://www.mamicode.com/save" action="{!save}" /> 77 </apex:pageBlockSection> 78 <apex:pageMessages /> 79 </apex:pageBlock> 80 </apex:form> 81 </apex:page>
其中，VF代码中注释的内容为通过js和ajax请求后台，后台方法已省略，格式为
@RemoteAction标签是必不可少的，声明此方法用于js和后台交互。使用此标签则方法必须是static类型。
Controller层代码如下
1 public with sharing class GoodsController { 2 3 public List<GOODS__c> goodsList{get;set;} 4 5 public List<SelectOption> goodsTypes = new List<SelectOption>(); 6 7 8 9 public GOODS__c goods{get;set;} 10 11 public Boolean isStatus{get;set;} 12 13 public String goodsName{get;set;} 14 15 public String goodsType{get;set;} 16 17 public Decimal goodsPriceStart{get;set;} 18 19 public Decimal goodsPriceEnd{get;set;} 20 21 public String goodsDescribe{get;set;} 22 23 24 25 public GoodsController() { 26 goodsList = new List<GOODS__c>(); 27 refreshData(); 28 } 29 30 31 32 33 public List<selectOption> getTypeNames() { 34 goodsTypes.clear(); 35 goodsTypes.add(new SelectOption(‘手机‘,‘手机‘)); 36 return goodsTypes; 37 } 38 39 40 //刷新数据作用 41 public void refreshData() { 42 Boolean isStatus = true; 43 String goodsQueryString = ‘SELECT GoodsBrand__c,‘+ 44 ‘GoodsDescribe__c,GoodsName__c, GoodsType__c, GoodsPrice__c,‘+ 45 ‘ Id FROM Goods__c where IsDeleted = false limit 100‘; 46 goodsList = Database.query(goodsQueryString); 47 } 48 49 public void save() { 50 try { 51 upsert goodsList; 52 } catch(DmlException e) { 53 ApexPages.addMessages(e); 54 } 55 } 56 57 public void deleteGoods() { 58 Id id = ApexPages.currentPage().getParameters().get(‘goodsId‘); 59 Database.delete(id); 60 refreshData(); 61 } 62 63 public void add() { 64 if(goodsList == null) { 65 goodsList = new List<GOODS__c>(); 66 } 67 GOODS__c goods2 = new GOODS__c(); 68 System.debug(‘-----------goodsList------------------‘+goodsList); 69 if(goodsList.size() == 0) { 70 goodsList.add(goods2); 71 } else { 72 goodsList.add(0,goods2); 73 } 74 } 75 76 public void query() { 77 String goodsSql = ‘SELECT GoodsBrand__c,‘+ 78 ‘GoodsDescribe__c,GoodsName__c , GoodsType__c, GoodsPrice__c,‘+ 79 ‘ Id FROM GOODS__c where IsDeleted = false ‘; 80 if(goodsName.length() >0) { 81 goodsName = ‘%‘ + goodsName + ‘%‘; 82 goodsSql += ‘ and GoodsName__c like :goodsName ‘; 83 } 84 if(goodsType.length() > 0) { 85 goodsType = ‘%‘ + goodsType + ‘%‘; 86 goodsSql += ‘ and GoodsType__c like :goodsType‘; 87 } 88 if(goodsDescribe.length() > 0) { 89 goodsDescribe = ‘%‘ + goodsDescribe + ‘%‘; 90 goodsSql += ‘ and GoodsDescribe__c like :goodsDescribe‘; 91 } 92 93 if(String.valueOf(goodsPriceStart).length()>0) { 94 goodsSql += ‘ and GoodsPrice__c >= :goodsPriceStart‘; 95 } 96 if(String.valueOf(goodsPriceEnd).length()>0) { 97 goodsSql += ‘ and GoodsPrice__c <= :goodsPriceEnd‘; 98 } 99 goodsSql += ‘ limit 100‘; 100 goodsList = Database.query(goodsSql); 101 goodsName = goodsName.remove(‘%‘); 102 goodsDescribe = goodsDescribe.remove(‘%‘); 103 goodsType = goodsType.remove(‘%‘); 104 } 105}
58行中Id id = ApexPages.currentPage().getParameters().get(‘goodsId‘);解释一下：
ApexPages为VF页面的控制类，此句的意思为获取当前页面的Parameter中key为goodsId的value，goodsId在页面中通过<apex:param>封装。
Salesforce零基础（三）简单的数据增删改查页面的构建(Ajax样式)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。