Salesforce Lightning+DataTables +Inner Edit

最新推荐文章于 2024-08-14 09:04:24 发布

weixin_30703911

最新推荐文章于 2024-08-14 09:04:24 发布

阅读量249

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/living-/p/9022578.html

版权

基于Jquery DataTables 与Lightning Component实现表格数据分页,查询,内编辑与删除

Cmp文件

 1 <!--
 2  Author : Hank
 3  Date : 5/2/2018
 4 -->
 5 <aura:component implements="force:appHostable" controller="jQueryDataTableCtrl">
 6     <!--use JQuery Data Table css,Js and jQUERY js file in lightning component by using ltng:require component-->
 7     <ltng:require styles="{! $Resource.DataTables + '/DataTables-1.10.16/media/css/jquery.dataTables.min.css'}" 
 8                   scripts="{!join(',', 
 9                            $Resource.jquery224 , 
10                            $Resource.DataTables + '/DataTables-1.10.16/media/js/jquery.dataTables.min.js')
11                            }" afterScriptsLoaded="{!c.scriptsLoaded}"/>
12     <aura:attribute name="lstOpp" type="List"/>
13     <aura:attribute name="isSpinner" type="Boolean" default="false"/>
14     <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>  
15     <aura:if isTrue="{!v.isSpinner}">
16         <lightning:spinner alternativeText="正在保存"/>
17     </aura:if>
18     <div class="slds-m-around_medium">
19         <table id="tableId" class="slds-table slds-table_bordered slds-table_cell-buffer" cellspacing="0" width="100%">
20             <thead>
21                 <tr>
22                     <th>Name</th>
23                     <th>Type</th>
24                     <th>Stage</th>
25                     <th>Amount</th>
26                     <th>Close Date</th> 
27                     <th>Action</th>
28                 </tr>
29             </thead>
30             <tbody>
31                 <aura:iteration items="{!v.lstOpp}" var="row" indexVar='rowIndex'>
32                     <tr>
33                         <aura:iteration items="{!row}" var="col" indexVar='colIndex'>
34                             <td>
35                                 <aura:if isTrue="{!and(!col.showEditIcon,!col.isEditInput)}"><!--显示锁图标且输出框-->
36                                     <aura:if isTrue="{!if(colIndex==0,true,false)}">
37                                         <a data-id="{!col.oppId}" οnclick="{!c.goToById}">{!col.Name}</a>
38                                     </aura:if>
39                                     <aura:if isTrue="{!and(colIndex!=0,lessthan(colIndex,row.length-1))}">
40                                         {!col.Name}
41                                     </aura:if>
42                                     <aura:if isTrue="{!and(colIndex!=0,colIndex==row.length-1)}">
43                                         <a data-id="{!col.oppId}" οnclick="{!c.deleteData}">{!col.Name}</a>
44                                     </aura:if>
45                                     
46                                     <button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small">
47                                         <c:svgIcon svgPath="{!$Resource.svgIcon + '/utility-sprite/svg/symbols.svg#lock'}" category="utility" class="slds-button__icon slds-button__icon_hint slds-button__icon_lock" size="xx-small"/>
48                                     </button>
49                                 </aura:if>
50                                 
51                                 <aura:if isTrue="{!and(col.showEditIcon,!col.isEditInput)}"><!--显示编辑图标且输出框-->
52                                     {!col.Name}
53                                     <button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" data-row="{!rowIndex}" data-col="{!colIndex}" οnclick="{!c.editButton}">
54                                         <c:svgIcon svgPath="{!$Resource.svgIcon + '/utility-sprite/svg/symbols.svg#edit'}" category="utility" class="slds-button__icon slds-button__icon_hint slds-button__icon_edit" size="xx-small"/>
55                                     </button>
56                                 </aura:if>
57                                 <aura:if isTrue="{!if(col.isEditInput==true,true,false)}"><!--输入框且图标不显示--> 
58                                     <lightning:input type="date" name="{!col.oppId}" title="{!rowIndex+'-'+colIndex}" value='{!col.Name}' οnblur="{!c.saveData}" variant='label-hidden'/>
59                                 </aura:if>
60                                 
61                             </td>
62                         </aura:iteration>
63                     </tr>
64                 </aura:iteration>  
65             </tbody>
66         </table>
67     </div>
68 </aura:component>

