ag-grid 相关问题

ag-Grid是一个客户端JavaScript网格，旨在与框架无关。它不依赖于任何框架，允许它与任何框架轻松集成。使用此标记可以解决与ag-Grid配置及其与其他工具集成问题相关的问题。

如何等待 vue-test-utils 中已安装组件的发出事件

假设我有一个 vue 组件，它在准备好时发出一个事件（例如 AG Grid）：我怎么能等到这个事件发生...

vue.js jestjs ag-grid vue-test-utils vitest

回答 1 投票 0

带有迷你图的Ag网格树？

我正在尝试在 ag-grid 的树上使用迷你图。有没有办法做到这一点？ aggFunc 被调用，但结果似乎没有被使用。我也尝试在树本身上设置值，但是......

ag-grid ag-grid-vue

回答 1 投票 0

AG-Grid：使用 ngx-translate（角度）翻译 headerName

我们正在使用 Angular 来可视化 AG 网格。我们希望将农业网格的标题翻译成用户的语言。农业网格代码：我们正在使用 Angular 来可视化 AG 网格。我们希望将农业网格的标题翻译成用户的语言。 Ag网格代码： <ag-grid-angular class="ag-theme-material" [rowData]="productionOrders"> <ag-grid-column [headerName]="'ORDERS.GRID.EntryCode' | translate" field="entry"></ag-grid-column> <ag-grid-column [headerName]="ORDERS.GRID.EntryDescription" field="entryDescription"></ag-grid-column> </ag-grid-angular> 我们可以用同样的方式翻译 html 页面本身的值： <span>{{ 'ORDERS.Status' | translate}}</span> 我注意到，当加载翻译时，ag grid 不会注意到翻译何时加载。然而，html 页面本身的值会被翻译。额外信息：ngx-translate 的翻译管道是一个“不纯”管道，这意味着它的值可以改变（例如，当加载所有翻译时）同样，当使用没有翻译的 headerName 时，它不会更新： Ag网格代码： <ag-grid-angular class="ag-theme-material" [rowData]="productionOrders"> <ag-grid-column [headerName]="bindedString" field="entry"></ag-grid-column> </ag-grid-angular> this.lazyString = 'test-1'; setTimeout(() => { this.lazyString = 'test-2'; }, 3000); 标头名称永远不会更新为“test-2” 演示.component.html <ag-grid-angular style="width: 100%; height: 100%;" class="ag-theme-material" [rowData]="rowData" [columnDefs]="columnDefs" (gridReady)="onGridReady($event)" [pagination]="true"> </ag-grid-angular> 演示.组件.ts import { Component } from '@angular/core'; import { ColDef, GridApi } from 'ag-grid-community'; import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'app-demo', templateUrl: './demo.component.html', styleUrls: ['./demo.component.scss'] }) export class DemoComponent { private gridApi: GridApi = null; public columnDefs: ColDef[] = [ { headerName: "Code", field: 'code', sortable: true, resizable: true, headerValueGetter: this.localizeHeader.bind(this) }, { headerName: 'Version', field: 'version', sortable: true, resizable: true, headerValueGetter: this.localizeHeader.bind(this) }, { headerName: 'IsEnabled', field: 'isEnabled', sortable: true, resizable: true, headerValueGetter: this.localizeHeader.bind(this) } ]; public rowData: any[] = []; constructor(private translateService: TranslateService) { this.translateService.onLangChange.subscribe(() => { this.gridApi.refreshHeader(); }) } public onGridReady(parameters: any): void { this.gridApi = parameters.api; } public localizeHeader(parameters: ICellRendererParams): string { let headerIdentifier = parameters.colDef.field; return this.translateService.instant(headerIdentifier); } } 标头值获取器使用 headerValueGetter 而不是 colDef.headerName 来允许动态标头名称。 private translator: TranslateService; ... colDef.headerValueGetter : this.localizeHeader.bind(this) .... localizeHeader(params){ let headerIdentifier = params.colDef.field; // params.column.getColId(); this.translator.get(headerIdentifier).map((res: string) => { return res; }); } 文档样本 { headerName: "Country", field: "country", width: 120, enableRowGroup: true, enablePivot: true, headerValueGetter: countryHeaderValueGetter }, function countryHeaderValueGetter(params) { switch (params.location) { case 'csv': return 'CSV Country'; case 'clipboard': return 'CLIP Country'; case 'toolPanel': return 'TP Country'; case 'columnDrop': return 'CD Country'; case 'header': return 'H Country'; default: return 'Should never happen!'; } } 如果您想使用 TurboYang 的解决方案进行异步翻译加载，只需添加以下内容： private destroy = new Subject<void>(); constructor(private toastService: ToastService, private translate: TranslateService) { translate.onLangChange.pipe(takeUntil(this.destroy)).subscribe(() => { this.gridApi.refreshHeader(); }); translate.onDefaultLangChange.pipe(takeUntil(this.destroy)).subscribe(() => { this.gridApi.refreshHeader(); }); } ngOnDestroy(): void { this.destroy.next(); this.destroy.complete(); } 服务中的功能 getTr(key: string) { return this.translate.instant(key); } ColumnDef 中的用法 { field: 'name', headerName: this.trService.getTr('NAME') }, 另一个简单的解决方案，从上面的参考文献中对我有用 columDef = [ { field: 'firstname', headerValueGetter: () => translate.instant('fname') // fname is the translation key }, { field: 'lastname', headerValueGetter: () => translate.instant('lname') }, ] ngOnInit() { this.translate.onLangChange.pipe(takeUntil(this.destroy)).subscribe(() => { this.gridApi.refreshHeader(); }); }

angular typescript ag-grid

回答 5 投票 0

如何禁用ag-grid中的整个列

我想根据该列包含 onCellClicked 事件的特定条件禁用整个列，但我不希望它触发

angularjs ag-grid

回答 2 投票 0

禁用 Ag-grid 中的复选框选择

是否可以通过保留使用某些约束呈现的某些选定行来禁用复选框选择？我不想允许用户取消选择渲染时选择的行。我...

javascript reactjs ag-grid

回答 9 投票 0

无限滚动的AG网格SSRM树数据

我有一个用例，我需要使用 treeData 和 rowModelType: "serverSide" 与 AG Grid React 渲染数百万行。 AG Grid是否支持服务器端treeData无限滚动...