AG-Grid React UI的一些常见问题及解决方法

2022-02-13

AG-Grid号称是“世界上最好的JavaScript网格”。

目前，最新版本已经完全纯正支持React，与原版功能使用上有细微差别，盘点一些上手时遇到的问题，版本基于：

"ag-grid-community": "^26.2.1",
"ag-grid-react": "^26.2.0",

1.单元格编辑器cellEditorPopup，弹出上层

https://www.ag-grid.com/react-data-grid/reactui/

新版React UI单元格编辑器默认内嵌，需要手动设置弹出类型。

<AgGridColumn>
cellEditorPopup={ true }
cellEditorPopupPosition="over"
{ ... }
</AgGridColumn>

2.Error: add.map is not a function

注意参数 add 类型是数组或null，不是Object。

interface RowDataTransaction {
  // Index to add rows 
  addIndex?: number | null;
  // Rows to add 
  add?: any[] | null;
  // Rows to remove 
  remove?: any[] | null;
  // Rows to update 
  update?: any[] | null;
}

3.修改单元格编辑器高度

需要同时修改行高和框高。

<AgGridColumn>
cellStyle={{ lineHeight: '35px', height: '35px' }}
{ ... }
</AgGridColumn>

4.设置单元格编辑自动失去焦点

默认情况下，在单元格失去焦点时不会停止编辑当前的单元格，除非单击另一个单元格。

用stopEditingWhenCellsLoseFocus可以设置失焦。

<AgGridReact
    stopEditingWhenCellsLoseFocus={true}
    { ... }
    >
</AgGridReact>

5.自定义禁止编辑单个或多个单元格

列属性editable，有两种类型：boolean | EditableCallback。

EditableCallback自由度很高，能控制所有单元格各自的可编辑性。

const editableCallback = params => {
    // 自定义禁止逻辑
    // if (params.column.colId === 'id') return false;
    return false;
}

<AgGridColumn>
    editable={ editableCallback }
{ ... }
</AgGridColumn>

（版权归cpury.com所有，转载请注明出处。）

WEB开发