Question

是否有可用于ag-grid列调整大小的回调。

我找不到任何与列调整大小调用相关的文档。

示例代码：

var columnResized = function(params){
console.log(params);
};

gridOptions.columnResized = columnResized;
var myAgGrid = new agGrid.Grid(eGridDiv,gridOptions);

Answer 1

使用onColumnResized代替columnResized

示例：https://www.ag-grid.com/javascript-grid-resizing/#gsc.tab=0

Answer 2

网格名称：ag-grid

列大小调整事件： 我们可以通过 columnResized 获取列大小调整事件，如下所示。

<ag-grid-angular
        class="ag-theme-alpine ag-grid-container-full"
        [rowData]="rowData"
        [columnDefs]="columnDefs"
        (gridReady)="onGridReady($event)"
        (columnResized)="onColumnResize($event)"  //  <-----
      >

在.ts文件中因为resize事件会触发多次，所以我们使用setTimeout充当反跳效果来处理该问题。

   public setTimeInstance = null;

  onColumnResize(event) {

    if (this.setTimeInstance) clearTimeout(this.setTimeInstance);

    this.setTimeInstance = setTimeout(() => {

      let newColumnState = this.columnApi.getColumnState();

      this.someActivity();  // Do some activity  like storing

      clearTimeout(this.setTimeInstance);


    }, 1000); // after one seconds

  }

Answer 3

有一个内置参数告诉您所有事件何时完成。感谢@JobayerAhmmed 的回答。

onColumnResized(params) {
  if (params.source === 'uiColumnDragged' && params.finished) {
    this.gridApi.sizeColumnsToFit();
  }
}

<ag-grid-angular 
  #agGrid
  style="width: 100%; height: 100%;"
  class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [rowData]="rowData"
  (gridReady)="onGridReady($event)"
  (columnResized)="onColumnResized($event)">
</ag-grid-angular>

回调列调整大小

3 个答案: