auseft.platform.datav/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.ts

import { CommonModule } from '@angular/common';
import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';
import { ColDef, GridApi, GridOptions, GridSizeChangedEvent } from 'ag-grid-community';
import { NzPaginationModule } from 'ng-zorro-antd/pagination';

// eslint-disable-next-line import/no-unassigned-import
import 'ag-grid-community/styles/ag-theme-quartz.css';
import { LJDataVCardComponent } from '../../lj-card/lj-card.component';
import { TableColumn, DataVLjTableComponent } from '../../lj-table/lj-table.component';
@Component({
  selector: 'lj-app-ag-grid-component',
  standalone: true,
  templateUrl: './lj-ag-grid-component.component.html',
  styleUrls: ['./pagination-style/pagination.less', './lj-ag-grid-component.component.less'],
  imports: [CommonModule, AgGridAngular, NzPaginationModule, LJDataVCardComponent, DataVLjTableComponent]
})
export class LjAgGridComponentComponent implements OnInit {
  [x: string]: any;
  @ViewChild('myGrid') grid!: AgGridAngular;
  @Input() title: string = '';
  @Input() heightNum: Number = 0;
  // gridOptions: GridOptions = {
  //   // Set grid width here
  //   width: '100%'
  // };

  gridOptions: GridOptions = {
    headerHeight: 0,
    suppressHorizontalScroll: false,
    suppressNoRowsOverlay: true,
    domLayout: 'autoHeight'

    // columnDefs="columnDefs"
  };
  @Input() showEditButton: boolean = false;

  @Input() showSetting: boolean = false;

  @Input() showPageTurning: boolean = true;

  /**每页数 */
  public pageSize!: number;
  public paginationPageSizeSelector!: [number, number, number];
  /**当前页 */
  public pageIndex!: number;
  /**总数 */
  public pageRowTotal!: number;
  onGridSizeChanged(params: GridSizeChangedEvent) {
    // get the current grids width
    var gridWidth = document.querySelector('.ag-body-viewport')!.clientWidth;
    // keep track of which columns to hide/show
    var columnsToShow = [];
    var columnsToHide = [];
    // iterate over all columns (visible or not) and work out
    // now many columns can fit (based on their minWidth)
    var totalColsWidth = 0;
    var allColumns = params.api.getColumns();
    if (allColumns && allColumns.length > 0) {
      for (var i = 0; i < allColumns.length; i++) {
        var column = allColumns[i];
        totalColsWidth += column.getMinWidth() || 0;
        if (totalColsWidth > gridWidth) {
          columnsToHide.push(column.getColId());
        } else {
          columnsToShow.push(column.getColId());
        }
      }
    }
    // show/hide columns based on current grid width
    params.api.setColumnsVisible(columnsToShow, true);
    params.api.setColumnsVisible(columnsToHide, false);
    // wait until columns stopped moving and fill out
    // any available space to ensure there are no gaps
    window.setTimeout(() => {
      params.api.sizeColumnsToFit();
    }, 10);
  }

  //默认列配置
  @Input() defaultColDef: ColDef = {
    width: 80,
    editable: false,
    headerClass: 'ag-header-center',

    cellStyle: { 'font-weight': 'bold', textAlign: 'center', 'justify-content': 'center', 'line-height': '38px' }
  };
  /** 列头 */
  @Input() columnDefs: ColDef[] = [];
  /**行数据 */
  @Input() rowData: any[] = [];
  /**表格主题 */
  @Input() gridThemeClass: string = 'ag-theme-quartz';
  @Input() paginationThemeClass: string = 'ag-theme-quartz';
  /** 构造函数 */
  constructor() {}
  // 在父组件的类中

  /**初始化 */
  ngOnInit() {
    if (this.showPageTurning) {
      console.log('showPageTurning:', this.showPageTurning);
    } else {
      console.log('showPageTurning has not true');
    }

    if (this.title) {
      console.log('Title has been passed:', this.title);
    } else {
      console.log('Title has not been passed');
    }
    console.log('-----表格初始化-----');
    // this.title = '';
    this.pageSize = 3;
    this.pageIndex = 1;
    this.pageRowTotal = this.rowData.length;
    this.paginationPageSizeSelector = [200, 500, 1000];
    this.gridOptions = {
      headerHeight: 0,
      rowData: this.rowData,
      columnDefs: this.columnDefs
    };
  }
  //每页数
  onGridReady(params: any) {
    console.log('onGridReady');
    console.log(params);
    // setTimeout(() => {
    //   params.api.sizeColumnsToFit();
    // }, 100);
    params.api.resetRowHeights();
  }
  nzPageSizeChange(_pageSize: any) {
    this.pageSize = _pageSize;
  }
  //当前页
  nzPageIndexChange(_pageIndex: any) {
    console.log(`nzPageIndexChange${_pageIndex}`);
    if (this.grid.api) {
      if (_pageIndex == 1) {
        /**去首页 */
        this.grid.api.paginationGoToFirstPage();
      } else {
        /** 页面跳转 */
        this.grid.api.paginationGoToPage(_pageIndex);
      }
    }
  }
}