From cb14096b202d8add6fcb0818f88de32e031f7129 Mon Sep 17 00:00:00 2001 From: vthinkxie Date: Thu, 27 Jun 2019 17:53:50 +0800 Subject: [PATCH] feat(module:table): support nzVirtualForTrackBy --- components/table/demo/virtual.ts | 20 +++++++++++++++++--- components/table/doc/index.en-US.md | 1 + components/table/doc/index.zh-CN.md | 1 + components/table/nz-table.component.html | 2 +- components/table/nz-table.component.ts | 2 ++ 5 files changed, 22 insertions(+), 4 deletions(-) diff --git a/components/table/demo/virtual.ts b/components/table/demo/virtual.ts index 8171ff1186c..2dd15c1570e 100644 --- a/components/table/demo/virtual.ts +++ b/components/table/demo/virtual.ts @@ -3,6 +3,13 @@ import { NzTableComponent } from 'ng-zorro-antd'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; +export interface VirtualDataInterface { + index: number; + name: string; + age: number; + address: string; +} + @Component({ selector: 'nz-demo-table-virtual', template: ` @@ -14,6 +21,7 @@ import { takeUntil } from 'rxjs/operators'; nzVirtualScroll [nzVirtualItemSize]="54" [nzData]="listOfData" + [nzVirtualForTrackBy]="trackByIndex" [nzFrontPagination]="false" [nzShowPagination]="false" [nzScroll]="{ x: '1300px', y: '240px' }" @@ -60,27 +68,33 @@ import { takeUntil } from 'rxjs/operators'; export class NzDemoTableVirtualComponent implements OnInit, AfterViewInit, OnDestroy { @ViewChild('virtualTable', { static: false }) nzTableComponent: NzTableComponent; private destroy$ = new Subject(); - listOfData: any[] = []; + listOfData: VirtualDataInterface[] = []; scrollToIndex(index: number): void { this.nzTableComponent.cdkVirtualScrollViewport.scrollToIndex(index); } + trackByIndex(_: number, data: VirtualDataInterface): number { + return data.index; + } + ngOnInit(): void { + const data = []; for (let i = 0; i < 20000; i++) { - this.listOfData.push({ + data.push({ index: i, name: `Edward King`, age: 32, address: `London` }); } + this.listOfData = data; } ngAfterViewInit(): void { this.nzTableComponent.cdkVirtualScrollViewport.scrolledIndexChange .pipe(takeUntil(this.destroy$)) - .subscribe(data => { + .subscribe((data: number) => { console.log('scroll index to', data); }); } diff --git a/components/table/doc/index.en-US.md b/components/table/doc/index.en-US.md index 82d6d675f1b..2bdec670f9f 100644 --- a/components/table/doc/index.en-US.md +++ b/components/table/doc/index.en-US.md @@ -96,6 +96,7 @@ The data passed to `[nzData]` will be export with [Template Context](https://ang | `[nzVirtualItemSize]` | The size of the items in the list, same as [cdk itemSize](https://material.angular.io/cdk/scrolling/api) | `number` | `0` | | `[nzVirtualMaxBufferPx]` | The number of pixels worth of buffer to render for when rendering new items, same as [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `200` | | `[nzVirtualMinBufferPx]` | The minimum amount of buffer rendered beyond the viewport (in pixels),same as [cdk minBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `100` | +| `[nzVirtualForTrackBy]` | The TrackByFunction to use for tracking changes. | `TrackByFunction` | - | | `(nzPageIndexChange)` | pageIndex change callback | `EventEmitter` | - | | `(nzPageSizeChange)` | pageSize change callback | `EventEmitter` | - | | `(nzCurrentPageDataChange)` | current pageData change callback | `EventEmitter` | - | diff --git a/components/table/doc/index.zh-CN.md b/components/table/doc/index.zh-CN.md index 18009def70c..eb4b0ab3b55 100644 --- a/components/table/doc/index.zh-CN.md +++ b/components/table/doc/index.zh-CN.md @@ -96,6 +96,7 @@ Table 组件同时具备了易用性和高度可定制性 | `[nzVirtualItemSize]` | 虚拟滚动时每一列的高度，与 [cdk itemSize](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `0` | | `[nzVirtualMaxBufferPx]` | 缓冲区最大像素高度，与 [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `200` | | `[nzVirtualMinBufferPx]` | 缓冲区最小像素高度，低于该值时将加载新结构，与 [cdk minBufferPx](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `100` | +| `[nzVirtualForTrackBy]` | 虚拟滚动数据 `TrackByFunction` 函数 | `TrackByFunction` | - | | `(nzPageIndexChange)` | 当前页码改变时的回调函数 | `EventEmitter` | - | | `(nzPageSizeChange)` | 页数改变时的回调函数 | `EventEmitter` | - | | `(nzCurrentPageDataChange)` | 当前页面展示数据改变的回调函数 | `EventEmitter` | - | diff --git a/components/table/nz-table.component.html b/components/table/nz-table.component.html index c902b5ae100..ff031612c3c 100644 --- a/components/table/nz-table.component.html +++ b/components/table/nz-table.component.html @@ -48,7 +48,7 @@ - + diff --git a/components/table/nz-table.component.ts b/components/table/nz-table.component.ts index af1815c723b..5d11193b5e1 100644 --- a/components/table/nz-table.component.ts +++ b/components/table/nz-table.component.ts @@ -28,6 +28,7 @@ import { Renderer2, SimpleChanges, TemplateRef, + TrackByFunction, ViewChild, ViewEncapsulation } from '@angular/core'; @@ -87,6 +88,7 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestr @Input() @InputNumber() nzVirtualItemSize = 0; @Input() @InputNumber() nzVirtualMaxBufferPx = 200; @Input() @InputNumber() nzVirtualMinBufferPx = 100; + @Input() nzVirtualForTrackBy: TrackByFunction | undefined; @Input() nzLoadingDelay = 0; @Input() nzLoadingIndicator: TemplateRef; @Input() nzTotal = 0;