Question

我正在尝试在angular 7应用程序中的ag-grid上修复列大小的问题。我一直在尝试按照建议的几种方法，但没有得到解决方案。我正在寻找的是列应该自动调整大小并采用屏幕的宽度。在这一刻首次渲染时，最后一列会稍微隐藏。我遇到的第二个问题是，当我从另一个组件导航到此页面时，用数据重新加载网格时，网格宽度急剧变化。

我也尝试在每列上添加resize属性，并设置了defineSizeToFit：false（定义了min-width和maxWidth）。

初始负载

从另一个组件导航时重新加载网格

html

    <div class="form-group row">
      <div class="panel panel-default col-md-12">
        <div *ngIf="AllocationDetails && AllocationDetails.ManagerAllocations" class="panel-body">
          <div [style.height.px]="GridHeight()" [style.width.%]="100" style="float: left;">
            <span style="text-decoration: underline; cursor: pointer;padding-right: 10px;"><a (click)="expandAll()">Expand
                All</a></span>
            <span style="text-decoration: underline; cursor: pointer;"><a (click)="collapseAll()">Collapse
                All</a></span>
            <ag-grid-angular #agGrid class="ag-theme-balham" [gridOptions]="GridOptions" style="width: 100%; height: 100%"
              [columnDefs]="ColumnDefs" [rowData]="AllocationDetails.ManagerAllocations" rowHeight="30" headerHeight="30"
              rowSelection="single" [pinnedBottomRowData]="pinnedBottomRowData"
              [frameworkComponents]="frameworkComponents">
            </ag-grid-angular>
          </div>

        </div>
      </div>
    </div>

组件

    export class AllocationsComponent implements OnInit {


      constructor(private allocationsService: AllocationsService, private comparator: Comparator,
            private zone: NgZone, private route: ActivatedRoute, private spinner: NgxSpinnerService) {
            this.Comparator = comparator;
            this.Route = route;

            window.onresize = (e) => {
                this.ngZone.run(() => {
                    this.windowHeight = window.innerHeight - this.offset;
                    setTimeout(() => {
                        if (!this.GridOptions || !this.GridOptions.api) {
                            return;
                        }
                        this.GridOptions.api.sizeColumnsToFit();
                    }, 500, true);
                });
            };
        }


        setGridOptions() {
            this.GridOptions = {
                columnDefs: this.getColumns(),
                enableFilter: true,
                treeData: true,
                enableColResize: true,
                animateRows: true,
                groupDefaultExpanded: 1,
                enableSorting: true,
                suppressAggFuncInHeader: false,

                getDataPath: function (data) {
                    return data.Hierarchy;
                },
                onGridReady: e => {
                    if (!e || !e.api) {
                        return;
                    }
                    e.api.sizeColumnsToFit();
                    this.setDefaultSortOrder();
                },
                getRowStyle: (params) => {
                    if (params.node.level === 0) {
                        return { 'background-color': '#FCE7D7' };
                    } else if (params.node.level === 1) {
                        return { 'background-color': '#f4f4f4' };
                    }
                },

                autoGroupColumnDef: {
                    headerName: 'Manager Strategy', width: 300,
                    valueFormatter: uniqueColumn
                },

            };
            function uniqueColumn(params) {
                if (params && params.value != null) {
                const startIndex = params.value.indexOf('#');

                if (startIndex === -1) { return params.value; }

                const endIndex = params.value.length;
                return params.value.replace(params.value.substring(startIndex, endIndex), '');
                }

            }
        }

    ngOnInit() {

            this.evalDate = new Date();
            this.setGridOptions();
            this.getAllocationsDetails(this.FormattedDate(this.evalDate));


        }

         GridHeight() {
            if (!this.windowHeight) {
                this.windowHeight = window.innerHeight - this.offset + 10;
            }
            return this.windowHeight;
        }

         private getColumns(): Array<any> {
            const self = this;
            const columnDefs = new Array<any>();
            // const definition = [
                columnDefs.push({ headerName: 'Date', field: 'EvalDate', hide: true});
            columnDefs.push({ headerName: 'Firm ID', field: 'FirmID', hide: true });
            columnDefs.push({ headerName: 'Manager Strategy ID', field: 'FirmName', hide: true });
            columnDefs.push({ headerName: 'Firm', field: 'ManagerStrategyID', hide: true });
            columnDefs.push({ headerName: 'Manager Strategy', field: 'ManagerStrategyName', hide: true });
            columnDefs.push({ headerName: 'Fund ID', field: 'ManagerFundID', hide: true });
            columnDefs.push({ headerName: 'Fund', field: 'ManagerFundName', hide: true });
            columnDefs.push({ headerName: 'Product Name', field: 'ProductName', hide: true });
            columnDefs.push({
                headerName: 'As Of', field: 'EvalDate',
                cellStyle: { textAlign: 'right' },
                hide: false
                ,  width: 150, minWidth: 200, maxWidth: 300, suppressSizeToFit: false
            });
            columnDefs.push({
                headerName: 'EMV (USD)', field: 'UsdEmv', valueFormatter: this.currencyFormatter, rowGroup: false,
                cellRenderer: 'agGroupCellRenderer',
                aggFunc: 'sum',
                cellStyle: { textAlign: 'right' },
                pinnedRowCellRenderer: "customPinnedRowRenderer", pinnedRowCellRendererParams: { style: { "font-weight": "bold" }}
                ,  resizable :true
            });
            columnDefs.push({
                headerName: '% of Fund Strategy', field: 'GroupPercent', valueFormatter: this.formatPercent, rowGroup: false,
                cellRenderer: 'agGroupCellRenderer',
                aggFunc: 'sum',
                cellStyle: { textAlign: 'right' },
                pinnedRowCellRenderer: "customPinnedRowRenderer", pinnedRowCellRendererParams: { style: { "font-weight": "bold" } }
                ,  width: 150, minWidth: 200, maxWidth: 300, suppressSizeToFit: false
            });
            columnDefs.push({
                headerName: '% of Product', field: 'WeightWithEq',
                valueFormatter: this.formatPercent,
                cellStyle: { textAlign: 'right' }
                ,  width: 150, minWidth: 200, maxWidth: 300, suppressSizeToFit: false
            });



        this.pinnedBottomRowData = this.createData();
        this.frameworkComponents = { customPinnedRowRenderer: CustomPinnedRowRenderer };

        return columnDefs;
    }

    }

Answer 1

这就是你应该做的

在您的HTML上，

<div id="div_grid">
  <ag-grid-angular #grid ...bunch of code here...
                   [enableColResize]="true"
                   (gridReady)="onGridReady($event)"></ag-grid-angular>
</div>

在您的TS上，

private gridApi: GridApi;
constuctor(
  // bunch of code
  private elem: ElementRef,
){
  // bunch of code
}

onGridReady(params) {
    // bunch of code
    this.gridApi = params.api;
    this.sizeColumnsToFit();
}

sizeColumnsToFit() {
    const container = this.elem.nativeElement.querySelectorAll('#div_grid');
    if (container[0] && container[0].clientWidth > this.gridWidth && this.gridApi) {
      this.gridApi.sizeColumnsToFit();
    }
}

在使用columnsdefs时，将值this.gridWidth分配给总列宽。

享受！

ag-grid列不会自动调整角度大小

1 个答案: