1

我一直在兜圈子，试图将ngx-perfect-scrollbar应用于ag-grid。我可以让两者分别工作，但我想用完美滚动条完全替换我的数据表上的默认滚动条。

我已经按照他们的说明设置了我的模块：

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>

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

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

import perfectScrollbar from 'perfectScrollbar';

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

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

任何指针表示赞赏。谢谢

4

4 回答 4

2

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

  1. 从此链接添加完美滚动条库到您的 package.json 文件
  2. 在 ag-grid-angular 使用的组件中导入库
    import PerfectScrollbar from 'perfect-scrollbar';
  3. 将样式添加到您的 angular.json 文件中perfect-scrollbar.css

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

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

  5. 将模板引用变量添加到您的 HTML 并传递给 grid-ready 事件
    <div class="table-responsive" #gridContainer> <ag-grid-angular (gridReady)="onGridReady($event,gridContainer)"> </ag-grid-angular> </div>

  6. 在组件中添加这个方法如下初始化滚动

    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(); } }); }

于 2019-08-13T11:06:38.333 回答
1

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

  • 角 8.0.0
  • 农业网格 17.1.0
  • ngx-完美滚动条 7.2.1

app.module.ts

导入对应模块中的 PerfectScrollbarModule

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

样式.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 的更新方法，以便在调整列大小时设置新宽度后反映 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 组件上设置新宽度，但完美滚动条不会反映更改。

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();
            }
        }
    }
}
于 2019-08-19T08:00:53.183 回答
1

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

  1. 从“完美滚动条”导入 PerfectScrollbar；（所以我没有使用 ngx-perfect-scrollbar 只是基本的 perfect-scrollbar 包）；
  2. 您可以稍后根据需要执行此操作，但对于测试，将样式从完美滚动条复制到保持 ag-grid-angular 的组件以及测试：切换到 viewEncapsulation.None。

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

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

    }

  4. 那么你需要关心一些情况。例如，在调整列大小时，我正在运行this.perfectScrollbar.destroy()ag-grid 的 (dragStarted) 事件。当 (dragStopped) 时，我再次调用此 runPerfectScrollbar()。

  5. 如果您发现性能问题，例如在 firefox 集上suppressColumnVirtualisation: window.navigator.userAgent.toLowerCase().indexOf('firefox') > -1 ? true : false.（当然用某种方法写得更好；））

    但令我惊讶的是，它对我来说解决了其他一些问题。例如，我在滚动时没有更多的 Firefox 滞后。在 safari 上，我对过度滚动没有橡皮筋效果。

我也不确定 ag 网格中的所有设置。我对我的观点进行了分页。所以我要显示的行数有限。但是，如果您有问题，我会尽力提供帮助。

于 2018-09-05T12:18:09.577 回答
0

尝试像这样导入完美的滚动条：

import * as perfectScrollbar from 'perfect-scrollbar';

然后你可以使用 perfectScrollbar.initialize() 和 perfectScrollbar.update();

于 2017-08-03T18:01:03.813 回答