时间戳

首页 > 解决方案 > 使用角度在 slickgrid 中的 cellclick 事件上应用分页

angular - 使用角度在 slickgrid 中的 cellclick 事件上应用分页

问题描述

页面 onload slickgrid 已加载并且分页正在工作，但在单元格上单击 slick 网格数据集值已更新（添加了新数据）但分页值未更新（未更新分页）。如何在点击事件上再次应用分页。backendServiceApi 不更新更新的项目计数。如何使用更新的数据再次调用 backendServiceApi。我正在使用带有后端服务器 odata 方法的分页。

标签： angulartypescriptslickgrid

解决方案

您的问题确实缺少详细信息，但是如果您想在单击单元格后更改页面（分页）。您现在可以通过PaginationService我最近添加到库中的新功能来完成它。在代码中

<angular-slickgrid 
    gridId="grid5" 
    [columnDefinitions]="columnDefinitions" 
    [gridOptions]="gridOptions"
    [dataset]="dataset" 
    (onGridStateChanged)="gridStateChanged($event)"
    (onAngularGridCreated)="angularGridReady($event)">
</angular-slickgrid>

然后在你的组件中

export class MyExample implements OnInit {
  angularGrid: AngularGridInstance;
  columnDefinitions: Column[];
  gridOptions: GridOption;
  dataset = [];

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
  }

  defineGrid() {
    this.columnDefinitions = [
      {
        id: 'action', name: 'Action', field: 'action',  
        onCellClick: (e, args) => {
          // maybe do something with args or args.dataContext?
          this.goToPageNumber(2);
        },
      },
    ];
  }

  goToPageNumber(page: number) {
    this.angularGrid.paginationService.goToPageNumber(page);
  }

  goToFirstPage() {
    this.angularGrid.paginationService.goToFirstPage();
  }

  goToLastPage() {
    this.angularGrid.paginationService.goToLastPage();
  }
}

如果您希望在单击的任何列或单元格上执行此操作，您可以(sgOnClick)="onCellClicked($event.detail.eventData, $event.detail.args)"在您的视图中使用，然后在您的组件中使用onCellClicked(e, args) { ... }

但这可能不是您要的，同样您的问题缺少实质内容。请为您的问题提供更多详细信息并添加代码。你到底有什么问题？另请注意，分页仅适用于BackendServiceApiOData 或 GraphQL（甚至是自定义的）。

哦，如果你没有注意到，我是 Angular-Slickgrid 的作者。

推荐阅读