ContorllerJs文件

 1 ({
 2     scriptsLoaded : function(component, event, helper) {
 3         console.log('Script loaded..'); 
 4     },
 5     
 6     doInit : function(component,event,helper){
 7         component.set("v.isSpinner",false);  
 8         helper.doInitHelper(component,event);
 9     },
10     
11     //编辑按钮
12     editButton : function(component,event){
13         var row = event.currentTarget.getAttribute('data-row');
14         var col = event.currentTarget.getAttribute('data-col');
15         var lstOppList = component.get('v.lstOpp');
16         var tempList = lstOppList[row];
17         tempList[col].isEditInput = true;
18         component.set('v.lstOpp',lstOppList);
19         
20     },
21     //跳转到详细信息页面
22     goToById : function(component, event){
23         var id = event.currentTarget.getAttribute('data-id');
24         var sObjectEvent = $A.get("e.force:navigateToSObject");
25         sObjectEvent.setParams({
26               "recordId": id,
27               "slideDevName": 'related'
28         });
29         sObjectEvent.fire();
30     },
31     saveData : function(component,event,helper){
32         helper.saveDataHelper(component,event);
33     },
34     deleteData : function(component,event,helper){
35         helper.deleteDataHelper(component,event);
36     }
37 })

HelperJs文件

  1 ({
  2     doInitHelper : function(component,event){
  3         //call apex class method
  4         var action = component.get('c.fetchOpportunity');
  5         action.setCallback(this, function(response) {
  6             //store state of response
  7             var state = response.getState();
  8             if (state === "SUCCESS") {
  9                 //set response value in lstOpp attribute on component.
 10                 component.set('v.lstOpp', response.getReturnValue());
 11                 
 12                 // when response successfully return from server then apply jQuery dataTable after 500 milisecond
 13                 setTimeout(function(){ 
 14                     
 15                     $('#tableId').DataTable({
 16                         "bProcessing" : true,
 17                         "aLengthMenu" : [10,35,60], //更改显示记录数选项  
 18                     });
 19                     // add lightning class to search filter field with some bottom margin..  
 20                     $('div.dataTables_filter input').addClass('slds-input');
 21                     $('div.dataTables_filter input').css("marginBottom", "10px");
 22                     
 23 
 24                     
 25                 }, 500);          
 26             }
 27         });
 28         $A.enqueueAction(action); 
 29     },
 30     
 31     saveDataHelper : function(component,event){
 32         component.set("v.isSpinner",true);
 33         var eve = event.getSource();
 34         //获取当前操作记录的Id
 35         var recordId = eve.get("v.name");
 36         //保存的日期值
 37         var cDate = eve.get("v.value");
 38         var title = eve.get("v.title");
 39         var rowcolList = title.split("-");
 40         console.log('title=>'+title);
 41         var action = component.get("c.saveActionData");
 42         action.setParams({
 43             "cDate":cDate,
 44             "recordId":recordId
 45         });
 46         action.setCallback(this, function (response) {
 47             var state = response.getState();
 48              if (component.isValid() && state === "SUCCESS") {
 49                 var result = response.getReturnValue();
 50                 var lstOppList = component.get('v.lstOpp');
 51                 var tempList = lstOppList[rowcolList[0]];
 52                 tempList[rowcolList[1]].isEditInput = false;
 53                 tempList[rowcolList[1]].showEditIcon = true;
 54                 component.set("v.lstOpp",lstOppList);
 55                 component.set("v.isSpinner",false);//关闭加载框
 56                 if('Success'==result){
 57                     
 58                 }else{
 59                     
 60                 }
 61             }else if(state==="ERROR"){
 62                 var errors = response.getError();
 63                 if (errors) {
 64                 if (errors[0] && errors[0].message) {
 65                   alert(errors[0].message);
 66                 }
 67               }
 68             }
 69         });
 70         $A.enqueueAction(action); 
 71     },
 72     deleteDataHelper : function(component,event) {
 73         var recordId = event.currentTarget.getAttribute('data-id');
 74         var action = component.get("c.deleteActionData");
 75         action.setParams({
 76             "recordId":recordId
 77         });
 78         action.setCallback(this, function (response) {
 79             var state = response.getState();
 80              if (component.isValid() && state === "SUCCESS") {
 81                 var result = response.getReturnValue();
 82                 component.set("v.isSpinner",false);//关闭加载框
 83                 $A.get('e.force:refreshView').fire();
 84                 if('Success'==result){
 85                     
 86                 }else{
 87                     
 88                 }
 89                 
 90             }else if(state==="ERROR"){
 91                 var errors = response.getError();
 92                 if (errors) {
 93                 if (errors[0] && errors[0].message) {
 94                   alert(errors[0].message);
 95                 }
 96               }
 97             }
 98         });
 99         $A.enqueueAction(action); 
100     }
101 })

