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

Question

我一直在尝试将ngx-perfect-scrollbar应用于ag-grid。我可以让两者单独工作，但我想用perfect-scrollbar完全替换datatable上的默认滚动条。

我已经按照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>

这只会导致外部元素与新的自定义滚动条一起出现，其中包含带有标准工具栏的datagrid。我想我需要将这两个指令应用于同一个元素，但我不知道如何做到这一点。

我还尝试了this approach，使用标准的(非角度的) perfect-scrollbar包，并试图在加载组件时将其绑定到正确的.ag-body-viewport元素：

import perfectScrollbar from 'perfectScrollbar';

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

但是我也不能让它工作；我只是得到了"no default export“错误...

感谢您的指点。谢谢

Answer 1

将ag-grid-angular中的perfect滚动条添加到Angular 7应用程序的步骤(水平+垂直)。

1. 将完美滚动条库从this link添加到您的package.json文件

ag-grid-angular已用组件中的

1. 导入库

import PerfectScrollbar from 'perfect-scrollbar';

1. 使用perfect-scrollbar.css

向angular.json文件添加样式

1. 将此css添加到您的style.css文件

将.ag-body-viewport, .ag-body-horizontal-scroll-viewport{ position: relative; overflow: hidden !important; }

• Add模板引用变量传递给网格就绪事件

<div class="table-responsive" #gridContainer> <ag-grid-angular (gridReady)="onGridReady($event,gridContainer)"> </ag-grid-angular> </div>

• In组件添加此方法以初始化滚动，如下所示

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 2

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

1. 从‘perfect-scrollbar’导入PerfectScrollbar；(所以我没有使用ngx-perfect-scrollbar，只是基于perfect-scrollbar包)；
2. 你可以稍后再做，但是为了测试，可以从perfect-scrollbar复制样式到你的组件，它保持了viewEncapsulation.None.
3. I的角度，同时也用于测试:切换到perfect-

-scrollbar，在组件的ngAfterViewInit lifehook中运行它，它保持了ag-grid的角度。但它也可能是onAgGridReady事件。我在ngAfterViewInit中调用的方法如下所示：

window.document.getElementsByClassName('ag-body-viewport')；runPerfectScrollbar() { const agBodyViewport = this.perfectScrollbar = PerfectScrollbar(agBodyViewport)；this.perfectScrollbar.update()；

}

• 你需要注意一些情况。例如，在调整列大小时，我在ag-grid的(dragStarted)事件上运行this.perfectScrollbar.destroy()。当(dragStopped)时，我再次调用这个runPerfectScrollbar()。

• 如果你发现性能有问题，例如在firefox set suppressColumnVirtualisation: window.navigator.userAgent.toLowerCase().indexOf('firefox') > -1 ? true : false.上(当然，在某些方法中写得更好；)

但令我惊讶的是，对我来说，它解决了其他一些问题。例如，我在滚动页面上没有更多的火狐延迟。在safari中，我在翻页时没有橡皮筋效果。

我也不确定ag grid中的所有设置。我对我的观点进行了分页。所以我只能显示有限的行。但是如果你有什么问题，我会尽力帮助你。

Answer 3

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

• Angular 8.0.0
• ag-grid Angular 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的绑定，以使其正常工作。

这里的关键是：

每次在viewport

• Hide scrollbars

• Make 中调整列的大小时，
• PerfectScrollbarDirective而不是
• 的使用将ag网格的宽度分配给其滚动宽度。

目标是能够调用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的更新方法是为了反映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();
            }
        }
    }
}