闪电组件： 我有一个组件，它使用分页在每个页面上显示多达50条记录的帐户列表，并且我正在对帐户记录进行内联编辑以一次保存记录。我有一个显示联系人操作按钮，因此 当我单击“显示联系人”操作按钮时，它必须根据帐户ID返回该特定帐户记录的联系人列表，但不会返回原因？
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" controller="AccountList1Controller">
<aura:attribute name="data" type="Object"/>
<aura:attribute name="columns" type="List"/>
<aura:attribute name="pageNumber" type="Integer" default="1"/>
<aura:attribute name="pageSize" type="Integer" default="50"/>
<aura:attribute name="isLastPage" type="Boolean" default="false"/>
<aura:attribute name="dataSize" type="Integer" default="0"/>
<aura:attribute name="recordId" type="String"/>
<!-- This attribute will hold the update records from data table-->
<aura:attribute name="updatedRecord" type="Object[]" />
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
<div class="slds-m-around_xx-large">
<div class="slds-clearfix">
<div class="slds-page-header" role="banner">
<p class="slds-page-header__title">Accounts</p>
</div>
</div>
<lightning:card title="Account Editable Datatable">
<lightning:datatable aura:id = "accDT"
columns = "{!v.columns}"
maxRowSelection="{!v.maxRowSelection}"
data = "{!v.data}"
keyField = "Id"
selectedRows = "{!v.selectedRowList}"
onsave ="{!c.onSave}"
onrowaction="{!c.handleRowAction}"
hideCheckboxColumn="true"/>
</lightning:card>
<div class="slds-clearfix">
<div class="slds-page-header" role="banner">
<div class="slds-float_right">
<lightning:button label="Prev" iconName="utility:chevronleft" iconPosition="left"
onclick="{!c.handlePrev}" disabled="{! v.pageNumber == 1}"/>
<lightning:button label="Next" iconName="utility:chevronright" iconPosition="right"
disabled="{! v.isLastPage}" onclick="{!c.handleNext}"/>
</div>
<p class="slds-page-header__title">Page {!v.pageNumber} | Showing records from {! ((v.pageNumber-1)*v.pageSize)+' to '+((v.pageNumber-1)*v.pageSize+v.dataSize)}</p>
</div>
</div>
</div>
Controller.js
({
doInit : function(component, event, helper) {
helper.getColumnAndAction(component);
helper.getAccounts(component, helper);
},
/*
* This function is calling saveDataTable helper function
* to save modified records
* */
onSave : function (component, event, helper) {
// debugger;
helper.saveDataTable(component, event,helper);
},
handleNext : function(component, event, helper) {
var pageNumber = component.get("v.pageNumber");
component.set("v.pageNumber", pageNumber+1);
helper.getAccounts(component, helper);
},
handlePrev : function(component, event, helper) {
var pageNumber = component.get("v.pageNumber");
component.set("v.pageNumber", pageNumber-1);
helper.getAccounts(component, helper);
},
handleRowAction: function (component, event, helper) {
var action = event.getParam('action');
switch (action.name) {
case 'edit':
helper.editRecord(component, event);
break;
case 'Show Contacts':
helper.showPopup(component, event);
break;
}
}
})
Helper.js
({
getColumnAndAction : function(component) {
var actions = [
{label: 'Edit', name: 'edit'},
{label: 'Show Contacts', title: 'Show Contacts' ,
variant:"brand" ,onclick:"{!c.openModel}" }
];
component.set('v.columns', [
{label: 'Name', fieldName: 'Name', editable:'true', type: 'text'},
{label: 'Billing Address', fieldName: 'BillingCity',editable:'true', type: 'text'},
{type: 'action', typeAttributes: { rowActions: actions } }
]);
},
getAccounts : function(component, helper) {
var action = component.get("c.getAccounts");
var pageSize = component.get("v.pageSize").toString();
var pageNumber = component.get("v.pageNumber").toString();
action.setParams({
'pageSize' : pageSize,
'pageNumber' : pageNumber
});
action.setCallback(this,function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var resultData = response.getReturnValue();
if(resultData.length < component.get("v.pageSize")){
component.set("v.isLastPage", true);
} else{
component.set("v.isLastPage", false);
}
component.set("v.dataSize", resultData.length);
component.set("v.data", resultData);
}
});
$A.enqueueAction(action);
},
/*
* This function get called when user clicks on Save button
* user can get all modified records
* and pass them back to server side controller
* */
saveDataTable : function(component, event, helper) {
// debugger;
var editedRecords = component.find("accDT").get("v.draftValues");
// var editedRecords = component.get("v.data");
var totalRecordEdited = editedRecords.length;
var action = component.get("c.updateAccounts");
console.log("action",editedRecords);
action.setParams({
'editedAccountList' : editedRecords
});
console.log("totalRecordEdited" ,totalRecordEdited);
action.setCallback(this,function(response) {
var state = response.getState();
if (state === "SUCCESS") {
//if update is successful
if(response.getReturnValue() === true){
helper.showToast({
"title": "Record Update",
"type": "success",
"message": totalRecordEdited+" Account Records Updated"
});
helper.reloadDataTable();
} else{ //if update got failed
helper.showToast({
"title": "Error!!",
"type": "error",
"message": "Error in update"
});
}
}
});
$A.enqueueAction(action);
},
/*
* Show toast with provided params
* */
showToast : function(params){
var toastEvent = $A.get("e.force:showToast");
if(toastEvent){
toastEvent.setParams(params);
toastEvent.fire();
} else{
alert(params.message);
}
},
/*
* reload data table
* */
reloadDataTable : function(){
var refreshEvent = $A.get("e.force:refreshView");
if(refreshEvent){
refreshEvent.fire();
}
},
editRecord : function(component, event) {
var row = event.getParam('row');
var recordId = row.Id;
var editRecordEvent = $A.get("e.force:editRecord");
editRecordEvent.setParams({
"recordId": recordId
});
editRecordEvent.fire();
},
gotoList : function (component, event, helper) {
var row = event.getParam('row');
var recordId = row.Id;
var action = component.get("c.contactList");
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS") {
var listviews = response.getReturnValue();
// var navEvent = $A.get("e.force:navigateToList");
// navEvent.setParams({
// "listViewId": listviews.Id,
//// "listViewName": null,/
// "scope": "Contact"
// });
// navEvent.fire();
}
});
$A.enqueueAction(action);
},
showPopup : function(component, event, helper){
var cmpTarget = component.find('Modalbox');
var cmpBack = component.find('Modalbackdrop');
$A.util.addClass(cmpTarget, 'slds-fade-in-open');
$A.util.addClass(cmpBack, 'slds-backdrop--open');
var rowRecord = event.getSource().get('v.value');
console.log('rowRecord--->>> ' + JSON.stringify(rowRecord));
//component.set('v.accdata',rowRecord);
var action = component.get('c.fetchCon');
action.setParams({rid : rowRecord.Id});
action.setCallback(this, function(response){
var state = response.getState();
if(state === "SUCCESS"){
var allValues = response.getReturnValue();
console.log("allValues--->>> " + allValues);
component.set('v.mydata1', allValues);
}
else if(state === "ERROR") {
var errors = response.getError();
if(errors){
if(errors[0] && errors[0].message){
console.log("Error Message: " + errors[0].message);
}
}
else{
console.log("Unknown Error");
}
}
});
$A.enqueueAction(action);
}
})
顶点代码：
public class AccountList1Controller {
//Get Account Records
@AuraEnabled
public static List<Account> getAccounts(String pageSize, String pageNumber){
Integer psize = Integer.valueOf(pageSize);
Integer pnumber = Integer.valueOf(pageNumber)-1;
List<Account> accList = [SELECT Id, Name, BillingCity
FROM Account LIMIT :Integer.valueOf(psize)
OFFSET :(psize*pnumber)];
return accList;
}
@AuraEnabled
public static boolean updateAccounts(List<Account> editedAccountList){
try{
update editedAccountList;
return true;
} catch(Exception e){
return false;
}
}
//Delete Account
@AuraEnabled
public static void deleteAccount(Account acc){
Delete acc;
}
@AuraEnabled
public static List<Contact> fetchCon(String rid){
return [SELECT Id, Name, Phone FROM Contact WHERE accountId=:rid];
}
}