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 时它没有做任何事情