Question

我正在尝试使用带有可排序和可过滤列的ag-grid实现网格。箭头和搜索字段显示出来，但是它们什么也不做。

首先，我在标签和defaultColDefs中启用了排序和过滤选项。这没有用，所以我在要排序的列中分别设置了可排序。之后，我尝试编写一个比较器。这些选项都不起作用。

注意：正在从JSON中加载数据

这是HTML：

 <ag-grid-angular 
      style="width: 100%; height: 800px;" 
      id="myGrid"
      class="ag-theme-balham"
      [enableSorting] = "true"
      [enableFilter] = "true"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [components]="components"
      [rowBuffer]="rowBuffer"
      [rowSelection]="rowSelection"
      [rowDeselection]="true"
      [rowModelType]="rowModelType"
      [paginationPageSize]="paginationPageSize"
      [cacheOverflowSize]="cacheOverflowSize"
      [maxConcurrentDatasourceRequests]="maxConcurrentDatasourceRequests"
      [infiniteInitialRowCount]="infiniteInitialRowCount"
      [maxBlocksInCache]="maxBlocksInCache"
      [rowData]="rowData"
      [animateRows] = "true"
      (gridReady)="onGridReady($event)"
    >
    </ag-grid-angular>

这是我组件的基本的ag-grid版本：

import { Component, OnInit } from '@angular/core';
import { DataService } from 'app/data-service';
import { Grid, GridOptionsWrapper, GridApi } from 'ag-grid-community';

@Component({
  selector: 'app-grid-form',
  templateUrl: './grid-form.component.html',
  styleUrls: ['./grid-form.component.css']
})
export class GridFormComponent implements OnInit {



//grid variables
  private title: string;
  private columnDefs;
  private defaultColDef;
  private rowData;
  private gridApi;
  private gridColumnApi;
  private components;
  private rowBuffer;
  private rowSelection;
  private rowModelType;
  private paginationPageSize;
  private cacheOverflowSize;
  private maxConcurrentDatasourceRequests;
  private infiniteInitialRowCount;
  private maxBlocksInCache;
  private currentDate:Date;
  private sortingOrder;

 ngOnInit() {
 this.defaultColDef = { 
      sortable: true,
      resizable: true,
      filter: true,
    };
    this.components = {
      loadingRenderer: function(params) {
        if (params.value !== undefined) {
          return params.value;
        } else {
          return '<img src="../images/loading.gif">';
        }
      }
    };
    this.rowBuffer = 0;
    this.rowSelection = "multiple";
    this.rowModelType = "infinite";
    this.paginationPageSize = 100;
    this.cacheOverflowSize = 2;
    this.maxConcurrentDatasourceRequests = 1;
    this.infiniteInitialRowCount = 1000;
    this.maxBlocksInCache = 10;
    this.title = 'User Report Grid'
    this.columnDefs = [

      {
        headerName: "NUM User",
        field: "numUser",
        width: 50
        },
      {
        headerName: "ID Customer",
        field: "idCustomer",
        width: 150,
        sortable: true,
      },
      {
        headerName: "ID Event",
        field: "eventId",
        width: 100,
        filter: "agTextColumnFilter",
        sortingOrder:["asc", "desc"]
     },
    ];


  }

onGridReady(params){
    this.loadGrid(params);
  }

  private loadGrid(params){
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;


    this.dataService.getGridData(this.resourcePath, this.paramets).subscribe(
      data =>{
        var dataSource = {
          rowCount: null,
          getRows: function(params){
            setTimeout(function(){
              var rowsThisPage = data.slice(params.startRow, params.endRow);
              var lastRow = -1;
              if(data.length <= params.endRow){
                lastRow = data.length;
              }
              this.caller = params.successCallback(rowsThisPage, lastRow);
            }, 500);
          }
        };
        params.api.setDatasource(dataSource);
      }
    );
  }

更奇怪的是，箭头和搜索选项确实存在于网格中。只是使用它们不会以任何方式更改网格。

非常感谢您的帮助，因为我不明白为什么会这样，并且已经回答的问题和论坛都没有帮助。谢谢。

Answer 1

问题在于，即使在客户端，无限滚动也不支持任何这些额外功能。将模型更改为客户端并添加分页可解决我的问题。

我在Ag-Grid中启用了排序和过滤，Grid以图形方式向我显示了这些选项，但是它们不起作用

1 个答案: