From af7b716a60d889acea95560abba0e46eee008b8f Mon Sep 17 00:00:00 2001
From: buli <137736985@qq.com>
Date: 星期三, 05 七月 2023 13:54:50 +0800
Subject: [PATCH] backup0705
---
force-app/main/default/lwc/lwcDatatableUtility/lwcDatatableUtility.js | 212 +++++++++++++++++++++++-----------------------------
1 files changed, 94 insertions(+), 118 deletions(-)
diff --git a/force-app/main/default/lwc/lwcDatatableUtility/lwcDatatableUtility.js b/force-app/main/default/lwc/lwcDatatableUtility/lwcDatatableUtility.js
index b201755..a6ede92 100644
--- a/force-app/main/default/lwc/lwcDatatableUtility/lwcDatatableUtility.js
+++ b/force-app/main/default/lwc/lwcDatatableUtility/lwcDatatableUtility.js
@@ -1,34 +1,35 @@
-import { LightningElement, api, track } from 'lwc';
+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 recordsPerPage = [5,10,25,50,75,100];
const pageNumber = 1;
const SHOWDIV = 'visibility:visible';
-const HIDEDIV = 'visibility:hidden';
+const HIDEDIV = 'visibility:hidden';
const DEFAULTHEIGHT = '300';
export default class LwcDatatableUtility extends LightningElement {
+
static customTypes = {
customUnit: {
template: customUnitTemplate,
standardCellLayout: true,
- typeAttributes: ['Id']
+ typeAttributes: ['Id'],
},
customShipment: {
template: customShipmentNumberTemplate,
standardCellLayout: true,
- typeAttributes: ['Id']
+ typeAttributes: ['Id'],
},
customShipmentUnitPrice: {
template: customShippingUnitPriceTemplate,
standardCellLayout: true,
- typeAttributes: ['Id']
+ typeAttributes: ['Id'],
}
// Other types here
- };
+ }
// Input Attributes from Parent Componant
@api keyField = 'Id';
@@ -37,32 +38,32 @@
@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 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
+
+ tableHeightStyle = 'height: '+ DEFAULTHEIGHT +'px;'; // Set Default Height as 300px
@api
get tableHeight() {
return this.tableHeightStyle;
}
set tableHeight(value) {
- this.tableHeightStyle = 'height: ' + value + 'px;';
- }
+ 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;
+ 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
+ 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;
@@ -70,98 +71,95 @@
//SORT
defaultSortDirection = 'asc';
sortDirection = 'asc';
- sortedBy;
+ sortedBy;
//Called after the component finishes inserting to DOM
connectedCallback() {
console.log('杩涘叆 瀛愮粍浠� connectedCallback ');
- console.log('this.records = ' + JSON.stringify(this.records));
+ console.log('this.records = ' + JSON.stringify(this.records));
console.log('keyField = ' + this.keyField);
- if (this.pageSizeOptions && this.pageSizeOptions.length > 0)
+ if(this.pageSizeOptions && this.pageSizeOptions.length > 0)
this.pageSize = this.pageSizeOptions[0];
- else {
+ else{
this.pageSize = this.totalRecords;
this.showPagination = false;
}
- this.paginationVisibility =
- this.showPagination === false ? HIDEDIV : SHOWDIV;
- this.filteredRecords = this.records;
+ this.paginationVisibility = this.showPagination === false ? HIDEDIV : SHOWDIV;
+ this.filteredRecords = this.records;
this.filtredNum = this.totalRecords;
this.setRecordsOnPage();
}
- handleRecordsPerPage(event) {
+ handleRecordsPerPage(event){
this.pageSize = event.target.value;
this.setRecordsOnPage();
}
- handlePageNumberChange(event) {
- if (event.keyCode === 13) {
+ handlePageNumberChange(event){
+ if(event.keyCode === 13){
this.pageNumber = event.target.value;
this.setRecordsOnPage();
}
}
-
- previousPage() {
- this.pageNumber = this.pageNumber - 1;
+
+ previousPage(){
+ this.pageNumber = this.pageNumber-1;
this.setRecordsOnPage();
}
- nextPage() {
- this.pageNumber = this.pageNumber + 1;
+ nextPage(){
+ this.pageNumber = this.pageNumber+1;
this.setRecordsOnPage();
}
@api
- setRecordsOnPage() {
+ setRecordsOnPage(){
this.recordsToDisplay = [];
- if (!this.pageSize) this.pageSize = this.filtredNum;
+ if(!this.pageSize)
+ this.pageSize = this.filtredNum;
- this.totalPages = Math.ceil(this.filtredNum / this.pageSize);
+ 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;
+ 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);
- });
+ if(item.selected)
+ this.preSelected.push(item.Id);
+ })
let paginatedRecords = new Object();
paginatedRecords.recordsToDisplay = this.recordsToDisplay;
paginatedRecords.preSelected = this.preSelected;
- if (this.maxRowSelection === '1') {
+ if(this.maxRowSelection === '1' ){
this.totalSelected = 0;
- }
- if (this.selectedRecords && this.selectedRecords.length > 0) {
+ }
+ if(this.selectedRecords && this.selectedRecords.length > 0){
this.refreshCurrentData = true;
- }
+ }
}
- setPaginationControls() {
+ setPaginationControls(){
// Previous/Next buttons visibility by Total pages
- if (this.totalPages === 1) {
+ if(this.totalPages === 1){
this.showPrevious = HIDEDIV;
this.showNext = HIDEDIV;
- } else if (this.totalPages > 1) {
- this.showPrevious = SHOWDIV;
- this.showNext = SHOWDIV;
+ }else if(this.totalPages > 1){
+ this.showPrevious = SHOWDIV;
+ this.showNext = SHOWDIV;
}
// Previous/Next buttons visibility by Page number
- if (this.pageNumber <= 1) {
+ if(this.pageNumber <= 1){
this.pageNumber = 1;
this.showPrevious = HIDEDIV;
- } else if (this.pageNumber >= this.totalPages) {
+ }else if(this.pageNumber >= this.totalPages){
this.pageNumber = this.totalPages;
this.showNext = HIDEDIV;
}
// Previous/Next buttons visibility by Pagination visibility
- if (this.paginationVisibility === HIDEDIV) {
+ if(this.paginationVisibility === HIDEDIV){
this.showPrevious = HIDEDIV;
this.showNext = HIDEDIV;
}
@@ -170,7 +168,7 @@
handleKeyChange(event) {
window.clearTimeout(this.delayTimeout);
const searchKey = event.target.value;
- if (searchKey) {
+ if(searchKey){
this.delayTimeout = setTimeout(() => {
//this.paginationVisibility = HIDEDIV;
this.setPaginationControls();
@@ -179,119 +177,97 @@
//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.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;
+ }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)) {
+ 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 {
+ }else{
row.selected = false;
}
- this.pageSelectedRecords.push(row);
- });
+ this.pageSelectedRecords.push(row) ;
+ });
}
// To store previous row Selection
- if (this.selectedRecords.length == 0) {
+ 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.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) {
+ }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;
+ })
+ //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
+ 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])
- );
+ 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++) {
+ for (let i = 0; i < selectedRows.length; i++){
selectedRecordIds.push(selectedRows[i].Id);
- }
- this.handelRowsSelected(selectedRecordIds);
- }
+ }
+ this.handelRowsSelected(selectedRecordIds);
+ }
- handelSort(event) {
+ 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.filteredRecords = cloneData;
this.sortDirection = sortDirection;
- this.sortedBy = sortedBy;
+ this.sortedBy = sortedBy;
this.setRecordsOnPage();
- }
+ }
sortBy(field, reverse, primer) {
const key = primer
- ? function (x) {
+ ? function(x) {
return primer(x[field]);
}
- : function (x) {
+ : function(x) {
return x[field];
};
- return function (a, b) {
+ return function(a, b) {
a = key(a);
b = key(b);
return reverse * ((a > b) - (b > a));
};
- }
+ }
}
\ No newline at end of file
--
Gitblit v1.9.1