import { LightningElement, api,track } from 'lwc';
|
import customUnitTemplate from './templates/customUnit.html';
|
import customShipmentNumberTemplate from './templates/customShipmentNumber.html';
|
import customShippingUnitPriceTemplate from './templates/customShippingUnitPrice.html';
|
|
const DELAY = 300;
|
const recordsPerPage = [5,10,25,50,75,100];
|
const pageNumber = 1;
|
const SHOWDIV = 'visibility:visible';
|
const HIDEDIV = 'visibility:hidden';
|
const DEFAULTHEIGHT = '300';
|
|
export default class LwcDatatableUtility extends LightningElement {
|
|
static customTypes = {
|
customUnit: {
|
template: customUnitTemplate,
|
standardCellLayout: true,
|
typeAttributes: ['Id'],
|
},
|
customShipment: {
|
template: customShipmentNumberTemplate,
|
standardCellLayout: true,
|
typeAttributes: ['Id'],
|
},
|
customShipmentUnitPrice: {
|
template: customShippingUnitPriceTemplate,
|
standardCellLayout: true,
|
typeAttributes: ['Id'],
|
}
|
// Other types here
|
}
|
|
// Input Attributes from Parent Componant
|
@api keyField = 'Id';
|
@api showSearchBox = false; //Show/hide search box; valid values are true/false
|
@api showPagination; //Show/hide pagination; valid values are true/false
|
@api pageSizeOptions = recordsPerPage; //Page size options; valid values are array of integers
|
@api totalRecords; //Total no.of records; valid type is Integer
|
@api records; //All records available in the data table; valid type is Array
|
@api maxRowSelection; //All records available in the data table; valid type is Array
|
@api columns = []; //Records to be displayed on the page
|
@api hidecheckboxcolumn = false;
|
@api showrownumber = false;
|
|
tableHeightStyle = 'height: '+ DEFAULTHEIGHT +'px;'; // Set Default Height as 300px
|
@api
|
get tableHeight() {
|
return this.tableHeightStyle;
|
}
|
|
set tableHeight(value) {
|
this.tableHeightStyle = 'height: '+ value +'px;';
|
}
|
|
pageSize; //No.of records to be displayed per page
|
totalPages; //Total no.of pages
|
pageNumber = pageNumber; //Page number
|
searchKey; //Search Input
|
paginationVisibility = SHOWDIV;
|
rowNumberOffset; //Row number
|
preSelected; //preSelectedOnDisplay
|
recordsToDisplay = []; //Records to be displayed on the page
|
|
filteredRecords = []; //Filtered records available in the data table; valid type is Array
|
selectedRecords = []; //OverallSelected records in the data table; valid type is Array
|
pageSelectedRecords = []; //Page Selected rows in the data table; valid type is Array
|
filtredNum; // Total no.of Filtered records; valid type is Integer
|
totalSelected = 0;
|
refreshCurrentData;
|
//SORT
|
defaultSortDirection = 'asc';
|
sortDirection = 'asc';
|
sortedBy;
|
|
//Called after the component finishes inserting to DOM
|
connectedCallback() {
|
console.log('进入 子组件 connectedCallback ');
|
console.log('this.records = ' + JSON.stringify(this.records));
|
console.log('keyField = ' + this.keyField);
|
if(this.pageSizeOptions && this.pageSizeOptions.length > 0)
|
this.pageSize = this.pageSizeOptions[0];
|
else{
|
this.pageSize = this.totalRecords;
|
this.showPagination = false;
|
}
|
this.paginationVisibility = this.showPagination === false ? HIDEDIV : SHOWDIV;
|
this.filteredRecords = this.records;
|
this.filtredNum = this.totalRecords;
|
this.setRecordsOnPage();
|
}
|
|
handleRecordsPerPage(event){
|
this.pageSize = event.target.value;
|
this.setRecordsOnPage();
|
}
|
|
handlePageNumberChange(event){
|
if(event.keyCode === 13){
|
this.pageNumber = event.target.value;
|
this.setRecordsOnPage();
|
}
|
}
|
|
previousPage(){
|
this.pageNumber = this.pageNumber-1;
|
this.setRecordsOnPage();
|
}
|
nextPage(){
|
this.pageNumber = this.pageNumber+1;
|
this.setRecordsOnPage();
|
}
|
|
@api
|
setRecordsOnPage(){
|
this.recordsToDisplay = [];
|
if(!this.pageSize)
|
this.pageSize = this.filtredNum;
|
|
this.totalPages = Math.ceil(this.filtredNum/this.pageSize);
|
|
this.setPaginationControls();
|
for(let i=(this.pageNumber-1)*this.pageSize; i < this.pageNumber*this.pageSize; i++){
|
if(i === this.filtredNum) break;
|
this.recordsToDisplay.push(this.filteredRecords[i]);
|
}
|
|
this.preSelected = [];
|
this.selectedRecords.forEach((item) => {
|
if(item.selected)
|
this.preSelected.push(item.Id);
|
})
|
let paginatedRecords = new Object();
|
paginatedRecords.recordsToDisplay = this.recordsToDisplay;
|
paginatedRecords.preSelected = this.preSelected;
|
if(this.maxRowSelection === '1' ){
|
this.totalSelected = 0;
|
}
|
if(this.selectedRecords && this.selectedRecords.length > 0){
|
this.refreshCurrentData = true;
|
}
|
}
|
|
setPaginationControls(){
|
// Previous/Next buttons visibility by Total pages
|
if(this.totalPages === 1){
|
this.showPrevious = HIDEDIV;
|
this.showNext = HIDEDIV;
|
}else if(this.totalPages > 1){
|
this.showPrevious = SHOWDIV;
|
this.showNext = SHOWDIV;
|
}
|
// Previous/Next buttons visibility by Page number
|
if(this.pageNumber <= 1){
|
this.pageNumber = 1;
|
this.showPrevious = HIDEDIV;
|
}else if(this.pageNumber >= this.totalPages){
|
this.pageNumber = this.totalPages;
|
this.showNext = HIDEDIV;
|
}
|
// Previous/Next buttons visibility by Pagination visibility
|
if(this.paginationVisibility === HIDEDIV){
|
this.showPrevious = HIDEDIV;
|
this.showNext = HIDEDIV;
|
}
|
}
|
|
handleKeyChange(event) {
|
window.clearTimeout(this.delayTimeout);
|
const searchKey = event.target.value;
|
if(searchKey){
|
this.delayTimeout = setTimeout(() => {
|
//this.paginationVisibility = HIDEDIV;
|
this.setPaginationControls();
|
|
this.searchKey = searchKey;
|
//Use other field name here in place of 'Name' field if you want to search by other field
|
//this.recordsToDisplay = this.records.filter(rec => rec.includes(searchKey));
|
//Search with any column value (Updated as per the feedback)
|
this.filteredRecords = this.records.filter(rec => JSON.stringify(rec).toLowerCase().includes(searchKey.toLowerCase()));
|
this.filtredNum = this.filteredRecords.length;
|
this.setRecordsOnPage();
|
}, DELAY);
|
}else{
|
this.filteredRecords = this.records;
|
this.filtredNum = this.totalRecords;
|
this.paginationVisibility = SHOWDIV;
|
this.setRecordsOnPage();
|
}
|
}
|
|
handelRowsSelected(selectedRows) {
|
console.log(selectedRows.length);
|
this.totalSelected = 0;
|
this.pageSelectedRecords = [];
|
if(this.maxRowSelection != '1' && this.recordsToDisplay &&
|
this.recordsToDisplay.length > 0 &&
|
((selectedRows.length === 0 && !this.refreshCurrentData) || selectedRows.length > 0) ){
|
this.recordsToDisplay.forEach((item)=>{
|
var row = new Object();
|
row.Id = item.Id;
|
if(selectedRows.includes(item.Id)){
|
row.selected = true;
|
}else{
|
row.selected = false;
|
}
|
this.pageSelectedRecords.push(row) ;
|
});
|
}
|
// To store previous row Selection
|
if(this.selectedRecords.length == 0 ){
|
this.selectedRecords = this.pageSelectedRecords;
|
}
|
this.selectedRecords = this.mergeObjectArray(this.selectedRecords, this.pageSelectedRecords, "Id");
|
if(this.maxRowSelection === '1' && selectedRows && selectedRows.length > 0){
|
this.totalSelected = 1;
|
}else{
|
let i=0;
|
this.selectedRecords.forEach(item => {
|
if(item.selected){
|
i++;
|
this.totalSelected = i;
|
}
|
})
|
//this.totalSelected = this.totalSelected ===1 && selectedRows.length ===0? 0: this.totalSelected;
|
}
|
const filterSelected = this.selectedRecords.filter(({ selected }) => selected === true );
|
this.dispatchEvent(new CustomEvent('setselectedrecords', {detail: filterSelected})); //Send records to display on table to the parent component
|
this.refreshCurrentData = false;
|
}
|
|
mergeObjectArray(firstArray, secondArray, prop){
|
var reduced = firstArray.filter( aitem => ! secondArray.find ( bitem => aitem[prop] === bitem[prop]) )
|
//let arr3 = arr1.map((item, i) => Object.assign({}, item, arr2[i]));
|
return reduced.concat(secondArray);
|
}
|
|
getSelectedRows(event) {
|
const selectedRows = event.detail.selectedRows;
|
let selectedRecordIds = [];
|
// Display that fieldName of the selected rows
|
for (let i = 0; i < selectedRows.length; i++){
|
selectedRecordIds.push(selectedRows[i].Id);
|
}
|
this.handelRowsSelected(selectedRecordIds);
|
}
|
|
handelSort(event){
|
const { fieldName: sortedBy, sortDirection } = event.detail;
|
const cloneData = [...this.filteredRecords];
|
cloneData.sort(this.sortBy(sortedBy, sortDirection === 'asc' ? 1 : -1));
|
this.filteredRecords = cloneData;
|
this.sortDirection = sortDirection;
|
this.sortedBy = sortedBy;
|
this.setRecordsOnPage();
|
}
|
|
sortBy(field, reverse, primer) {
|
const key = primer
|
? function(x) {
|
return primer(x[field]);
|
}
|
: function(x) {
|
return x[field];
|
};
|
|
return function(a, b) {
|
a = key(a);
|
b = key(b);
|
return reverse * ((a > b) - (b > a));
|
};
|
}
|
}
|
