Skip to content

M
mySkill-x
Commit 307b800b by Nattana Chaiyamat
Options

เพิ่มฟีเจอร์ Syncfution

parent d6af63e3
Showing with 158 additions and 10 deletions
src/app/components/datagrid-syncfution/datagrid-syncfution.component.html
<ejs-grid #grid id='Grid' [dataSource]="dataSourceSearch" [allowFiltering]="allowFiltering"
[filterSettings]="filterSettings" (actionComplete)="actionComplete($event)" [searchSettings]="searchSettings"
[groupSettings]="groupSettings" [toolbar]='toolbarOptions' [editSettings]="editSettings" showColumnMenu='true'
allowPaging='true' allowGrouping='true' allowSorting='true' showColumnMenu='true' allowFiltering='true'
[allowPdfExport]='true' (toolbarClick)='toolbarClick($event)' [allowExcelExport]='true'
[groupSettings]="groupSettings" [toolbar]='toolbarOptions' [editSettings]="editSettings" allowPaging='true'
allowGrouping='true' allowSorting='true' [showColumnMenu]="true" (columnMenuClick)="onColumnMenuClick($event)"
allowFiltering='true' [allowPdfExport]='true' (toolbarClick)='toolbarClick($event)' [allowExcelExport]='true'
[selectionSettings]="selectionOptions" (detailDataBound)='detailDataBound($event)' width="auto" allowReordering='true'
[loadingIndicator]='loadingIndicator' [query]="query" rowHeight='60' allowEditing='false' [pageSettings]='initialPage'
[allowMultiSorting]='true'>
[allowMultiSorting]='true' [columnMenuItems]="columnMenuItems">
<e-columns>
<e-column headerText='checkboxSelect' [textAlign]="'center'" width='160' [editType]="false" [allowEditing]="false"
......@@ -42,15 +42,52 @@
</e-column>
</e-columns>
<!-- Add Aggregates -->
<!-- <e-aggregates>
<e-aggregates>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of columns" [field]="col.field" [type]="'Count'"
[footerTemplate]="'รวมทั้งหมด: ${Count}'" [textAlign]="'Right'">
<e-column *ngFor="let col of aggregatesSum" [field]="col.field" [type]="'Sum'" [footerTemplate]="'Sum: ${Sum}'"
[groupFooterTemplate]="'Sum: ${Sum}'" [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
</e-aggregates> -->
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesCount" [field]="col.field" [type]="'Count'"
[footerTemplate]="'Count: ${Count}'" [groupFooterTemplate]="'Count: ${Count}'"
[groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesAvg" [field]="col.field" [type]="'Average'"
[footerTemplate]="'Average: ${Average}'" [groupFooterTemplate]="'Average: ${Average}'"
[groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesMin" [field]="col.field" [type]="'Min'" [footerTemplate]="'Min: ${Min}'"
[groupFooterTemplate]="'Min: ${Min}'" [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesMax" [field]="col.field" [type]="'Max'" [footerTemplate]="'Max: ${Max}'"
[groupFooterTemplate]="'Max: ${Max}'" [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
<!-- <e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregates" [field]="col.field" [type]="'Count'"
[footerTemplate]="'Count: ${Count}'" [groupFooterTemplate]="col.groupFooterTemplate"
[groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
</e-column>
</e-columns>
</e-aggregate> -->
</e-aggregates>
</ejs-grid>
\ No newline at end of file
src/app/components/datagrid-syncfution/datagrid-syncfution.component.ts
......@@ -31,7 +31,8 @@ import {
PdfExportProperties,
LoadingIndicatorModel,
ExcelExportProperties,
Column
Column,
ColumnMenuClickEventArgs
} from '@syncfusion/ej2-angular-grids';
import { GroupSettingsModel, FilterSettingsModel, ColumnModel } from '@syncfusion/ej2-angular-grids';
import { DataManager, Query } from '@syncfusion/ej2-data';
......@@ -107,6 +108,12 @@ export class DatagridSyncfutionComponent implements OnInit {
@Input() childList = ''
@Input() searchText = ''
aggregatesSum: any[] = [];
aggregatesCount: any[] = [];
aggregatesAvg: any[] = [];
aggregatesMin: any[] = [];
aggregatesMax: any[] = [];
@Input() childColumns: ColumnModel[] = [];
@Input() allowSorting = true;
@Input() allowFiltering = true;
......@@ -132,6 +139,17 @@ export class DatagridSyncfutionComponent implements OnInit {
// @Output() pageChanged = new EventEmitter<number>();
// @Output() filterChanged = new EventEmitter<FilterEventArgs>();
// ...
public columnMenuItems: any[] = [
'AutoFit', 'AutoFitAll', 'SortAscending', 'SortDescending',
'Group', 'Ungroup', 'ColumnChooser', 'Filter',
{ text: 'Sum', id: 'aggregate_sum' },
{ text: 'Count', id: 'aggregate_count' },
{ text: 'Average', id: 'aggregate_average' },
{ text: 'Min', id: 'aggregate_min' },
{ text: 'Max', id: 'aggregate_max' }
];
constructor(private cdr: ChangeDetectorRef) {
}
ngOnInit(): void {
......@@ -257,4 +275,96 @@ export class DatagridSyncfutionComponent implements OnInit {
}
}
}
onColumnMenuClick(args: ColumnMenuClickEventArgs): void {
if (!args.item.id) { return; }
// เช็คว่าเป็น aggregate_... ไหม
if (args.item.id.startsWith('aggregate_')) {
const colField = (args.column as any)?.field;
if (!colField) { return; }
// ดีบักดูว่า user คลิกอะไร
// console.log('Column Menu Click =>', args.item.id, 'Field:', colField);
// ถอดเอาคำว่า aggregate_ ออก
const selectedAgg = args.item.id.split('_')[1]; // sum, count, average, min, max, custom
// เอาไปแก้ไขค่าใน this.aggregates ให้ตรงคอลัมน์
// สมมุติว่า field ใน aggregates ไม่ซ้ำกัน
// const aggIndex = this.aggregates.findIndex(a => a.field === colField);
if (selectedAgg === 'sum') {
if (this.aggregatesSum.find(a => a.field === colField)) {
this.aggregatesSum = this.aggregatesSum.filter(a => a.field !== colField);
} else {
this.aggregatesSum.push({
field: colField,
type: 'Sum',
footerTemplate: 'Sum: ${Sum}'
});
}
this.cdr.detectChanges()
}
else if (selectedAgg === 'count') {
this.aggregatesCount.push({
field: colField,
type: 'Count',
footerTemplate: 'Count: ${Count}'
});
} else if (selectedAgg === 'average') {
this.aggregatesAvg.push({
field: colField,
type: 'Average',
footerTemplate: 'Avg: ${Average}'
});
}
else if (selectedAgg === 'min') {
this.aggregatesMin.push({
field: colField,
type: 'Min',
footerTemplate: 'Min: ${Min}'
});
}
else if (selectedAgg === 'max') {
this.aggregatesMax.push({
field: colField,
type: 'Max',
footerTemplate: 'Max: ${Max}'
});
}
// if (aggIndex !== -1) {
// switch (selectedAgg) {
// case 'sum': this.aggregates[aggIndex].type = 'Sum'; break;
// case 'count': this.aggregates[aggIndex].type = 'Count'; break;
// case 'average': this.aggregates[aggIndex].type = 'Average'; break;
// case 'min': this.aggregates[aggIndex].type = 'Min'; break;
// case 'max': this.aggregates[aggIndex].type = 'Max'; break;
// case 'custom': this.aggregates[aggIndex].type = 'Custom';
// // ถ้ามีฟังก์ชัน customAggregate ที่ต้องการ ก็เซ็ตด้วย
// // this.aggregates[aggIndex].customAggregate = this.myCustomFunction;
// break;
// }
// } else {
// if (selectedAgg === 'sum') {
// this.aggregates.push({
// field: colField,
// type: 'Sum'
// });
// }
// else if (selectedAgg === 'count') {
// this.aggregates.push({
// field: colField,
// type: 'Count'
// });
// }
// }
// จากนั้น refresh grid เพื่อให้ aggregates คำนวณใหม่
setTimeout(() => {
this.grid?.refresh();
}, 500);
// this.grid?.refresh();
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment