AG Grid rowDrag 被拖动的行占据整个屏幕宽度

Posted 2023-02-18

【中文标题】AG Grid rowDrag 被拖动的行占据整个屏幕宽度

【英文标题】：AG Grid rowDrag Rows being dragged takes up full width of screen

【发布时间】：2021-08-24 15:06:40

【问题描述】：

我有一个导入的表，其 scss 宽度为 100%。表格大小由 div 控制。当在该表中启用 rowdrag 并拖动一行时，该行将变为屏幕的全宽。如果我将 AG Grids scss 更改为更小的溢出：隐藏它会变得更短一些，但仍然比网格本身宽得多。 不确定在此处添加什么代码有帮助。这是我导入的农业网格。拖动正在工作，只是看起来有点糟糕。

function AgGridClientSide( handleRowSelection, data, handleCellEdited, tableColumnDef, rowHeight, onGridReady ) 
const gridOptions = 
    columnDefs: tableColumnDef,
    rowSelection: 'single',
    rowHeight,
    onCellValueChanged(params) 
        handleCellEdited(params);
    ,
;

return (
    <div className="ag-theme-material">
        <AgGridReact
            gridOptions=gridOptions
            rowData=data
            onGridReady=onGridReady
            onRowClicked=current => handleRowSelection(current)
            suppressCellSelection
            suppressNoRowsOverlay
            rowDragManaged
            animateRows
        />
    </div>
);

【参考方案1】：

这只是一个快速修复。 您可以使用以下方法分配宽度 css 属性：

.ag-dnd-ghost.ag-unselectable.ag-theme-alpine 
    width: 100px;