Salesforce 0 Basics (iii) Simple data additions and Deletions page construction (Ajax style)

Visualforce encapsulates a lot of tags for page design

The following is a single table for data deletion and modification. Table is shown in structure 1. You can see from the diagram that the goods table itself defines the parameters mainly include the following:

Goodsname__c,goodstype__c,goodsbrand__c,goodsdescribe__c,goodsprice__c.

Figure 1

VF Each page is the beginning </apex:page> end of the <apex:page> tag, and each VF page has a controller to control its business logic. The main controls used in this example include the following:

<apex:inputText>: Input box, similar to <input type= "text" in HTML/>, the value type of the binding can be any type;

<apex:inputFile>: Input box, similar to HTML <input type= "text"/>, the difference between the value type must be the Sobject type;

<apex:commandButton>: button, similar to <input type= "button"/>;

<apex:selectList>: drop-down box, similar to the <select>; in HTML

<apex:selectOptions>: drop down box element, similar to the <option>; in HTML

<apex:pageBlockTable>: Table element, similar to table in HTML. Usage is similar to JSTL, you can specify the Items property binding list, and the var attribute to specify variables;

<apex:column>: A column element of a table that displays the values of each column in the table;

<apex:commandLink>: links, similar to the <a> tags in html;

<apex:param>: Parameter passing, used to pass parameters to controller layer, passing parameters through key value pairs;

<apex:form>: Form elements, similar to form forms in HTML.

The value in the background can be used in the foreground by {!object} form (is not like an El expression) to get the variables of the background object.

eg: background declaration integer i = 1; The foreground can get the value of I by {!i}.

If you want to get the variable of the system, such as want to get the id attribute of a current element, you can pass {! $Compontent. Currentelementid}

In the <apex:commandLink> or <apex:commandButton> tag binding event, the action binding is in the format {!function}

Eg: when the action of the <apex:commandButton> tag is {!query}, the controller layer's query method is called when the button is clicked.

Note: OK, the following is the code section and the displayed style, through the Add button can be added a row of data, enter the content and click Save to save the data, above the search area. If you need to insert more than one piece of data at a time, you can manipulate the Add button several times, each of which executes the save operation.

The VF page code is as follows

