Salesforce Lightning开发学习（三）Component表单初解

初步了解了Lightning的组件开发流程后，我们来认识下lightning的表单

点击对象管理器，选择对象：电影(Movie__c)，创建字段

标签	API	数据类型
票价	Number__c	数字(16,2)
是否上映	Flag__c	复选框

 

 

 

关于对象电影的相关内容及相关组件请参考之前的博客内容：http://www.cnblogs.com/luqinghua/p/8979893.html

1.创建组件：MyTest_CreateMovie

 1 
 2     
 3      4                     default="{'sobjectType':'Movie__c',
 5                              'Name':'',
 6                              'Director__c':'',
 7                              'ToStar__c':'',
 8                              'ShowTime__c':'',
 9                              'Number__c':0,
10                              'Flag__c':false}"/>    
11     
12      class="slds-page-header slds-page-header--object-home">
13         
14             
15         
16         
17             
class="page-section page-header">
18                 
class="slds-text-heading--label">电影
19                 
class="slds-text-heading--medium">新电影
20             
21         
22     
23     
24     
25         
26             

27                 
class="slds-box slds-theme--default slds-container--small">
28                     
class="slds-text-heading--small slds-p-vertical--medium">
29                         新建电影
30                     
31                     
class="slds-form--stacked">
32                         33                                          name="movieName"
34                                          value="{!v.movie.Name}"
35                                          required="true"/>                        
36                         37                                          name="movieDirector"
38                                          value="{!v.movie.Director__c}"
39                                          placeholder="请输入导演名称"/>
40                          41                                          name="movieToStar"
42                                          value="{!v.movie.ToStar__c}"
43                                          placeholder="请输入主演名称"/>       
44                         45                                          name="movieNumber"
46                                          formatter="currency"
47                                          min="1"
48                                          step="0.5"
49                                          value="{!v.movie.Number__c}"
50                                          messageWhenRangeUnderflow="票价最低1元"/>                        
51                         52                                          name="movieShowTime"
53                                          value="{!v.movie.ShowTime__c}"/>                        
54                         55                                          name="movieFlag"
56                                          checked="{!v.movie.Flag__c}"/>
57                         58                                           class="slds-m-top--medium"
59                                           variant="brand"
60                                           οnclick="{!c.AddToList}"/>
61                     
62                 
63             
           
64         
65     
66 

将该组件放在 My_Test.app中并预览

可以看到如上图所示的一个表单，包含了常用的复选框，日期，数字，文本等类型，然后是完成后面的创建方法

2.补充MyTest_CreateMovieController.js

 1 ({
 2     AddToList : function(component, event, helper) {
 3         //系统提供的校验错误信息的标准方法可校验必填项以及最小值等等
 4         var validExpense = component.find('MovieForm').reduce(function (validSoFar, inputCmp) {
 5             // 显示填写错误的字段消息
 6             inputCmp.showHelpMessageIfInvalid();
 7             return validSoFar && inputCmp.get('v.validity').valid;
 8         }, true);
 9          // 通过字段校验后继续创建的逻辑
10         if(validExpense){
11             // 创建一条记录
12             var movie = component.get("v.movie");
13             console.log("传入的电影信息: " + JSON.stringify(movie));
14             helper.createMovie(component, movie);
15             //将表单重置
16              component.set("v.movie",{'sobjectType':'Movie__c',
17                              'Name':'',
18                              'Director__c':'',
19                              'ToStar__c':'',
20                              'ShowTime__c':'',
21                              'Number__c':0,
22                              'Flag__c':false});
23         }
24     }
25 })

在MyTest_CreateMovieController.js中完成对表单数据的基本校验，比如表单的必填项，以及设置的票价不小于1元等等

3.补充MyTest_CreateMovieHelper.js

({
    createMovie : function(component, movie) {
        //调用Apex类中的方法
        var action = component.get("c.saveMovie");
        //传递参数
        action.setParams({
            "movie": movie
        });
        //方法调用
        action.setCallback(this, function(response){
            //方法调用状态
            var state = response.getState();
            if (state === "SUCCESS") {
                var movieList = component.get("v.movieList");
                movieList.push(response.getReturnValue());
                component.set("v.movieList", movie);
            }
        });
        var movie = component.get("v.movie");        
        $A.enqueueAction(action);
    }
})

MyTest_CreateMovieHelper.js中主要是与后台APEX控制类中的方法进行交互，将数据存入数据库中保存起来

4.更新MyTestMovieController类，在其中加入saveMovie方法

 1 /*********
 2      *  Author:ricardo
 3      *  Time:2018-03-21
 4      *  Function:MyTest_Movie 后台控制类
 5      *  Test:
 6      */
 7 public class MyTestMovieController{
 8     //初始化
 9     @AuraEnabled
10     public static List GetAll(){
11         List movieList = new List();
12         movieList = [select ShowTime__c,ToStar__c,Theme__c,Director__c,Name from Movie__c limit 50];
13         return movieList;
14     }
15     //创建记录
16     @AuraEnabled
17     public static Movie__c saveMovie(Movie__c movie) {
18         // Perform isUpdatable() checking first, then
19         upsert movie;
20         return movie;
21     }
22 }

综上所示，一个简单的创建电影条目的表单就完成了，打开组件MyTest_Movie就能看到我们新创建的电影记录位列其中，如有遗漏欢迎指正，有问题可在评论区留言

 

转载于:https://www.cnblogs.com/luqinghua/p/9072970.html