ag-grid 如何使用反应设置动态标题高度 [英] ag-grid how to set dynamic header height with react

问题描述

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

This is the example in 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);
}

在我准备好网格的反应应用程序中

In my react applications on grid ready

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我在哪里可以访问此方法?

there is no method - setHeaderHeight Where can I access this method?

推荐答案

好吧，事实证明我错了.该方法确实存在:

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

我无法通过记录整个对象看到它的原因是因为无论出于何种原因做出决定，它都不可枚举?这刚刚暴露了 ag-grid 中的一个缺陷，因为关键功能没有暴露，并且该对象中有很多噪音.

如何知道哪些功能应该是公开的?

How would one know what functions are supposed to be public?

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

我无法将其转换为 json，因为存在循环依赖，这会导致错误

I cannot convert it to json because there is a circular dependency and this results in an errror

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

不过，我可以通过这种方式记录其密钥.

I can log its keys this way however.

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

这篇关于ag-grid 如何使用反应设置动态标题高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！