ag-grid 如何通過反應設置動態 header 高度

Question

這是 ag-grid https://www.ag-grid.com/javascript-grid/column-headers/中的示例

function setHeaderHeight(value) {
  gridOptions.api.setHeaderHeight(value); // set as null to remove heights.
  setIdText('headerHeight', value);
}

在我准備好的網格上的反應應用程序中

params =  
{type: "gridReady", api: GridApi, columnApi: ColumnApi}
api: GridApi
aggFuncService: null
alignedGridsService: AlignedGridsService {destroyFunctions: Array(6), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
animationFrameService: AnimationFrameService {destroyFunctions: Array(0), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
chartService: null
clientSideRowModel: ClientSideRowModel {destroyFunctions: Array(10), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
clipboardService: null
columnController: ColumnController {destroyFunctions: Array(1), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
context: Context {beanWrappers: {…}, destroyed: false, contextParams: {…}, logger: Logger}
contextMenuFactory: null
controllersService: ControllersService {destroyFunctions: Array(0), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
csvCreator: CsvCreator {columnController: ColumnController, valueService: ValueService, gridSerializer: GridSerializer, gridOptionsWrapper: GridOptionsWrapper, beans: {…}}
destroyCalled: false
detailGridInfoMap: {}
dragAndDropService: DragAndDropService {destroyFunctions: Array(0), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
eventService: EventService {allSyncListeners: Map(38), allAsyncListeners: Map(0), globalSyncListeners: Set(0), globalAsyncListeners: Set(1), asyncFunctionsQueue: Array(0), …}
excelCreator: null
filterManager: FilterManager {destroyFunctions: Array(2), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
focusController: FocusController {destroyFunctions: Array(5), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
gridBodyComp: GridBodyComp {destroyFunctions: Array(23), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
gridBodyCon: GridBodyController {destroyFunctions: Array(9), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
gridCompController: GridCompController {destroyFunctions: Array(4), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
gridOptionsWrapper: GridOptionsWrapper {propertyEventService: EventService, domDataKey: "__AG_0.8817246002736534", destroyed: false, gridOptions: {…}, columnController: ColumnController, …}
headerRootComp: HeaderRootComp {destroyFunctions: Array(18), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
headlessService: null
immutableService: ImmutableService {destroyFunctions: Array(0), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
menuFactory: StandardMenuFactory {destroyFunctions: Array(0), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
overlayWrapperComp: OverlayWrapperComponent {destroyFunctions: Array(4), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
paginationProxy: PaginationProxy {destroyFunctions: Array(2), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
pinnedRowModel: PinnedRowModel {destroyFunctions: Array(0), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
rangeController: null
rowModel: ClientSideRowModel {destroyFunctions: Array(10), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
rowNodeBlockLoader: RowNodeBlockLoader {destroyFunctions: Array(0), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
rowRenderer: RowRenderer {destroyFunctions: Array(13), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
selectionController: SelectionController {destroyFunctions: Array(2), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
serverSideTransactionManager: null
sortController: SortController {destroyFunctions: Array(0), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
statusBarService: null
undoRedoService: UndoRedoService {destroyFunctions: Array(0), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
valueCache: ValueCache {destroyFunctions: Array(0), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
valueService: ValueService {destroyFunctions: Array(0), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
__proto__: Object
columnApi: ColumnApi
columnController: ColumnController {destroyFunctions: Array(1), destroyed: false, __v_skip: true, getContext: ƒ, isAlive: ƒ, …}
__proto__: Object
type: "gridReady"

沒有方法 - setHeaderHeight 我在哪里可以訪問此方法？

Answer 1

您可以設置網格屬性 domLayout='autoHeight'

https://www.ag-grid.com/react-grid/grid-size/

Answer 2

好吧，事實證明我錯了。 該方法確實存在：

console.log('gridOptions.api = ', gridOptions.api.setHeaderHeight);

我通過記錄整個 object 看不到它的原因是因為無論出於何種原因做出決定，它都不可枚舉？ 這剛剛暴露了 ag-grid 中的一個缺陷，因為關鍵功能沒有暴露出來，並且 object 中有很多噪音。

怎么知道哪些功能應該是公開的？

console.log('gridOptions.api = ',gridOptions.api);

我無法將其轉換為 json 因為存在循環依賴，這會導致錯誤

console.log('JSON.stringify(gridOptions.api) = ',JSON.stringify(gridOptions.api));

但是，我可以通過這種方式記錄其密鑰。

for (key in gridOptions.api) {
   console.log('key = ', key);
 }

唯一的問題 - 將其設置為 null 時它沒有做任何事情