1 <apex:page controller= "Goodscontroller" showheader= "false" > 2 <!--<script> 3function query123 (goodsname) {4 5 var goodsname =document.getElementById (goodsname). value; 6 Console.log (' Goodsname: ' +goodsname); 7Visualforce.remoting.Manager.invokeAction (8 ' {! $RemoteAction. Goodscontroller.queryforname} ',   9Goodsname,10function (result, event) {Console.log (' AAA ')); 12if(Event.status) {//Get DOM IDs for HTML and visualforce elements like this13}Else if(Event.type = = = ' Exception ')) {  14}Else {  15                     }  16                 },  + Escape:false}  18             ); 19         }  </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:selec                     TList multiselect= "false" size= "1" value= "{!goodstype}" label= Goodstype: "> 29 <apex:selectoptions value= "{!typenames}" > </apex:selectOptions> 31 &                     Lt;/apex:selectlist> <apex:inputtext value= "{!goodspricestart}" tabindex= "3" 33                     Label= "Goodspricestart"/> <apex:inputtext value= "{!goodspriceend}" tabindex= "5" 35                     Label= "Goodspriceend"/> <apex:inputtext value= "{!goodsdescribe}" tabindex= "1" 37 Label= "GoOdsdescribe "/> <apex:commandbutton value=" Query "action=" {!query} "/> </apex:pageBlockSection> <apex:pageblocksection <!--title= "Quer                 Y goods by Name Via JS "> <apex:inputtext label=" goodsname "id=" goodsName1 "/> 44 <apex:commandbutton value= "Query" onclick= "query123 (' {! $Component. goodsName1} ')" Styleclass= " Centerstyle "/> </apex:pageBlockSection> <apex:pageblockt Able 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} "/> 54             </apex:column> <apex:column headervalue= "Goodstype" > &L T;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}" > &lt ; Apex:param name= "Goodsid" value= "{!goods.             Id} "></apex:param> </apex:commandLink> 66 </apex:column>  </apex:pageBlockTable> <apex:pageblocktable <!--value= "{!goodslist}"           var= "goods" rendered= "{!goodslist = = NULL | | goods = NULL}" > <apex:column colspan= "7" > 70          <apex:outputtext value= "no Records"/> </apex:column> </apex:pag Eblocktable>--<apex:pageblocksection > <apex:commandbu             Tton value= "Add" action= "{!add}"/> <apex:commandbutton value= "Save" action= "{!save}"/> 77     </apex:pageBlockSection> <apex:pagemessages/> </apex:pageBlock> 80 </apex:form> Bayi </apex:page>

In the VF code, the contents of the comments are through JS and Ajax request backstage, the background method has been omitted, in the form of

@RemoteAction tags are necessary to declare this method for JS and background interaction . Using this tag the method must be of type static.

The controller layer code is as follows

1 PublicWith sharingclassGoodscontroller {2 3 PublicList<goods__c>Goodslist{get;set;} 4 5 PublicList<selectoption> goodstypes =NewList<selectoption>(); 6 7 8 9 Publicgoods__c Goods{get;set;}10 11 PublicBoolean Isstatus{get;set;}12 13 PublicString Goodsname{get;set;}14 15 PublicString Goodstype{get;set;}16 17 PublicDecimal Goodspricestart{get;set;}18 19 PublicDecimal Goodspriceend{get;set;}20 21 PublicString Goodsdescribe{get;set;} 22 23 24 25 PublicGoodscontroller () {Goodslist =NewList<goods__c>(); 27RefreshData ();28        } 29 30 31) 32 33 PublicList<selectoption>Gettypenames () {34goodstypes.clear ();Goodstypes.add (NewSelectoption (' cell phone ', ' cell phone '))); 36returngoodstypes;37        } 38 39 40//Refresh Data Action41 Public voidRefreshData () {Isstatus Boolean =true; goodsquerystring String = ' SELECT goodsbrand__c, ' + goodsdescribe ' __c,goodsname__c, Goodstype__c, Goodsprice__c, ' + ' Id from Goods__c where Isdel eted = False Limit 100 '; Goodslist =database.query (goodsquerystring);47        } 48 49 Public voidSave () {50Try { 51Upsert goodslist;52}Catch(dmlexception e) {53apexpages.addmessages (e);54            } 55        } 56 57 Public voidDeletegoods () {Apexpages.currentpage id = (). GetParameters (). Get (' Goodsid '); 59database.delete (ID);60RefreshData ();61        } 62 63 Public voidAdd () {64if(Goodslist = =NULL) { Goodslist =NewList<goods__c>(); 66            } Goods__c GOODS2 =NewGoods__c ();System.debug ('-----------goodslist------------------' +goodslist); 69if(goodslist.size () = = 0) { 70Goodslist.add (GOODS2);71}Else { Goodslist.add (0, GOODS2); 73            } 74        } 75 76 Public voidquery () {Goodssql String = ' SELECT goodsbrand__c, ' + Goodsdescribe__c,goodsname__c ', Goodstype__c, Goodsprice__c, ' + + ' Id from Goods__c where IsDeleted = False '; 80if(Goodsname.length () >0) { Bayi goodsname = '% ' + goodsname + '% '; Goodssql + = ' and Goodsname__c like:goodsname '; 83            } 84if(Goodstype.length () > 0) { Goodstype = '% ' + goodstype + '% '; Goodssql + = ' and Goodstype__c like:goodstype '; 87            } 88if(Goodsdescribe.length () > 0) { Goodsdescribe = '% ' + goodsdescribe + '% '; Goodssql + = ' and Goodsdescribe__c like:goodsdescribe '; 91            } 92 93if(String.valueof (Goodspricestart). Length () >0) { 94 Goodssql + = ' and Goodsprice__c >=: Goodspricestart '; 95            } 96if(String.valueof (goodspriceend). Length () >0) { Goodssql + = ' and Goodsprice__c <=: Goodspriceend '; 98            } © goodssql + = ' Limit 100 ';Goodslist =database.query (goodssql);101 Goodsname = goodsname.remove ('% ');102 Goodsdescribe = goodsdescribe.remove ('% ');103 Goodstype = goodstype.remove ('% ');104        }105}

58 Row ID id = apexpages.currentpage (). GetParameters (). Get (' Goodsid '); Explain:

Apexpages is the control class for the VF page, which means to get the parameter of the current page in the key to Goodsid in the page through <apex:param> encapsulation.

Salesforce 0 Basics (iii) Simple data additions and Deletions page construction (Ajax style)