Question

我在我的React代码中使用了AGGrid，并且某些列标题文本太长，因此当它们显示时，我无法读取整个列标题，但是我看到的却很少... 有没有一种方法可以将标题文本包装到下一行而不增加整个列的宽度？我尝试使用setHEaderHeight。不会将文本换行到下一行。

type Props = {
    comDto:CompDTO;
}
type State = {
}

const componentCssClass = componentStyle(`
    
    .ag-cell.fullText {
        white-space: normal;
        word-break: normal;
        line-height: 1.4em;
        padding-top: 4px;
        padding-bottom: 4px;
    }      
`);

export class CompGrid extends React.PureComponent<Props, State> {

    static compCols: Array<ColDef> = [
        {headerName: 'Market', field: 'marketType.marketName', width: 250},
        {headerName: 'My Role', field: 'myConfirmationRole', width: 150},
        {headerName: 'CP Matching', field: 'partyMatchingRole', width: 150},
        {headerName: 'BR Matching', field: 'MatchingRole', width: 150},
        {headerName: 'Reg Role', field: 'usRegRole', width: 150},
        {headerName: 'Create USIs on My Behalf', field: 'createUSIOnBehalf',
            cellRenderer: 'renderer_complistcheckbox'},
        {headerName: 'Voluntarily Report to MY Company', field: 'voluntaryReport', 
            cellRenderer: 'renderer_complistcheckbox'},
        {headerName: 'Use VICE DCO Valuation', field: 'useDCOValuations', width: 200,
            cellRenderer: 'renderer_comlistcheckbox'},
    ];

    private static gridComponents = {
        'renderer_complistcheckbox': CellRenderer_ReadOnlyCheckbox
    };

    render(){
        const {compDto} = this.props;
        return (
            <div className={cx(flexAgGridContainerCss, componentCssClass)}>
                <AgDataGrid
                    frameworkComponents={ComGrid.gridComponents}
                    columnDefs={CompGrid.compCols}
                    suppressMovableColumns
                    suppressCellSelection
                    suppressRowHoverHighlight
                    rowData={compDto.marketRoles}
                    onGridReady={CompGrid.onGridReady}
                    onGridSizeChanged={CompGrid.onGridSizeChanged}
                    onColumnResized={CompGrid.onColumnResized}
                />
            </div>

        );
    }

    private static onGridReady(params) {
        const gridApi = params.api;
        gridApi.setHeaderHeight(30);
        gridApi.sizeColumnsToFit(); // for * size columns
    }

    private static onGridSizeChanged(params) {
        const gridApi = params.api;

        gridApi.sizeColumnsToFit(); // for * size columns
    }

    private static onColumnResized(params) {
        const gridApi = params.api;

        gridApi.resetRowHeights();  // for autoHeight...
    }


}

谢谢

Answer 1

据我了解，您正在寻找autoSizeColumn()。

.
.
let ColumnApi;
.
.
onGridReady= (gridApi, columnApi ) => {
    gridApi.setHeaderHeight(30);
    gridApi.sizeColumnsToFit();
    ColumnApi = columnApi;
    this.autoSizeColumn();
};

autoSizeColumn = () => {
    let allcolumn = [];
    ColumnApi.getAllColumns().forEach((column) => {
        allcolumn.push(column.colId);
    });
    ColumnApi.autoSizeColumns(allcolumn);
}

您可以在添加行的地方调用此autoSizeColumn ();。它基本上重新排列了具有最大宽度的行的列标题大小，从而使您的列标题大小成为可能。

注意：autoSizeColumn函数不会更改页面中不可见的列标题。

有关更多信息和文档，您可以检查this链接

如何处理大列标题以换行

1 个答案: