如何使用 TypeScript 将按钮添加到 Angular SlickGrid
HTML 类是这样的：xyz.html ....
<div class="col-12" style="padding-top: 10px; z-index: 0">
<p>Files to Settlement </p>
<angular-slickgrid gridId="settlement"
[columnDefinitions]="settlementFileColumnDefinitions"
[gridOptions]="gridOptions"
[dataset]="settlementDataset"
(sgOnClick)="onCellClicked($event.detail.eventData, $event.detail.args)"
></angular-slickgrid>
</div>
...
Typescript 类是这样的。只添加了最重要的代码。xyz.ts ...
settlementFileColumnDefinitions: Column[] = [];
gridOptions: GridOption = {};
settlementDataset: any [] = [];
private downloadButtonFormatter: ( row , cell , value , columnDef , dataContext ) => any;
constructor ( public dialog: MatDialog ) {
this.settlementFileColumnDefinitions = [
{id: 'settlementDate' , name: 'Settlement Date' , field: 'settlementDate' , sortable: true} ,
{id: 'reconcilliationDate' , name: 'Reconcilliation Date' , field: 'reconcilliationDate' , sortable: true} ,
{id: 'cSVFileName' , name: 'CSV File Name' , field: 'cSVFileName' , sortable: true} ,
{id: 'initiateSettlementBy' , name: 'Initiate Settlement by' , field: 'initiateSettlementBy' , sortable: true} ,
{id: 'reconciledBy' , name: 'Reconciled by' , field: 'reconciledBy' , sortable: true} ,
{
id: "downloadReport" , name: "Download Report" , field: "downloadReport" , minWidth: 120 ,
formatter:
this.downloadButtonFormatter = function ( row , cell , value , columnDef , dataContext ) {
return ' <button view class="btn btn-sm btn-info float-left" style="color: white;" >Download Settlement Report</button>';
}
}
];
this.gridOptions = {
enableAutoResize: true ,
enableSorting: true ,
enableExport: true ,
enablePagination: true ,
enableRowSelection: true ,
enableExcelExport: true ,
enableFiltering: true ,
enableCheckboxSelector: true ,
enableCellNavigation: true ,
checkboxSelector: {
hideSelectAllCheckbox: true ,
} ,
multiSelect: false ,
rowSelectionOptions: {
selectActiveRow: true ,
}
};
this.loadMockData ();
}
/**
* Handle clicks on the table
* @param {Event} event
* @param args
*/
onCellClicked ( event: Event , args: any ) {
const target = event.target as HTMLTextAreaElement;
if (target.classList.contains("btn")) {
this.downnloadSettlementReport();
}
}
loadMockData () {
for ( let i = 0 ; i < 5 ; i ++ ) {
this.settlementDataset[ i ] = {
id: i ,
settlementDate: '5858888' + i ,
reconcilliationDate: '87797978' + i ,
cSVFileName: 'asdasdasd' + i ,
initiateSettlementBy: 'Achala' ,
reconciledBy: 'Shiran'
};
}
}
public showDownloadConfirmationDialog () {
const dialogConfig = new MatDialogConfig ();
dialogConfig.disableClose = true;
dialogConfig.closeOnNavigation = true;
dialogConfig.autoFocus = true;
dialogConfig.height = '220px';
dialogConfig.width = '500px';
dialogConfig.data = {};
const dialogRef = this.dialog.open ( DownloadConfirmationDialogComponent , dialogConfig );
dialogRef.afterClosed ().subscribe (
data => {
console.log ( "Comment null" + data.isReportToDownload );
if ( data.isReportToDownload ) {
}
}
);
}
……
对话框弹出代码如下
下载-确认-dialog.component.html
结算下载报告确认<cf-page-body>
<div class="col-12" style="padding-bottom: 10px">
<p>Are you sure you want to download Settlement Report?</p>
</div>
<div class="col-12" mat-dialog-actions>
<button mat-raised-button (click)="downloadReport()">Download Now</button>
<button mat-raised-button mat-dialog-close>Cancel</button>
</div>
</cf-page-body>
下载-确认-dialog.component.ts
@Component({
selector: 'cf-download-confirmation-dialog',
templateUrl: './download-confirmation-dialog.component.html',
styleUrls: ['./download-confirmation-dialog.component.scss']
})
export class DownloadConfirmationDialogComponent implements OnInit {
isReportToDownload= false;
constructor( private dialogRef: MatDialogRef<DownloadConfirmationDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data) {
}
ngOnInit() {
}
}