今天，我们学习如下功能
这是您需要的吗？
- 首先 ， 就是写一个查询是的功能，查询所有的
Account
Apex控制器 ： sendEmail
创建一个 apex class
/**********************************************************************
*
*
*@author:zero
*@createdate:2019-12-10
*@description:批量给客户发送电子邮件
*
*
*************************************************************************/
public class sendEmail {
//查询所有客户
/*@AuraEnabled
public static List<Account> GetAll(){
List<Account> acc = new List<Account>();
acc = [SELECT Name,Company_Address__c,CompanyEmail__c from Account];
return acc;
}*/
@AuraEnabled
public static List<accountListWrapper> fetchAccountWrapper(){
List<accountListWrapper> lstaccountListWrapper = new List<accountListWrapper>();
// query account records and create 'accountListWrapper' class instance for each record.
for(Account acc : [Select id,Name,Type,Company_Address__c
From Account
Limit 1000]){
// by default checkbox should be false
lstaccountListWrapper.add(new accountListWrapper(false,acc));
}
// return the 'lstaccountListWrapper' list
return lstaccountListWrapper;
}
/* 封装类 */
public class accountListWrapper {
@AuraEnabled public boolean isChecked {get;set;}
@AuraEnabled public account objAccount{get;set;}
public accountListWrapper(boolean isChecked, account objAccount){
this.isChecked = isChecked;
this.objAccount = objAccount;
}
}
}
Lightning：QueryCustomer.cmp
- 然后在
New一个cmp
<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="sendEmail">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<!-- aura属性用于存储数据/值 -->
<aura:attribute name="listOfAllAccounts" type="list"/>
<aura:attribute name="PaginationList" type="list"/>
<aura:attribute name="selectedCount" type="integer" default="0"
description="selected Records Count"/>
<aura:attribute name="startPage" type="Integer" />
<aura:attribute name="endPage" type="Integer"/>
<aura:attribute name="totalRecordsCount" type="Integer"/>
<aura:attribute name="pageSize" type="Integer" default="4"
description="number of records to be display on per page"/>
<aura:attribute name="currentPage" type="integer" default="1"/>
<aura:attribute name="totalPagesCount" type="integer"/>
<aura:attribute name="bNoRecordsFound" type="boolean"/>
<aura:if isTrue="{!v.bNoRecordsFound}">
<!--如果没有可用的记录，则显示错误消息 -->
<div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_info" role="alert">
<span class="slds-assistive-text">error</span>
<h2>No record found.</h2>
</div>
<aura:set attribute="else">
<!-- 按钮获取选定的行数据 -->
<div class="slds-clearfix slds-m-around_small">
<div class="slds-clearfix">
<div class="slds-float_right">
<lightning:button variant="destructive"
label="所得记录"
onclick="{! c.getSelectedRecords }"
disabled="{!v.selectedCount == 0}"/>
</div>
</div>
</div>
<div class="slds-clearfix slds-m-around_small">
<div class="slds-clearfix">
<div class="slds-float_right">
<lightning:button variant="destructive"
label="EMP"
onclick="{! c.getSelectedRecords }"
disabled="{!v.selectedCount == 0}"/>
</div>
</div>
</div>
<!-- 显示总记录和所选记录计数-->
<p class="slds-m-around_small">
<span class="slds-badge slds-badge_lightest" style="display:inline-block">
Total Records : {!v.selectedCount > 0 ? v.selectedCount + '/' : ''} {!v.totalRecordsCount}
</span>
</p>
<!-- 数据表查询数据的开始-->
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-title_caps">
<!--header checkbox for select all-->
<th style="width:3.25rem;" class="slds-text-align_right">
<div class="slds-form-element">
<div class="slds-form-element__control">
<label class="slds-checkbox">
<ui:inputCheckbox disabled="{!v.totalRecordsCount == 0}"
aura:id="selectAllId"
change="{!c.selectAllCheckbox}"/>
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label"></span>
</label>
</div>
</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Name">客户</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Phone">联系电话</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Type">公司地址</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.PaginationList}" var="obj">
<tr>
<th scope="row" class="slds-text-align_right" style="width:3.25rem;">
<div class="slds-form-element">
<div class="slds-form-element__control">
<label class="slds-checkbox">
<ui:inputCheckbox text="{!obj.objAccount.Id}"
value="{!obj.isChecked}"
change="{!c.checkboxSelect}"/>
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label text"></span>
</label>
</div>
</div>
</th>
<th scope="row">
<div class="slds-truncate" title="{!obj.objAccount.Name}">
{!obj.objAccount.Name}
</div>
</th>
<th scope="row">
<div class="slds-truncate" title="{!obj.objAccount.Phone}">
<lightning:formattedPhone value="{!obj.objAccount.Phone}"/>
</div>
</th>
<th scope="row">
<div class="slds-truncate" title="{!obj.objAccount.Company_Address__c}">
{!obj.objAccount.Company_Address__c}
</div>
</th>
</tr>
</aura:iteration>
</tbody>
</table>
<!-- End -->
<br/>
<!-- 分页按钮开始 -->
<div class="slds-align_absolute-center">
<lightning:button label="Previous"
disabled="{!v.startPage == 0}"
onclick="{!c.navigation}"
variant="brand"
iconName="utility:back"
name="previous"/>
<span class="slds-badge slds-badge_lightest"
style="margin-right: 10px;margin-left: 10px;">
Page {!v.currentPage} out of {!v.totalPagesCount}
</span>
<lightning:button label="Next"
disabled="{!(v.endPage + 1) >= v.totalRecordsCount}"
onclick="{!c.navigation}"
variant="brand"
iconName="utility:forward"
iconPosition="right"
name="next"/>
</div>
</aura:set>
</aura:if>
</aura:component>
JavaScript控制器：QueryCustomerController.js
({
doInit: function(component, event, helper) {
helper.doInitHelper(component, event);
},
/* javaScript function for pagination */
navigation: function(component, event, helper) {
var sObjectList = component.get("v.listOfAllAccounts");
var end = component.get("v.endPage");
var start = component.get("v.startPage");
var pageSize = component.get("v.pageSize");
var whichBtn = event.getSource().get("v.name");
// check if whichBtn value is 'next' then call 'next' helper method
if (whichBtn == 'next') {
component.set("v.currentPage", component.get("v.currentPage") + 1);
helper.next(component, event, sObjectList, end, start, pageSize);
}
// check if whichBtn value is 'previous' then call 'previous' helper method
else if (whichBtn == 'previous') {
component.set("v.currentPage", component.get("v.currentPage") - 1);
helper.previous(component, event, sObjectList, end, start, pageSize);
}
},
selectAllCheckbox: function(component, event, helper) {
var selectedHeaderCheck = event.getSource().get("v.value");
var updatedAllRecords = [];
var updatedPaginationList = [];
var listOfAllAccounts = component.get("v.listOfAllAccounts");
var PaginationList = component.get("v.PaginationList");
// play a for loop on all records list
for (var i = 0; i < listOfAllAccounts.length; i++) {
// check if header checkbox is 'true' then update all checkbox with true and update selected records count
// else update all records with false and set selectedCount with 0
if (selectedHeaderCheck == true) {
listOfAllAccounts[i].isChecked = true;
component.set("v.selectedCount", listOfAllAccounts.length);
} else {
listOfAllAccounts[i].isChecked = false;
component.set("v.selectedCount", 0);
}
updatedAllRecords.push(listOfAllAccounts[i]);
}
// update the checkbox for 'PaginationList' based on header checbox
for (var i = 0; i < PaginationList.length; i++) {
if (selectedHeaderCheck == true) {
PaginationList[i].isChecked = true;
} else {
PaginationList[i].isChecked = false;
}
updatedPaginationList.push(PaginationList[i]);
}
component.set("v.listOfAllAccounts", updatedAllRecords);
component.set("v.PaginationList", updatedPaginationList);
},
checkboxSelect: function(component, event, helper) {
// on each checkbox selection update the selected record count
var selectedRec = event.getSource().get("v.value");
var getSelectedNumber = component.get("v.selectedCount");
if (selectedRec == true) {
getSelectedNumber++;
} else {
getSelectedNumber--;
component.find("selectAllId").set("v.value", false);
}
component.set("v.selectedCount", getSelectedNumber);
// if all checkboxes are checked then set header checkbox with true
if (getSelectedNumber == component.get("v.totalRecordsCount")) {
component.find("selectAllId").set("v.value", true);
}
},
getSelectedRecords: function(component, event, helper) {
var allRecords = component.get("v.listOfAllAccounts");
var selectedRecords = [];
for (var i = 0; i < allRecords.length; i++) {
if (allRecords[i].isChecked) {
selectedRecords.push(allRecords[i].objAccount);
}
}
alert(JSON.stringify(selectedRecords));
}
})
JavaScript助手：QueryCustomerHelper.js
({
/* doInitHelper funcation to fetch all records, and set attributes value on component load */
doInitHelper : function(component,event){
var action = component.get("c.fetchAccountWrapper");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS"){
var oRes = response.getReturnValue();
if(oRes.length > 0){
component.set('v.listOfAllAccounts', oRes);
var pageSize = component.get("v.pageSize");
var totalRecordsList = oRes;
var totalLength = totalRecordsList.length ;
component.set("v.totalRecordsCount", totalLength);
component.set("v.startPage",0);
component.set("v.endPage",pageSize-1);
var PaginationLst = [];
for(var i=0; i < pageSize; i++){
if(component.get("v.listOfAllAccounts").length > i){
PaginationLst.push(oRes[i]);
}
}
component.set('v.PaginationList', PaginationLst);
component.set("v.selectedCount" , 0);
//use Math.ceil() to Round a number upward to its nearest integer
component.set("v.totalPagesCount", Math.ceil(totalLength / pageSize));
}else{
// if there is no records then display message
component.set("v.bNoRecordsFound" , true);
}
}
else{
alert('Error...');
}
});
$A.enqueueAction(action);
},
// navigate to next pagination record set
next : function(component,event,sObjectList,end,start,pageSize){
var Paginationlist = [];
var counter = 0;
for(var i = end + 1; i < end + pageSize + 1; i++){
if(sObjectList.length > i){
if(component.find("selectAllId").get("v.value")){
Paginationlist.push(sObjectList[i]);
}else{
Paginationlist.push(sObjectList[i]);
}
}
counter ++ ;
}
start = start + counter;
end = end + counter;
component.set("v.startPage",start);
component.set("v.endPage",end);
component.set('v.PaginationList', Paginationlist);
},
// navigate to previous pagination record set
previous : function(component,event,sObjectList,end,start,pageSize){
var Paginationlist = [];
var counter = 0;
for(var i= start-pageSize; i < start ; i++){
if(i > -1){
if(component.find("selectAllId").get("v.value")){
Paginationlist.push(sObjectList[i]);
}else{
Paginationlist.push(sObjectList[i]);
}
counter ++;
}else{
start++;
}
}
start = start - counter;
end = end - counter;
component.set("v.startPage",start);
component.set("v.endPage",end);
component.set('v.PaginationList', Paginationlist);
},
})
测试应用：
- 最后创建一个
app
如下所示 ：
运行
本章两点
- 客户端JavaScript分页
- 复选框功能
- 获取控制器中的选定行
- 总记录数
- 选定记录数
- 选择/取消选择所有的复选框
261
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
