反应 ag-grid 行自动高度不起作用

Posted 2023-02-21

【中文标题】反应 ag-grid 行自动高度不起作用

【英文标题】：React ag-grid row auto height doesn't work

【发布时间】：2021-04-07 15:51:51

【问题描述】：

我试图实现此处文档中描述的行自动高度功能：

https://www.ag-grid.com/javascript-grid-row-height/#auto-row-height

但是在我的情况下它似乎不起作用。对我来说发生的事情是文本根本不换行，它只是为每一行创建一个长行。

我已尝试尽可能地调整代码以适应我自己的应用程序，但也许我错过了什么？如果您能查看我的代码并告诉我是否缺少某些内容，我将不胜感激：

const defaultColDefProperties = 
    flex: 1,
    editable: true,
    resizable: true,
    floatingFilter: true,
    filter: true,
    wrapText: true,
    autoHeight: true,
  ;

const columnDefinition = [headerName: "Key", field: "Key",
                          headerName: "Value", field: "Value"];

const ConfigurationDataGrid = (props) =>
                                                                           
    const [gridRowData, setGridRowData] = useState([]);  
    const gridApi = useRef(null);
    
    useEffect(async () =>
    
      const getRowData = async () =>
      
        let rowData = await WebApi.getRowData();     
        setGridRowData(rowData);   
      
      await getRowData();
    ,[]);

    const onGridReady = params => 
    
      gridApi.current = params.api;
    

    const onColumnResized = (params) => 
    
      params.api.resetRowHeights();
    
  
    const onColumnVisible = (params) => 
    
      params.api.resetRowHeights();
    

    return (
          <div style= width: '100%', height: '100%' >
              <UxDataGrid 
                id='datagrid' 
                className='custom-datagrid' 
                onGridReady=onGridReady
                columnDefs=columnDefinition 
                rowData=gridRowData 
                defaultColDef=defaultColDefProperties
                onColumnResized=onColumnResized
                onColumnVisible=onColumnVisible/>
          </div>
  );

css 类：

    .custom-datagrid 
    height: 100%;
    border: 0px;
    margin-top: 0px !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
  

我错过了什么？

【问题讨论】：

我没有看到 AgGridReact 组件从您导入的UxDataGrid 组件中使用，您可以分享minimal working example。

我试图重现 stackblitz.com/edit/… ，但无法重现。 UxDataGrid 是 AgGrid 之上的组件包装器，如果是，请分享代码，也请分享 CSS 类 'custom-datagrid'。

@Chandan 这个 UxDataGrid 是 ag-grid 的包装器。我没有成功，我也没有它的代码。把它想象成一个普通的 ag-grid

@Sam 我已经添加了 css 类。我无权访问 UxDataGrid 类，就像你说的 ag-grid 的包装器

@YonatanNir 感谢您的快速回复。根据我的经验，它看起来 defaultColDef 正在传递给底层的 AG 网格。您需要查看 UXGrid 文档，了解如何传递这些信息。可能是通过gridOption属性。(ag-grid.com/javascript-grid-column-definitions)

【参考方案1】：

在我的情况下，我有 ra-ui-grid 它与您的组件相同 - UxDataGrid

在ra-ui-grid里面我有下一个定义：

.html:

<ag-grid-angular
    class="ag-theme-balham grid"
    ...
></ag-grid-angular>

.ts:

        defaultColDef: 
            flex: 1,
            ...
        ,

.scss:

    ra-ui-grid 
        height: 100%;
        display: flex;
        flex-flow: column nowrap;


        .grid 
            height: 100%;
         

然后在某些组件中，我使用带有 2 个包装器的 ra-ui-grid

.html

    <div class="io">
        <div class="io__table">
            <ra-ui-grid
                [data]="data"
                [config]="gridConfig"
                [columns]="columnDefs"
                (onPaginationChanged)="paginationChanged.next($event)"
            ></ra-ui-grid>
        </div>
</div>

.scss:

        .io 
            height: calc(100% - 36px);
            display: flex;
            flex-direction: column;

            &__table 
                flex: 1;
                min-height: 254px;
            
        

【讨论】：

确实是容器本身 UxDataGrid 而不是我制作的代码