分页样式

src/app/routes/data-v/workstation/pagination/pagination.ts

@@ -0,0 +1,37 @@
+
+// import { Component, OnInit, } from '@angular/core';
+// import { NzPaginationModule } from 'ng-zorro-antd/pagination';
+// @Component({
+//     selector: 'grid-pagination-changer',
+//     imports: [NzPaginationModule],
+//     standalone: true,
+//     template: `
+//     <nz-pagination
+//     [nzPageIndex]="currentPage"
+//       [nzTotal]="totalRecords"
+//       [nzPageSize]="pageSize"
+//       (nzPageIndexChange)="onPageChanged($event)"
+//       (nzPageSizeChange)="onPageSizeChanged($event)"
+//     nzShowSizeChanger
+//      ></nz-pagination>
+//      `
+// })
+// export class NzDemoPaginationChangerComponent implements OnInit {
+//     public currentPage!: number;
+//     public totalRecords!: number;
+//     public pageSize!: number;
+
+//     ngOnInit(params: any): {
+//         this.currentPage = params.currentPage;
+// this.totalRecords = params.totalRecords;
+// this.pageSize = params.pageSize;
+//     }
+
+// onPageChanged(pageIndex: number): void {
+//     // Implement logic to handle page change
+// }
+
+// onPageSizeChanged(pageSize: number): void {
+//     // Implement logic to handle page size change
+// }
+// }

src/app/routes/data-v/workstation/workstation.component.html

@@ -1,9 +1,18 @@
 <div nz-row [nzGutter]="[12, 12]">
   <data-v-card nz-col nzSpan="12" title="待办任务">
-    <ag-grid-angular (paginationChanged)="onPaginationChanged($event)" [pagination]="true"
-      [paginationAutoPageSize]="true" [defaultColDef]="defaultColDef" [rowData]="rowData" [columnDefs]="colDefs1"
-      class="ag-theme-quartz ag-theme-datav">
+    <ag-grid-angular #myGrid [pagination]="true" [suppressPaginationPanel]="true" [suppressPaginationPanel]="true"
+      [suppressScrollOnNewData]="true" [paginationPageSize]="pageSize" [defaultColDef]="defaultColDef"
+      [rowData]="rowData" [columnDefs]="colDefs1" class="ag-theme-quartz ag-theme-datav">
     </ag-grid-angular>
+    <br />
+    <!-- 分页 -->
+    <div class="grid-pagination">
+      <ng-template #totalTemplate let-total>共 {{ pageTotal }} 项数据</ng-template>
+      <nz-pagination [nzPageIndex]="pageIndex" [nzPageSize]="pageSize" [nzTotal]="pageTotal"
+        (nzPageSizeChange)="nzPageSizeChange($event)" (nzPageIndexChange)="nzPageIndexChange($event)"
+        class="ag-theme-quartz" nzShowSizeChanger />
+    </div>
+
   </data-v-card>
   <data-v-card nz-col nzSpan="12" title="已办任务">
     <ag-grid-angular [pagination]="true" [paginationAutoPageSize]="true" [defaultColDef]="defaultColDef"
@@ -19,5 +28,6 @@
     <ag-grid-angular [pagination]="true" [paginationAutoPageSize]="true" [defaultColDef]="defaultColDef"
       [rowData]="rowData" [columnDefs]="colDefs4" class="ag-theme-quartz ag-theme-datav">
     </ag-grid-angular>
+
   </data-v-card>
 </div>

src/app/routes/data-v/workstation/workstation.component.less

@@ -23,27 +23,105 @@
 //     color: #94DDF3;
 // }
 
-.ag-theme-datav ::ng-deep  .ag-row-selected .ag-ltr .ag-cell {
+/* 分页器 */
+
+
+
+
+// 第几条 文字
+.grid-pagination ::ng-deep .ant-select-selection-item,
+.ant-select-selector {
+    color: #74FAFB;
+    border-color: #74FAFB;
+}
+
+::ng-deep .ant-select-item-option {
+    color: #74FAFB !important;
+}
+
+::ng-deep .ant-select-item-option-active div {
+    font-weight: 800 !important;
+    color: #74FAFB !important;
+}
+
+//箭头  颜色
+.grid-pagination::ng-deep .anticon {
+    color: #74FAFB;
+}
+
+.grid-pagination ::ng-deep .ant-select-selector {
+    color: #74FAFB;
+    border-color: #74FAFB;
+
+
+}
+
+.grid-pagination ::ng-deep .ant-pagination-prev .ant-pagination-item-link {
+    color: #74FAFB;
+    border-color: #74FAFB;
+}
+
+//中间的  item
+.grid-pagination ::ng-deep .ant-pagination-item {
+    color: #74FAFB;
+    border-color: #74FAFB;
+}
+
+//*:disabled
+.grid-pagination ::ng-deep .ant-pagination-item a {
+    color: #74FAFB !important;
+}
+
+.grid-pagination ::ng-deep .ant-pagination-item-active a {
+    color: #fff !important;
+
+}
+
+.grid-pagination ::ng-deep .ant-pagination-next button,
+
+.ant-pagination-prev button {
+    color: #74FAFB;
+    border-color: #74FAFB;
+}
+
+.grid-pagination ::ng-deep .ant-pagination-item-active:focus-visible,
+.ant-pagination-item-active:hover,
+
+.ant-pagination-next:hover button,
+.ant-pagination-prev:hover button {
+    border-color: #74FAFB;
+}
+
+.grid-pagination ::ng-deep .ant-pagination-item-active {
+    font-weight: 500;
+    background-color: #74FAFB;
+    border-color: #74FAFB;
+}
+
+
+
+.ag-theme-datav ::ng-deep .ag-row-selected .ag-ltr .ag-cell {
     color: red !important;
- 
-  }
+}
 
-//   选中样式
+//   选中行样式
 .ag-theme-datav ::ng-deep .ag-ltr .ag-row-focus {
-    color: red ;
+    font-weight: 600;
+    color: red;
 
-    .ag-cell-focus{
+    .ag-cell-focus {
         border: #74FAFB;
     }
 
-    .ag-grid-button-style{
+    .ag-grid-button-style {
         color: red;
+        border-color: red;
     }
 }
- 
 
 
-  
+
+
 .ag-theme-datav {
     --ag-border-color: #74FAFB;
     --ag-foreground-color: #74FAFB;
@@ -54,14 +132,27 @@
     --ag-header-column-resize-handle-color: rgb(126 46 132);
     --ag-font-size: 17px;
     --ag-font-family: monospace;
+    //竖线颜色
+
 
     height: 17rem;
-    &:extend(.ag-theme-material); 
+    &:extend(.ag-theme-material);
+
+    //标题间的 竖线
+    ::ng-deep .ag-header-cell-resize {
+        --ag-header-column-resize-handle-color: #74FAFB;
+
+    }
+
+    //外边框去掉圆角
+    ::ng-deep .ag-root-wrapper {
+        border-radius: 0;
+    }
 }
 
 /* 设置滚动条的宽度 */
 .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar {
-    width: 12px;
+    width: 12em;
 }
 
 /* 设置滚动条滑块的样式 */
@@ -77,14 +168,14 @@
     /* 滚动条滑块的边框 */
 }
 
- 
+
 
 /* 设置滚动条轨道的样式 */
 .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-track {
     background-color: yellow;
 
-   
-    
+
+
     /* 滚动条轨道的背景颜色 */
 }
 

src/app/routes/data-v/workstation/workstation.component.ts

@@ -1,6 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
-import { STColumn, STComponent } from '@delon/abc/st';
-import { SFSchema } from '@delon/form';
+import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 import { ModalHelper, _HttpClient } from '@delon/theme';
 import { SHARED_IMPORTS } from '@shared';
 import { AgGridAngular } from 'ag-grid-angular'; // AG Grid Component
@@ -14,7 +13,7 @@ import {
 @Component({
   selector: 'app-data-v-workstation',
   standalone: true,
-  imports: [AgGridAngular, DataVCardComponent, GridButtonValueRenderer, DataVTitleComponent, ...SHARED_IMPORTS],
+  imports: [AgGridAngular, NzPaginationModule, DataVCardComponent, GridButtonValueRenderer, DataVTitleComponent, ...SHARED_IMPORTS],
   templateUrl: './workstation.component.html',
   styleUrls: ['./workstation.component.less']
 })
@@ -22,13 +21,15 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit {
   private readonly http = inject(_HttpClient);
   private readonly modal = inject(ModalHelper);
   private readonly elementRef = inject(ElementRef);
-  private gridApi!: GridApi;
+
+  @ViewChild('myGrid') grid!: AgGridAngular;
   public defaultColDef: ColDef = {
     width: 130,
     editable: false,
   };
-  dataSet: any;
-
+  public pageSize!: number;
+  public pageIndex!: number;
+  public pageTotal!: number;
   rowData = [
     {
       rwmc: "任务1", rwms: "任务描述1", kssj: "2024-1-1", jhwcsj: "2024-1-2", sfcq: '否', dqzt: "正常", dqjd: "节点1", sjwcsj: "2024-1-2",
@@ -152,11 +153,14 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit {
     { headerName: '通知名称', unSortIcon: true, field: "tzmc", },
     { headerName: '通知内容', unSortIcon: true, field: "tznr", },
     { headerName: '附件', field: "fj", },
-    { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, },
+    { headerName: '操作', autoHeight: true, width: 70, field: "cz", cellRenderer: GridButtonValueRenderer, },
   ];
 
   ngOnInit(): void {
-    console.log('ngOnInit');
+    console.log('ngOnInit' + this.rowData.length);
+    this.pageSize = 10;
+    this.pageIndex = 1;
+    this.pageTotal = this.rowData.length;
     // this.gridApi.addEventListener("resize", (event: any) => {
     //   console.log("addEventListener");
     // });
@@ -177,9 +181,31 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit {
     //   .createStatic(FormEditComponent, { i: { id: 0 } })
     //   .subscribe(() => this.st.reload());
   }
+  //每页数
+  nzPageSizeChange(PageSize: any) {
+    this.pageSize = PageSize;
+
+  }
+  //当前页
+  nzPageIndexChange(PageIndex: any) {
+    console.log("nzPageIndexChange" + PageIndex)
+    if (this.grid.api) {
+      if (PageIndex == 1) {
+        console.log("first" + PageIndex)
+        this.grid.api.paginationGoToFirstPage();
+      } else {
+        this.grid.api.paginationGoToPage(PageIndex);
+      }
+    }
+  }
   //页面尺寸改变
   onPaginationChanged($event: any) {
     console.log('onPaginationChanged{}');
+    //每页数
+    var pageSize = this.grid.api.paginationGetPageSize();
+    //当前页
+    var CurrentPage = this.grid.api.paginationGetCurrentPage() + 1;
+    var TotalPages = this.grid.api.paginationGetTotalPages();
 
   }
 }