salesforce 零基礎開發入門學習（六）簡單的數據增刪改查頁面的構建

VisualForce封裝了很多的標簽用來進行頁面設計，本篇主要講述簡單的頁面增刪改查。使用的內容和設計到前台頁面使用的標簽相對簡單，如果需要深入了解VF相關知識以及標簽，

可以通過以下鏈接查看或下載：

https://resources.docs.salesforce.com/200/latest/en-us/sfdc/pdf/salesforce_pages_developers_guide.pdf

下面以一個單一的表進行數據增刪改查。表結構如圖1所示。通過圖可以看出GOODS表自己定義的參數主要包括以下：

GoodsName__c,GoodsType__c,GoodsBrand__c,GoodsDescribe__c,GoodsPrice__c。

 

                       圖1

因為salesforce對於DML操作以及查詢是十分吝嗇的，所以對於DML操作能一條查詢搞定的最好別使用兩條，除非數據查詢需要，比如必要的觸發器等等。

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操作。

注：本篇中只是采用最簡單的方式來實現頁面顯示數據表的增刪改查，沒有使用到類似js,ajax等。實際工作中經常會用到這些，具體例子以后詳細說明。如果需要學習相關知識，請查看官方文檔或上方PDF鏈接。

Controller層代碼如下

public with sharing class GoodsController {
       
       public List<GOODS__c> goodsList{get;set;}
       
       public List<SelectOption> goodsTypes = new List<SelectOption>();
       
   
       
       public GOODS__c goods{get;set;}
       
       public Boolean isStatus{get;set;}
       
       public String goodsName{get;set;}
       
       public String goodsType{get;set;}
       
       public Decimal goodsPriceStart{get;set;}
    
       public Decimal goodsPriceEnd{get;set;}
    
       public String goodsDescribe{get;set;}  
    
         
       
       public GoodsController() {
           goodsList = new List<GOODS__c>();
           refreshData();
       }
       
       
       
       
       public List<selectOption> getTypeNames() {
           goodsTypes.clear();
        goodsTypes.add(new SelectOption('手機','手機'));
           return goodsTypes;
       }
       
       
       //刷新數據作用
       public void refreshData() {
           Boolean isStatus = true;
           String goodsQueryString = 'SELECT   GoodsBrand__c,'+
                                      'GoodsDescribe__c,GoodsName__c, GoodsType__c, GoodsPrice__c,'+
                                       '  Id FROM Goods__c where IsDeleted = false limit 100';
           goodsList = Database.query(goodsQueryString);
       }
       
       public void save() {
           try {
               upsert goodsList;
           } catch(DmlException e) {
               ApexPages.addMessages(e);
           }
       }
       
       public void deleteGoods() {
           Id id = ApexPages.currentPage().getParameters().get('goodsId');
           Database.delete(id);
           refreshData();
       }
       
       public void add() {
           if(goodsList == null) {
               goodsList = new List<GOODS__c>();
           }
           GOODS__c goods2 = new GOODS__c();
           System.debug('-----------goodsList------------------'+goodsList);
           if(goodsList.size() == 0) {
               goodsList.add(goods2);
           } else {
               goodsList.add(0,goods2);
           }
       }
       
       public void query() {
           String goodsSql = 'SELECT GoodsBrand__c,'+
                              'GoodsDescribe__c,GoodsName__c , GoodsType__c, GoodsPrice__c,'+
                               ' Id FROM GOODS__c where IsDeleted = false ';
           if(goodsName.length() >0) {
               goodsName = '%' + goodsName + '%';
               goodsSql += ' and GoodsName__c like :goodsName ';
           }
           if(goodsType.length() > 0) {
               goodsType = '%' + goodsType + '%';
               goodsSql += ' and GoodsType__c like :goodsType';
           }
           if(goodsDescribe.length() > 0) {
               goodsDescribe = '%' + goodsDescribe + '%';
               goodsSql += ' and GoodsDescribe__c like :goodsDescribe';
           }
           
           if(String.valueOf(goodsPriceStart).length()>0) {
               goodsSql += ' and GoodsPrice__c >= :goodsPriceStart';
           }
           if(String.valueOf(goodsPriceEnd).length()>0) {
               goodsSql += ' and GoodsPrice__c <= :goodsPriceEnd';
           }
           goodsSql += ' limit 100';
           goodsList = Database.query(goodsSql);
           goodsName = goodsName.remove('%');
           goodsDescribe = goodsDescribe.remove('%');
           goodsType = goodsType.remove('%');
       }
105}