后台Apex控制类

 1 /*
 2 Author : Hank
 3 Date : 5/2/2018
 4 */
 5 public with sharing class jQueryDataTableCtrl {
 6     @AuraEnabled
 7   public static List<List<objectCol>> fetchOpportunity() {
 8       List<List<objectCol>> resList = new List<List<objectCol>>();
 9       for (Opportunity opp : [SELECT Id,Name,Type,StageName,Amount,CloseDate FROM Opportunity LIMIT 500]){
10           List<objectCol> tempList = new List<objectCol>();
11           for (Integer i=0;i<=5;i++) {
12               
13               objectCol oc = new objectCol();
14               oc.oppId = opp.Id;
15               
16               if (i==0) {
17                   oc.Name = opp.Name;
18                   oc.showEditIcon = false;
19                   oc.isEditInput = false;
20               }else if(i==1){
21                   oc.Name = opp.Type;
22                   oc.showEditIcon = false;
23                   oc.isEditInput = false;
24               }else if (i==2) {
25                   oc.Name = opp.StageName;
26                   oc.showEditIcon = false;
27                   oc.isEditInput = false;
28               }else if (i==3) {
29                   oc.Name = String.valueOf(opp.Amount);
30                   oc.showEditIcon = false;
31                   oc.isEditInput = false;
32               }else if (i==4) {
33                   oc.Name = String.valueOf(opp.CloseDate);
34                   oc.showEditIcon = true;
35                 oc.isEditInput = false;
36               }else if (i==5) {
37           oc.Name = 'Delete';
38           oc.showEditIcon = false;
39           oc.isEditInput = false;
40         }
41               tempList.add(oc);
42 
43           }
44           resList.add(tempList);
45       }
46     Return resList;
47   }
48   @AuraEnabled
49   public static String saveActionData(String cDate,String recordId) {
50     Opportunity opp = new Opportunity();
51     opp.Id = recordId;
52     opp.CloseDate = Date.valueOf(cDate);
53     update opp;
54     return 'Success';
55   }
56   @AuraEnabled
57   public static String deleteActionData(String recordId) {
58     Opportunity opp = new Opportunity();
59     opp.Id = recordId;
60     delete opp;
61     return 'Success';
62   }
63   public class objectCol{
64       @AuraEnabled
65       public String oppId{get;set;}
66       @AuraEnabled
67       public String Name{get;set;}
68       //编辑按钮显示
69       @AuraEnabled
70       public Boolean showEditIcon{get;set;}
71       //编辑框
72       @AuraEnabled
73       public Boolean isEditInput{get;set;}
74   }
75 }

由于不不知道怎么在博客中添加视频，想看实现效果的可以跳转到以下链接

http://v.youku.com/v_show/id_XMzYwMDAwNDkwOA==.html?spm=a2h3j.8428770.3416059.1

组件中引用的静态资源链接

https://datatables.net/releases/DataTables-1.10.16.zip

https://code.jquery.com/jquery-2.2.4.min.js

文章参考链接 http://sfdcmonkey.com/2018/03/13/jquery-datatable-salesforce-lightning-component/

如有错误欢迎纠正

转载于:https://www.cnblogs.com/living-/p/9022578.html

weixin_30703911

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Salesforce Lightning+DataTables +Inner Edit

基于Jquery DataTables 与Lightning Component实现表格数据分页,查询,内编辑与删除Cmp文件 1  5 <aura:component implements="force:appHostable" controll...
复制链接

扫一扫