使用【lightning-datatable】表示ListView数据时,当表示Opportunity表中Amount项目,需要排序功能时,可以直接在SOQL中使用ORDER BY进行排序,也可以在自定义Apex中实现。
1.自定义排序类
SortableOpportunityWrapper
代码语言:javascript复制public class SortableOpportunityWrapper implements Comparable {
public Opportunity opp;
public SortableOpportunityWrapper(Opportunity t) {
opp = t;
}
public Integer compareTo(Object compareTo) {
SortableOpportunityWrapper compareToOpportunity = (SortableOpportunityWrapper) compareTo;
Integer returnValue = 0;
if (opp.Amount < compareToOpportunity.opp.Amount) {
returnValue = -1;
}
if (opp.Amount > compareToOpportunity.opp.Amount) {
returnValue = 1;
}
return returnValue;
}
}
2.调用排序类进行排序
OpportunityListViewController.cls
代码语言:javascript复制public with sharing class OpportunityListViewController {
@AuraEnabled(cacheable=true)
public static List<OpportunityWrapper> getOpportunityListView(){
List<OpportunityWrapper> inputWappers = new List<OpportunityWrapper>();
List<Opportunity> resultList = [SELECT Id,
Name,
StageName,
Amount,
CloseDate,
RecordTypeId
FROM Opportunity
ORDER BY LastModifiedDate DESC
LIMIT 10
];
List<SortableOpportunityWrapper> oppSortList = new List<SortableOpportunityWrapper>();
for (Opportunity t : resultList) {
oppSortList.add(new SortableOpportunityWrapper(t));
}
oppSortList.sort();
for (SortableOpportunityWrapper opSort : oppSortList) {
OpportunityWrapper wapper = new OpportunityWrapper();
wapper.id = opSort.opp.Id;
wapper.idLink = '/opportunity/' opSort.opp.Id;
wapper.name = opSort.opp.Name;
wapper.stageName = opSort.opp.StageName;
wapper.amount = String.valueOf(opSort.opp.Amount);
wapper.closeDate = opSort.opp.CloseDate;
inputWappers.add(wapper);
}
return inputWappers;
}
public class OpportunityWrapper {
@AuraEnabled
public String id;
@AuraEnabled
public String idLink;
@AuraEnabled
public String name;
@AuraEnabled
public String stageName;
@AuraEnabled
public String amount;
@AuraEnabled
public Date closeDate;
}
}
opportunityListView.html
代码语言:javascript复制<template>
<div class="slds-card__body">
<lightning-datatable
key-field="id"
data={records}
show-row-number-column
row-number-offset={rowOffset}
hide-checkbox-column
columns={columns}
>
</lightning-datatable>
<template if:false={loaded}>
<lightning-spinner alternative-text="Loading"></lightning-spinner>
</template>
</div>
</template>
opportunityListView.js
代码语言:javascript复制import { LightningElement, track, wire } from 'lwc';
import getOpportunityListView from '@salesforce/apex/OpportunityListViewController.getOpportunityListView';
const columns = [
{ label: '案件名', fieldName: 'idLink', type: 'url', sortable: true, typeAttributes: { label: { fieldName: 'name' }, target: '_self' }, initialWidth: 300 },
{ label: 'フェーズ', fieldName: 'stageName', type: 'text', editable: true },
{ label: '保険料', fieldName: 'amount', type: 'currency' },
{ label: '完了予定日', fieldName: 'closeDate', type: 'date' },
];
export default class OpportunityListView extends LightningElement {
@track columns = columns;
@track records;
@track prospectRecords;
@track wiredRecordList;
@track error;
@track rowOffset = 0;
@track loaded = false;
@wire(getOpportunityListView)
recordList(result) {
this.wiredRecordList = result;
if (result.data) {
this.records = result.data;
this.error = undefined;
this.loaded = true;
} else if (result.error) {
this.error = result.error;
this.records = [];
}
}
}