数据可视化大屏
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

66 lines
1.7KB

  1. import { Component, OnInit, ViewChild, Input } from '@angular/core';
  2. import { AgGridAngular } from 'ag-grid-angular';
  3. import { ColDef } from 'ag-grid-community';
  4. import {
  5. GridApi,
  6. } from 'ag-grid-community';
  7. import { NzPaginationModule } from 'ng-zorro-antd/pagination';
  8. @Component({
  9. selector: 'app-ag-grid-component',
  10. imports: [AgGridAngular, NzPaginationModule],
  11. standalone: true,
  12. templateUrl: './ag-grid-component.component.html',
  13. styleUrls: ["./pagination-style/pagination.less"]
  14. })
  15. export class AgGridComponentComponent implements OnInit {
  16. @ViewChild('myGrid') grid!: AgGridAngular;
  17. /**每页数 */
  18. public pageSize!: number;
  19. /**当前页 */
  20. public pageIndex!: number;
  21. /**总数 */
  22. public pageRowTotal!: number;
  23. //默认列配置
  24. @Input() defaultColDef: ColDef = {
  25. width: 130,
  26. editable: false,
  27. };
  28. /** 列头 */
  29. @Input() columnDefs: ColDef[] = [];
  30. /**行数据 */
  31. @Input() rowData: any[] = [];
  32. /**表格主题 */
  33. @Input() gridThemeClass: string = "ag-theme-quartz"
  34. @Input() paginationThemeClass: string = "ag-theme-quartz"
  35. /** 构造函数 */
  36. constructor() { }
  37. /**初始化 */
  38. ngOnInit() {
  39. console.log('-----表格初始化-----');
  40. this.pageSize = 10;
  41. this.pageIndex = 1;
  42. this.pageRowTotal = this.rowData.length;
  43. }
  44. //每页数
  45. nzPageSizeChange(_pageSize: any) {
  46. this.pageSize = _pageSize;
  47. }
  48. //当前页
  49. nzPageIndexChange(_pageIndex: any) {
  50. console.log("nzPageIndexChange" + _pageIndex)
  51. if (this.grid.api) {
  52. if (_pageIndex == 1) {
  53. /**去首页 */
  54. this.grid.api.paginationGoToFirstPage();
  55. } else {
  56. /** 页面跳转 */
  57. this.grid.api.paginationGoToPage(_pageIndex);
  58. }
  59. }
  60. }
  61. }