58行中Id id = ApexPages.currentPage().getParameters().get('goodsId');解釋一下：

ApexPages為VF頁面的控制類，此句的意思為獲取當前頁面的Parameter中key為goodsId的value，goodsId在頁面中通過<apex:param>封裝。

VF頁面代碼如下：

<apex:page controller="GoodsController" showHeader="false">
    <!-- <script>
        function query123(goodsName) {
            
            var goodsName = document.getElementById(goodsName).value; 
            console.log('goodsName:'+goodsName);
            Visualforce.remoting.Manager.invokeAction( 
                '{!$RemoteAction.GoodsController.queryForName}', 
                goodsName, 
                function(result, event){ 
                    console.log('aaa');
                    if (event.status) { // Get DOM IDs for HTML and Visualforce elements like this 
                    } else if (event.type === 'exception') { 
                    } else { 
                    } 
                }, 
                {escape: false} 
            );  
        } 
    </script>-->
    <apex:messages />
    <apex:form >
        <apex:pageBlock title="GOODS">
            <apex:pageBlockSection title="query goods">
                <apex:inputText value="{!goodsName}" tabIndex="4" label="goodsName"
                    id="goodsName" />
                <apex:selectList multiselect="false" size="1" value="{!goodsType}"
                    label="goodsType:">
                    <apex:selectOptions value="{!typeNames}">
                    </apex:selectOptions>
                </apex:selectList>
                <apex:inputText value="{!goodsPriceStart}" tabIndex="3"
                    label="goodsPriceStart" />
                <apex:inputText value="{!goodsPriceEnd}" tabIndex="5"
                    label="goodsPriceEnd" />
                <apex:inputText value="{!goodsDescribe}" tabIndex="1"
                    label="goodsDescribe" />
                <apex:commandButton value="query" action="{!query}"
                    />
            </apex:pageBlockSection>
            
            <!-- <apex:pageBlockSection title="query goods By Name Via JS">
                <apex:inputText label="goodsName" id="goodsName1" />
                <apex:commandButton value="query" onclick="query123('{!$Component.goodsName1}')"
                    styleClass="centerStyle" />
            </apex:pageBlockSection> -->
            
            <apex:pageBlockTable value="{!goodsList}" var="goods" id="resultGoods">
                <apex:column headervalue="goodsName">
                    <apex:inputField value="{!goods.GoodsName__c}"/>
                </apex:column>
                <apex:column headervalue="goodsPrice">
                    <apex:inputField value="{!goods.GoodsPrice__c}" />
                </apex:column>
                <apex:column headervalue="goodsType">
                    <apex:inputField value="{!goods.GoodsType__c}" />
                </apex:column>
                <apex:column headervalue="goodsDescribe">
                    <apex:inputField value="{!goods.GoodsDescribe__c}" />
                </apex:column>
                <apex:column headervalue="delete?">
                    <apex:commandLink value="delete" action="{!deleteGoods}">
                        <apex:param name="goodsId" value="{!goods.Id}"></apex:param>
                    </apex:commandLink>
                </apex:column>
            </apex:pageBlockTable>
            
            <!-- <apex:pageBlockTable value="{!goodsList}" var="goods" rendered="{!goodsList == null || goods == null}">
                <apex:column colspan="7">
                    <apex:outputText value="no records"/>
                </apex:column>
            </apex:pageBlockTable> -->
            
            <apex:pageBlockSection >
                <apex:commandButton value="add" action="{!add}" />
                <apex:commandButton value="save" action="{!save}" />
            </apex:pageBlockSection>
            <apex:pageMessages />
        </apex:pageBlock>
    </apex:form>
</apex:page>

其中，VF代碼中注釋的內容為通過js和ajax請求后台，后台方法已省略，格式為

@RemoteAction

public static List<GOODS__c> queryForName(String goodsName) {

}

@RemoteAction標簽是必不可少的，聲明此方法用於js和后台交互。使用此標簽則方法必須是static類型。

其中返回類型可以為任意類型或者void類型，有興趣的童鞋可以自行完善。

本篇中涵蓋的知識點並不多，包括頁面的基本標簽內容，如何與后台交互，如果通過inputField綁定sObject的屬性實現數據的簡潔操作。

本篇內容如果有錯誤的地方請多多指教，也希望內容可以幫助初學者。下一篇將描述一下VF中數據分頁相關知識。