Question

我一直在试图将ngx-perfect-scrollbar应用于ag-grid。我可以单独工作，但我想用完美滚动条完全替换数据表上的默认滚动条。

我按照their instructions设置了我的模块：

import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';

const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true
};

@NgModule({
  declarations: [

  ],
  imports: [
    PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG)
  ]
})

并在我的模板中：

<perfect-scrollbar class="psc">
    <ag-grid-angular #agGrid style="width:100%;height:100%" class="ag-dark"
                     [gridOptions]="gridOptions"
                     [rowData]="rowData">
    </ag-grid-angular>
</perfect-scrollbar>

这只会导致外部元素出现在新的自定义滚动条中，其中包含带有标准工具栏的数据网格。我需要将两个指令同时应用于同一个元素，但我对如何执行此操作感到很遗憾。

我还尝试this approach，使用标准（非角度）完美滚动条包，并尝试在加载组件时将其绑定到正确的.ag-body-viewport元素：

import perfectScrollbar from 'perfectScrollbar';

this.viewport = this.$element.find('.ag-body-viewport')[0];
perfectScrollbar.initialize(this.viewport);

但我也无法让它工作;我刚刚收到“无默认导出”错误...

任何指针都表示赞赏。感谢

Answer 1

尝试导入完美的滚动条，如下所示：

import * as perfectScrollbar from 'perfect-scrollbar';

然后你可以使用perfectScrollbar.initialize（）和perfectScrollbar.update（）;

Answer 2

我在ag-grid-angular中实现了它：

从“ perfect-scrollbar”导入PerfectScrollbar；（因此，我不是仅基于perfect-scrollbar软件包使用ngx-perfect-scrollbar）；
您以后可以根据需要执行此操作，但是对于测试，将样式从perfect-scrollbar复制到保持ag-grid-angular的组件，以及进行测试：切换到viewEncapsulation.None。

我正在保持ag-grid-angular的组件的ngAfterViewInit生命挂钩中运行它。但可能也可能是onAgGridReady事件。我在ngAfterViewInit中调用的方法如下：

private runPerfectScrollbar() {
const agBodyViewport = window.document.getElementsByClassName('ag-body-viewport')[0];
this.perfectScrollbar = new PerfectScrollbar(agBodyViewport);
this.perfectScrollbar.update();

}

那么您需要关心一些情况。例如，当调整列大小时，我在ag-grid的（dragStarted）事件上运行this.perfectScrollbar.destroy()。当（dragStopped）时，我再次调用此runPerfectScrollbar（）。
如果您发现性能问题，例如在firefox集suppressColumnVirtualisation: window.navigator.userAgent.toLowerCase().indexOf('firefox') > -1 ? true : false.上（当然，可以用某种方法写得更好；））

但是令我惊讶的是，它解决了其他一些问题。例如，我在滚动浏览器上没有太多滞后于Firefox。在野生动物园中，我对过度滚动没有橡皮筋效果。

我不确定ag网格中的所有设置。我在页面上有分页。因此，我只能显示有限的行。但是，如果您有任何问题，我会尽力提供帮助。

Answer 3

将 ag-grid-angular 中的完美滚动条添加到Angular 7应用程序（水平+垂直）的步骤。

从this link向您的package.json文件添加完善滚动条库
使用ag-grid-angular使用的组件中的导入库
import PerfectScrollbar from 'perfect-scrollbar';
使用perfect-scrollbar.css
将此CSS添加到您的style.css文件中 .ag-body-viewport, .ag-body-horizontal-scroll-viewport{ position: relative; overflow: hidden !important; }
将模板引用变量添加到您的HTML中，并传递给网格就绪事件
<div class="table-responsive" #gridContainer> <ag-grid-angular (gridReady)="onGridReady($event,gridContainer)"> </ag-grid-angular> </div>
在Component中，按如下所示添加此方法以初始化滚动

onGridReady(params: any,gridContainer) { let array=[ ".ag-body-viewport"," .ag-body-horizontal-scroll-viewport"] array.forEach(element => { let container = <HTMLElement> gridContainer.querySelector(element) if(container){ const ps = new PerfectScrollbar(container); ps.update(); } }); }

Answer 4

我想出了另一种方法来实现这一目标：

角度8.0.0
ag-grid 17.1.0
ngx-perfect-scrollbar 7.2.1

app.module.ts

在相应模块中导入PerfectScrollbarModule

@NgModule({
    imports: [
        PerfectScrollbarModule,
    ],
})
export class AppModule {}

styles.scss

/* Hides the scrollbars in the ag-grid table */
.ag-theme-bootstrap .ag-body-viewport,
.ag-theme-bootstrap .ag-body-viewport .ag-body-horizontal-scroll-viewport,
.ag-theme-bootstrap .ag-body-viewport .ag-body-vertical-scroll-viewport {
    position: relative;
    overflow: hidden !important;
}

app.component.html

为简单起见，我只是添加了ag-grid的绑定以使此功能正常工作。

这里的关键是：

使用PerfectScrollbarDirective而不是
将ag-grid的宽度分配为其视口的滚动宽度
隐藏水平滚动条
每次在表中调整列大小时都要执行此操作

目标是能够调用PerfectScrollbarDirective的update方法，以便在调整列大小后设置新宽度后在UI上反映更改：

<div class="table-container ps" [perfectScrollbar]="config">
    <ag-grid-angular
        style="width: 100%"
        [style.width.px]="width"
        [suppressHorizontalScroll]="true"
        (columnResized)="onColumnResized()"
    >
    </ag-grid-angular>
</div>

app.component.scss

ngx-perfect-scrollbar始终需要这样做：

.table-container {
    position: relative;
    max-height: your height here;
}

app.component.ts

调用 PerfectScrollbarDirective 的 update 方法是为了反映UI上的更改。否则，将在ag-grid组件上设置新的宽度，但是perfect-scrollbar不能反映更改。

export class TableComponent {
    public width: number = null; // This must be null otherwise it does not work properly after calling the sizeColumnsToFit function

    @ViewChild(PerfectScrollbarDirective, { static: false })
    public directiveRef?: PerfectScrollbarDirective;

    public config: PerfectScrollbarConfigInterface = {};

    public constructor(private store: Store<AppState>, private elementRef: ElementRef) {}

    public onColumnResized(): void {
        this.updateTableWidth();
    }

    private updateTableWidth(): void {
        const agBodyViewport: HTMLElement = this.elementRef.nativeElement.querySelector(".ag-body-viewport");
        if (agBodyViewport) {
            if (agBodyViewport) {
                this.width = agBodyViewport.scrollWidth > agBodyViewport.offsetWidth ? agBodyViewport.scrollWidth : null;
                this.directiveRef.update();
            }
        }
    }
}

如何将ngx-perfect滚动条应用于ag-grid

4 个答案:

app.module.ts

styles.scss

app.component.html

app.component.scss

app.component.ts