diff --git a/components/dropdown/nz-dropdown.component.html b/components/dropdown/nz-dropdown.component.html index aaf26033c2c..2f9b6f5d165 100644 --- a/components/dropdown/nz-dropdown.component.html +++ b/components/dropdown/nz-dropdown.component.html @@ -15,10 +15,9 @@ [style.minWidth.px]="triggerWidth" (mouseenter)="setVisibleStateWhen(true,'hover')" (mouseleave)="setVisibleStateWhen(false,'hover')"> -
+
- +
-
\ No newline at end of file diff --git a/components/dropdown/nz-dropdown.component.ts b/components/dropdown/nz-dropdown.component.ts index dd91909a51c..e65ba3ef6ba 100644 --- a/components/dropdown/nz-dropdown.component.ts +++ b/components/dropdown/nz-dropdown.component.ts @@ -57,7 +57,6 @@ export class NzDropDownComponent implements OnDestroy, AfterContentInit, OnChang @ContentChild(NzDropDownDirective) nzDropDownDirective: NzDropDownDirective; @ContentChild(NzMenuDirective) nzMenuDirective: NzMenuDirective; @ViewChild(CdkConnectedOverlay) cdkConnectedOverlay: CdkConnectedOverlay; - @Input() hasFilterButton = false; @Input() nzTrigger: 'click' | 'hover' = 'hover'; @Input() nzOverlayClassName = ''; @Input() nzOverlayStyle: { [ key: string ]: string } = {}; @@ -65,6 +64,7 @@ export class NzDropDownComponent implements OnDestroy, AfterContentInit, OnChang @Input() @InputBoolean() nzClickHide = true; @Input() @InputBoolean() nzDisabled = false; @Input() @InputBoolean() nzVisible = false; + @Input() @InputBoolean() nzTableFilter = false; @Output() readonly nzVisibleChange: EventEmitter = new EventEmitter(); setVisibleStateWhen(visible: boolean, trigger: 'click' | 'hover' | 'all' = 'all'): void { diff --git a/components/input/public-api.ts b/components/input/public-api.ts index 4d167cdab62..48d3cefc594 100644 --- a/components/input/public-api.ts +++ b/components/input/public-api.ts @@ -1,3 +1,4 @@ export * from './nz-input-group.component'; export * from './nz-input.module'; export * from './nz-input-group.component'; +export * from './nz-input.directive'; diff --git a/components/table/demo/ajax.ts b/components/table/demo/ajax.ts index c9723dd0dfb..182438419c5 100644 --- a/components/table/demo/ajax.ts +++ b/components/table/demo/ajax.ts @@ -32,7 +32,7 @@ export class RandomUserService { #ajaxTable nzShowSizeChanger [nzFrontPagination]="false" - [nzData]="dataSet" + [nzData]="listOfData" [nzLoading]="loading" [nzTotal]="total" [(nzPageIndex)]="pageIndex" @@ -59,7 +59,7 @@ export class NzDemoTableAjaxComponent implements OnInit { pageIndex = 1; pageSize = 10; total = 1; - dataSet = []; + listOfData = []; loading = true; sortValue = null; sortKey = null; @@ -86,7 +86,7 @@ export class NzDemoTableAjaxComponent implements OnInit { this.randomUserService.getUsers(this.pageIndex, this.pageSize, this.sortKey, this.sortValue, this.searchGenderList).subscribe((data: any) => { this.loading = false; this.total = 200; - this.dataSet = data.results; + this.listOfData = data.results; }); } diff --git a/components/table/demo/basic.ts b/components/table/demo/basic.ts index 34ffaaa4cf2..e3cbb93ac12 100644 --- a/components/table/demo/basic.ts +++ b/components/table/demo/basic.ts @@ -3,7 +3,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'nz-demo-table-basic', template: ` - + Name @@ -28,7 +28,7 @@ import { Component } from '@angular/core'; ` }) export class NzDemoTableBasicComponent { - dataSet = [ + listOfData = [ { key : '1', name : 'John Brown', diff --git a/components/table/demo/colspan-rowspan.ts b/components/table/demo/colspan-rowspan.ts index bfbbc0c1220..1ece6b9c4ab 100644 --- a/components/table/demo/colspan-rowspan.ts +++ b/components/table/demo/colspan-rowspan.ts @@ -3,7 +3,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'nz-demo-table-colspan-rowspan', template: ` - + Name @@ -13,18 +13,18 @@ import { Component } from '@angular/core'; - - {{data.name}} - {{data.age}} - {{data.tel}} - {{data.phone}} - {{data.address}} + + {{ data.name }} + {{ data.age }} + {{ data.tel }} + {{data.phone}} + {{data.address}} ` }) export class NzDemoTableColspanRowspanComponent { - dataSet = [ + listOfData = [ { key : '1', name : 'John Brown', diff --git a/components/table/demo/custom-filter-panel.md b/components/table/demo/custom-filter-panel.md index 22e9888dcd1..482428f9606 100644 --- a/components/table/demo/custom-filter-panel.md +++ b/components/table/demo/custom-filter-panel.md @@ -7,7 +7,7 @@ title: ## zh-CN -通过 `nz-dropdown`、`nzFilters` 和 `nzFilterChange` 定义自定义的列筛选功能，并实现一个搜索列的示例。 +通过 `nz-dropdown`、`nzFilters` 和 `nzFilterChange` 定义自定义的列筛选功能，并实现一个搜索列的示例，实际使用中建议将搜索组件进行单独封装。 ## en-US diff --git a/components/table/demo/custom-filter-panel.ts b/components/table/demo/custom-filter-panel.ts index 84d0771d8e2..845d7b88b8e 100644 --- a/components/table/demo/custom-filter-panel.ts +++ b/components/table/demo/custom-filter-panel.ts @@ -3,21 +3,22 @@ import { Component } from '@angular/core'; @Component({ selector: 'nz-demo-table-custom-filter-panel', template: ` - + Name - - -
+ + +
- + +
Age - Address + Address @@ -30,39 +31,36 @@ import { Component } from '@angular/core'; `, styles : [ ` - .custom-filter-dropdown { + .search-box { padding: 8px; - border-radius: 6px; - background: #fff; - box-shadow: 0 1px 6px rgba(0, 0, 0, .2); } - [nz-input] { - width: 130px; - margin-right: 8px; + .search-box input { + width: 188px; + margin-bottom: 8px; + display: block; + } + + .search-box button { + width: 90px; } - .highlight { - color: #f50; + .search-button { + margin-right: 8px; } ` ] }) export class NzDemoTableCustomFilterPanelComponent { searchValue = ''; - filterAddressArray = [ + sortName = null; + sortValue = null; + listOfFilterAddress = [ { text: 'London', value: 'London' }, { text: 'Sidney', value: 'Sidney' } ]; - searchAddress = []; - sortMap = { - name : null, - age : null, - address: null - }; - sortName = null; - sortValue = null; - data = [ + listOfSearchAddress = []; + listOfData = [ { name : 'John Brown', age : 32, @@ -84,28 +82,30 @@ export class NzDemoTableCustomFilterPanelComponent { address: 'London No. 2 Lake Park' } ]; - displayData = [ ...this.data ]; + listOfDisplayData = [ ...this.listOfData ]; + + reset(): void { + this.searchValue = ''; + this.search(); + } sort(sortName: string, value: boolean): void { this.sortName = sortName; this.sortValue = value; - for (const key in this.sortMap) { - this.sortMap[ key ] = (key === sortName ? value : null); - } this.search(); } filterAddressChange(value: string[]): void { - this.searchAddress = value; + this.listOfSearchAddress = value; this.search(); } search(): void { const filterFunc = (item) => { - return (this.searchAddress.length ? this.searchAddress.some(address => item.address.indexOf(address) !== -1) : true) && + return (this.listOfSearchAddress.length ? this.listOfSearchAddress.some(address => item.address.indexOf(address) !== -1) : true) && (item.name.indexOf(this.searchValue) !== -1); }; - const data = this.data.filter(item => filterFunc(item)); - this.displayData = data.sort((a, b) => (this.sortValue === 'ascend') ? (a[ this.sortName ] > b[ this.sortName ] ? 1 : -1) : (b[ this.sortName ] > a[ this.sortName ] ? 1 : -1)); + const data = this.listOfData.filter(item => filterFunc(item)); + this.listOfDisplayData = data.sort((a, b) => (this.sortValue === 'ascend') ? (a[ this.sortName ] > b[ this.sortName ] ? 1 : -1) : (b[ this.sortName ] > a[ this.sortName ] ? 1 : -1)); } } diff --git a/components/table/demo/default-filter.md b/components/table/demo/default-filter.md index 2b28d5f9308..35d76f89a97 100644 --- a/components/table/demo/default-filter.md +++ b/components/table/demo/default-filter.md @@ -7,8 +7,8 @@ ## zh-CN -通过设置 filter 对象的 `{ byDefault: true }` 属性来默认启用一个筛选器。注意，你必须同时自行设置过滤后应当展示的列表项，为了保持数据流的清晰和数据的一致性，ng-zorro 不会为你做这项工作。详情请见 demo。 +通过设置 filter 对象的 `{ byDefault: true }` 属性来默认启用一个筛选器。注意，你必须同时自行设置过滤后应当展示的列表项，为了保持数据流的清晰和数据的一致性，组件库不会为你做这项工作。详情请见 demo。 ## en-US -you can enable a filter by default by setting a `filter` object's property: `{ byDefault: true }`. Be aware that you should set the filtered table contents by yourself. In order to keep clarity and consistency of data, ng-zorro would not do default filtering for you. Please refer to the demo. \ No newline at end of file +you can enable a filter by default by setting a `filter` object's property: `{ byDefault: true }`. Be aware that you should set the filtered table contents by yourself. In order to keep clarity and consistency of data, components would not do default filtering for you. Please refer to the demo. \ No newline at end of file diff --git a/components/table/demo/default-filter.ts b/components/table/demo/default-filter.ts index f37e94423ae..516f82ad66f 100644 --- a/components/table/demo/default-filter.ts +++ b/components/table/demo/default-filter.ts @@ -3,12 +3,12 @@ import { Component } from '@angular/core'; @Component({ selector: 'nz-demo-table-default-filter', template: ` - + - Name + Name Age - Address + Address @@ -21,41 +21,35 @@ import { Component } from '@angular/core'; ` }) export class NzDemoTableDefaultFilterComponent { - nameList = [ - { text: 'Joe', value: 'Joe', byDefault: true }, - { text: 'Jim', value: 'Jim' } - ]; - addressList = [ - { text: 'London', value: 'London', byDefault: true }, - { text: 'Sidney', value: 'Sidney' } - ]; + listOfName = [ { text: 'Joe', value: 'Joe', byDefault: true }, { text: 'Jim', value: 'Jim' } ]; + listOfAddress = [ { text: 'London', value: 'London', byDefault: true }, { text: 'Sidney', value: 'Sidney' } ]; + listOfSearchName = [ 'Joe' ]; // You need to change it as well! sortName = null; sortValue = null; - listOfSearchName = [ 'Joe' ]; // You need to change it as well! searchAddress = 'London'; - data = [ + listOfData = [ { - name: 'John Brown', - age: 32, + name : 'John Brown', + age : 32, address: 'New York No. 1 Lake Park' }, { - name: 'Jim Green', - age: 42, + name : 'Jim Green', + age : 42, address: 'London No. 1 Lake Park' }, { - name: 'Joe Black', - age: 32, + name : 'Joe Black', + age : 32, address: 'Sidney No. 1 Lake Park' }, { - name: 'Jim Red', - age: 32, + name : 'Jim Red', + age : 32, address: 'London No. 2 Lake Park' } ]; - displayData = [ ]; // You need to change it as well! + listOfDisplayData = []; // You need to change it as well! sort(sort: { key: string, value: string }): void { this.sortName = sort.key; @@ -72,12 +66,12 @@ export class NzDemoTableDefaultFilterComponent { search(): void { /** filter data **/ const filterFunc = item => (this.searchAddress ? item.address.indexOf(this.searchAddress) !== -1 : true) && (this.listOfSearchName.length ? this.listOfSearchName.some(name => item.name.indexOf(name) !== -1) : true); - const data = this.data.filter(item => filterFunc(item)); + const data = this.listOfData.filter(item => filterFunc(item)); /** sort data **/ if (this.sortName && this.sortValue) { - this.displayData = data.sort((a, b) => (this.sortValue === 'ascend') ? (a[ this.sortName ] > b[ this.sortName ] ? 1 : -1) : (b[ this.sortName ] > a[ this.sortName ] ? 1 : -1)); + this.listOfDisplayData = data.sort((a, b) => (this.sortValue === 'ascend') ? (a[ this.sortName ] > b[ this.sortName ] ? 1 : -1) : (b[ this.sortName ] > a[ this.sortName ] ? 1 : -1)); } else { - this.displayData = data; + this.listOfDisplayData = data; } } } diff --git a/components/table/demo/drag-sorting.ts b/components/table/demo/drag-sorting.ts index 8b37293baf3..1daac660154 100644 --- a/components/table/demo/drag-sorting.ts +++ b/components/table/demo/drag-sorting.ts @@ -4,7 +4,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'nz-demo-table-drag-sorting', template: ` - + Name @@ -13,7 +13,7 @@ import { Component } from '@angular/core'; - + {{data.name}} {{data.age}} {{data.address}} @@ -35,7 +35,7 @@ import { Component } from '@angular/core'; ] }) export class NzDemoTableDragSortingComponent { - dataSet = [ + listOfData = [ { key : '1', name : 'John Brown', @@ -57,6 +57,6 @@ export class NzDemoTableDragSortingComponent { ]; drop(event: CdkDragDrop): void { - moveItemInArray(this.dataSet, event.previousIndex, event.currentIndex); + moveItemInArray(this.listOfData, event.previousIndex, event.currentIndex); } } diff --git a/components/table/demo/dynamic-settings.ts b/components/table/demo/dynamic-settings.ts index 8fdb120a253..be3f9072d2c 100644 --- a/components/table/demo/dynamic-settings.ts +++ b/components/table/demo/dynamic-settings.ts @@ -17,6 +17,10 @@ import { Component, OnInit } from '@angular/core'; + + + + @@ -73,11 +77,12 @@ import { Component, OnInit } from '@angular/core';
Add - + + Name @@ -17,27 +15,21 @@ import { Component, OnInit } from '@angular/core'; - + -
-
- - {{data.name}} - - - - - - +
+
+ {{data.name}}
+ + + {{data.age}} {{data.address}} - - Delete - + Delete @@ -45,106 +37,62 @@ import { Component, OnInit } from '@angular/core'; `, styles : [ ` - .editable-cell { - position: relative; - } - - .editable-cell-input-wrapper, - .editable-cell-text-wrapper { - padding-right: 24px; + button { + margin-bottom: 16px; } - .editable-cell-text-wrapper { - padding: 5px 24px 5px 5px; + .editable-cell { + position: relative; } - .editable-cell-icon, - .editable-cell-icon-check { - position: absolute; - right: 0; - width: 20px; + .editable-cell-value-wrap { + padding: 5px 12px; cursor: pointer; } - .editable-cell-icon { - line-height: 18px; - display: none; - } - - .editable-cell-icon-check { - line-height: 28px; - } - - .editable-cell:hover .editable-cell-icon { - display: inline-block; - } - - .editable-cell-icon:hover, - .editable-cell-icon-check:hover { - color: #108ee9; - } - - .editable-add-btn { - margin-bottom: 8px; + .editable-row:hover .editable-cell-value-wrap { + border: 1px solid #d9d9d9; + border-radius: 4px; + padding: 4px 11px; } ` ] }) export class NzDemoTableEditCellComponent implements OnInit { - i = 1; - editCache = {}; - dataSet = [ - { - key : '0', - name : 'Edward King 0', - age : '32', - address: 'London, Park Lane no. 0' - }, - { - key : '1', - name : 'Edward King 1', - age : '32', - address: 'London, Park Lane no. 1' + i = 0; + editId: string; + listOfData = []; + @ViewChild(NzInputDirective, { read: ElementRef }) inputElement: ElementRef; + + @HostListener('window:click', [ '$event' ]) + handleClick(e: MouseEvent): void { + if (this.editId && this.inputElement && this.inputElement.nativeElement !== e.target) { + this.editId = null; } - ]; + } addRow(): void { - this.i++; - this.dataSet = [ ...this.dataSet, { - key : `${this.i}`, + this.listOfData = [ ...this.listOfData, { + id : `${this.i}`, name : `Edward King ${this.i}`, age : '32', address: `London, Park Lane no. ${this.i}` } ]; - this.updateEditCache(); - } - - deleteRow(i: string): void { - const dataSet = this.dataSet.filter(d => d.key !== i); - this.dataSet = dataSet; - } - - startEdit(key: string): void { - this.editCache[ key ].edit = true; + this.i++; } - finishEdit(key: string): void { - this.editCache[ key ].edit = false; - this.dataSet.find(item => item.key === key).name = this.editCache[ key ].name; + deleteRow(id: string): void { + this.listOfData = this.listOfData.filter(d => d.id !== id); } - updateEditCache(): void { - this.dataSet.forEach(item => { - if (!this.editCache[ item.key ]) { - this.editCache[ item.key ] = { - edit: false, - name: item.name - }; - } - }); + startEdit(id: string, event: MouseEvent): void { + event.preventDefault(); + event.stopPropagation(); + this.editId = id; } ngOnInit(): void { - this.updateEditCache(); + this.addRow(); + this.addRow(); } } diff --git a/components/table/demo/edit-row.ts b/components/table/demo/edit-row.ts index a4d09e3f7f7..eb1776b61bd 100644 --- a/components/table/demo/edit-row.ts +++ b/components/table/demo/edit-row.ts @@ -3,10 +3,7 @@ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'nz-demo-table-edit-row', template: ` - + Name @@ -18,44 +15,38 @@ import { Component, OnInit } from '@angular/core'; -
-
- - {{data.name}} - - - - -
-
+ + {{data.name}} + + + + - + {{data.age}} - - - + + + - + {{data.address}} - - - + + +
- - Edit - - - Save - - Cancel - + + Edit + + Save + Cancel +
@@ -63,7 +54,7 @@ import { Component, OnInit } from '@angular/core'; `, styles : [ - ` + ` .editable-row-operations a { margin-right: 8px; } @@ -71,42 +62,40 @@ import { Component, OnInit } from '@angular/core'; ] }) export class NzDemoTableEditRowComponent implements OnInit { - i = 1; editCache = {}; - dataSet = []; + listOfData = []; - startEdit(key: string): void { - this.editCache[ key ].edit = true; + startEdit(id: string): void { + this.editCache[ id ].edit = true; } - cancelEdit(key: string): void { - const index = this.dataSet.findIndex(item => item.key === key); - Object.assign(this.editCache[ key ].data, this.dataSet[ index ]); - this.editCache[ key ].edit = false; + cancelEdit(id: string): void { + const index = this.listOfData.findIndex(item => item.id === id); + this.editCache[ id ] = { + data: { ...this.listOfData[ index ] }, + edit: false + }; } - saveEdit(key: string): void { - const index = this.dataSet.findIndex(item => item.key === key); - Object.assign(this.dataSet[ index ], this.editCache[ key ].data); - // this.dataSet[ index ] = this.editCache[ key ].data; - this.editCache[ key ].edit = false; + saveEdit(id: string): void { + const index = this.listOfData.findIndex(item => item.id === id); + Object.assign(this.listOfData[ index ], this.editCache[ id ].data); + this.editCache[ id ].edit = false; } updateEditCache(): void { - this.dataSet.forEach(item => { - if (!this.editCache[ item.key ]) { - this.editCache[ item.key ] = { - edit: false, - data: { ...item } - }; - } + this.listOfData.forEach(item => { + this.editCache[ item.id ] = { + edit: false, + data: { ...item } + }; }); } ngOnInit(): void { for (let i = 0; i < 100; i++) { - this.dataSet.push({ - key : i.toString(), + this.listOfData.push({ + id : `${i}`, name : `Edrward ${i}`, age : 32, address: `London Park no. ${i}` diff --git a/components/table/demo/expand-children.ts b/components/table/demo/expand-children.ts index 5ee01145b56..9a27b86eaa4 100644 --- a/components/table/demo/expand-children.ts +++ b/components/table/demo/expand-children.ts @@ -13,7 +13,7 @@ export interface TreeNodeInterface { @Component({ selector: 'nz-demo-table-expand-children', template: ` - + Name @@ -22,23 +22,26 @@ export interface TreeNodeInterface { - - - - + + + + {{item.name}} {{item.age}} {{item.address}} - - + + - `, - styles : [] + ` }) export class NzDemoTableExpandChildrenComponent implements OnInit { - data = [ + listOfMapData = [ { key : 1, name : 'John Brown sr.', @@ -100,7 +103,7 @@ export class NzDemoTableExpandChildrenComponent implements OnInit { address: 'Sidney No. 1 Lake Park' } ]; - expandDataCache = {}; + mapOfExpandedData = {}; collapse(array: TreeNodeInterface[], data: TreeNodeInterface, $event: boolean): void { if ($event === false) { @@ -143,8 +146,8 @@ export class NzDemoTableExpandChildrenComponent implements OnInit { } ngOnInit(): void { - this.data.forEach(item => { - this.expandDataCache[ item.key ] = this.convertTreeToList(item); + this.listOfMapData.forEach(item => { + this.mapOfExpandedData[ item.key ] = this.convertTreeToList(item); }); } } diff --git a/components/table/demo/expand.ts b/components/table/demo/expand.ts index 8a451402562..2fcd8f661f9 100644 --- a/components/table/demo/expand.ts +++ b/components/table/demo/expand.ts @@ -3,28 +3,26 @@ import { Component } from '@angular/core'; @Component({ selector: 'nz-demo-table-expand', template: ` - + Name Age Address - Action - + {{data.name}} {{data.age}} {{data.address}} - Delete - + - {{data.description}} + {{data.description}} @@ -32,8 +30,10 @@ import { Component } from '@angular/core'; styles : [] }) export class NzDemoTableExpandComponent { - dataSet = [ + mapOfExpandData = {}; + listOfData = [ { + id : 1, name : 'John Brown', age : 32, expand : false, @@ -41,6 +41,7 @@ export class NzDemoTableExpandComponent { description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.' }, { + id : 2, name : 'Jim Green', age : 42, expand : false, @@ -48,6 +49,7 @@ export class NzDemoTableExpandComponent { description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' }, { + id : 3, name : 'Joe Black', age : 32, expand : false, diff --git a/components/table/demo/fixed-columns-header.ts b/components/table/demo/fixed-columns-header.ts index e6f98f27d88..1c988f9a381 100644 --- a/components/table/demo/fixed-columns-header.ts +++ b/components/table/demo/fixed-columns-header.ts @@ -3,11 +3,11 @@ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'nz-demo-table-fixed-columns-header', template: ` - + - Full Name - Age + Full Name + Age Column 1 Column 2 Column 3 @@ -20,9 +20,9 @@ import { Component, OnInit } from '@angular/core'; - + {{data.name}} - {{data.age}} + {{data.age}} {{data.address}} {{data.address}} {{data.address}} @@ -36,18 +36,17 @@ import { Component, OnInit } from '@angular/core'; - `, - styles : [] + ` }) export class NzDemoTableFixedColumnsHeaderComponent implements OnInit { - dataSet = []; + listOfData = []; ngOnInit(): void { for (let i = 0; i < 100; i++) { - this.dataSet.push({ + this.listOfData.push({ name : `Edward King ${i}`, age : 32, - address: `London, Park Lane no. ${i}` + address: `London` }); } } diff --git a/components/table/demo/fixed-columns.md b/components/table/demo/fixed-columns.md index ce40f5c2120..287a988dd27 100644 --- a/components/table/demo/fixed-columns.md +++ b/components/table/demo/fixed-columns.md @@ -12,7 +12,7 @@ title: > 固定列使用了 `sticky` 属性，浏览器支持情况可以参考[这里](https://caniuse.com/#feat=css-sticky)。 -> 若列头与内容不对齐或出现列重复，请指定 `th` 的宽度 `nzWidth`。 +> 若列头与内容不对齐或出现列重复，请指定每一列的 `th` 的宽度 `nzWidth`。 > 建议指定 `nzScroll.x` 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 `nzScroll.x`。 diff --git a/components/table/demo/fixed-columns.ts b/components/table/demo/fixed-columns.ts index 7f6908f953a..24d8d60c6cb 100644 --- a/components/table/demo/fixed-columns.ts +++ b/components/table/demo/fixed-columns.ts @@ -3,7 +3,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'nz-demo-table-fixed-columns', template: ` - + Full Name @@ -20,7 +20,7 @@ import { Component } from '@angular/core'; - + {{data.name}} {{data.age}} {{data.address}} @@ -36,22 +36,21 @@ import { Component } from '@angular/core'; - `, - styles : [] + ` }) export class NzDemoTableFixedColumnsComponent { - dataSet = [ + listOfData = [ { key : '1', name : 'John Brown', age : 32, - address: 'New York Park', + address: 'New York' }, { key : '2', name : 'Jim Green', age : 40, - address: 'London Park', + address: 'London' } ]; } diff --git a/components/table/demo/fixed-header.ts b/components/table/demo/fixed-header.ts index e430a7d0482..5242eb9b91f 100644 --- a/components/table/demo/fixed-header.ts +++ b/components/table/demo/fixed-header.ts @@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'nz-demo-table-fixed-header', template: ` - + Name @@ -12,21 +12,20 @@ import { Component, OnInit } from '@angular/core'; - + {{data.name}} {{data.age}} {{data.address}} - `, - styles : [] + ` }) export class NzDemoTableFixedHeaderComponent implements OnInit { - dataSet = []; + listOfData = []; ngOnInit(): void { for (let i = 0; i < 100; i++) { - this.dataSet.push({ + this.listOfData.push({ name : `Edward King ${i}`, age : 32, address: `London, Park Lane no. ${i}` diff --git a/components/table/demo/grouping-columns.ts b/components/table/demo/grouping-columns.ts index ff1de0cdf72..880667ec039 100644 --- a/components/table/demo/grouping-columns.ts +++ b/components/table/demo/grouping-columns.ts @@ -3,13 +3,7 @@ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'nz-demo-table-grouping-columns', template: ` - + Name @@ -44,12 +38,13 @@ import { Component, OnInit } from '@angular/core'; {{data.gender}} - `, - styles : [] + ` }) export class NzDemoTableGroupingColumnsComponent implements OnInit { - displayData = []; - data = []; + widthConfig = [ '100px', '200px', '200px', '100px', '100px', '200px', '200px', '100px' ]; + scrollConfig = { x: '1200px', y: '240px' }; + listOfDisplayData = []; + listOfData = []; sortValue = null; filterName = [ { text: 'Joe', value: 'Joe' }, @@ -62,13 +57,13 @@ export class NzDemoTableGroupingColumnsComponent implements OnInit { const filterFunc = (item) => { return this.searchName.length ? this.searchName.some(name => item.name.indexOf(name) !== -1) : true; }; - const data = this.data.filter(item => filterFunc(item)); - this.displayData = data.sort((a, b) => (this.sortValue === 'ascend') ? (a.age > b.age ? 1 : -1) : (b.age > a.age ? 1 : -1)); + const listOfData = this.listOfData.filter(item => filterFunc(item)); + this.listOfDisplayData = listOfData.sort((a, b) => (this.sortValue === 'ascend') ? (a.age > b.age ? 1 : -1) : (b.age > a.age ? 1 : -1)); } ngOnInit(): void { for (let i = 0; i < 100; i++) { - this.displayData.push({ + this.listOfData.push({ name : 'John Brown', age : i + 1, street : 'Lake Park', @@ -79,6 +74,6 @@ export class NzDemoTableGroupingColumnsComponent implements OnInit { gender : 'M' }); } - this.data = [ ...this.displayData ]; + this.listOfDisplayData = [ ...this.listOfData ]; } } diff --git a/components/table/demo/head.md b/components/table/demo/head.md index f708177a459..ac224bc73a6 100644 --- a/components/table/demo/head.md +++ b/components/table/demo/head.md @@ -1,5 +1,5 @@ --- -order: 6 +order: 5 title: en-US: Filter and sorter zh-CN: 筛选和排序 diff --git a/components/table/demo/head.ts b/components/table/demo/head.ts index 76d42b7690d..37ec42422f7 100644 --- a/components/table/demo/head.ts +++ b/components/table/demo/head.ts @@ -3,12 +3,12 @@ import { Component } from '@angular/core'; @Component({ selector: 'nz-demo-table-head', template: ` - + - Name + Name Age - Address + Address @@ -21,19 +21,13 @@ import { Component } from '@angular/core'; ` }) export class NzDemoTableHeadComponent { - nameList = [ - { text: 'Joe', value: 'Joe' }, - { text: 'Jim', value: 'Jim' } - ]; - addressList = [ - { text: 'London', value: 'London' }, - { text: 'Sidney', value: 'Sidney' } - ]; sortName = null; sortValue = null; - listOfSearchName = []; searchAddress: string; - data = [ + listOfName = [ { text: 'Joe', value: 'Joe' }, { text: 'Jim', value: 'Jim' } ]; + listOfAddress = [ { text: 'London', value: 'London' }, { text: 'Sidney', value: 'Sidney' } ]; + listOfSearchName = []; + listOfData = [ { name : 'John Brown', age : 32, @@ -55,7 +49,7 @@ export class NzDemoTableHeadComponent { address: 'London No. 2 Lake Park' } ]; - displayData = [ ...this.data ]; + listOfDisplayData = [ ...this.listOfData ]; sort(sort: { key: string, value: string }): void { this.sortName = sort.key; @@ -72,12 +66,12 @@ export class NzDemoTableHeadComponent { search(): void { /** filter data **/ const filterFunc = item => (this.searchAddress ? item.address.indexOf(this.searchAddress) !== -1 : true) && (this.listOfSearchName.length ? this.listOfSearchName.some(name => item.name.indexOf(name) !== -1) : true); - const data = this.data.filter(item => filterFunc(item)); + const data = this.listOfData.filter(item => filterFunc(item)); /** sort data **/ if (this.sortName && this.sortValue) { - this.displayData = data.sort((a, b) => (this.sortValue === 'ascend') ? (a[ this.sortName ] > b[ this.sortName ] ? 1 : -1) : (b[ this.sortName ] > a[ this.sortName ] ? 1 : -1)); + this.listOfDisplayData = data.sort((a, b) => (this.sortValue === 'ascend') ? (a[ this.sortName ] > b[ this.sortName ] ? 1 : -1) : (b[ this.sortName ] > a[ this.sortName ] ? 1 : -1)); } else { - this.displayData = data; + this.listOfDisplayData = data; } } } diff --git a/components/table/demo/nested-table.ts b/components/table/demo/nested-table.ts index c6e534e2f5b..fff8687fd81 100644 --- a/components/table/demo/nested-table.ts +++ b/components/table/demo/nested-table.ts @@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'nz-demo-table-nested-table', template: ` - + @@ -33,25 +33,25 @@ import { Component, OnInit } from '@angular/core'; - - - - Date - Name - Status - Upgrade Status - Action - - - - - {{data.date}} - {{data.name}} - - - - {{data.upgradeNum}} - + + + + Date + Name + Status + Upgrade Status + Action + + + + + {{data.date}} + {{data.name}} + + + + {{data.upgradeNum}} + @@ -71,24 +71,24 @@ import { Component, OnInit } from '@angular/core'; More - - - - - - - + + + + + + + ` }) export class NzDemoTableNestedTableComponent implements OnInit { - nestedTableData = []; - innerTableData = []; + listOfParentData = []; + listOfChildrenData = []; ngOnInit(): void { for (let i = 0; i < 3; ++i) { - this.nestedTableData.push({ + this.listOfParentData.push({ key : i, name : 'Screem', platform : 'iOS', @@ -100,11 +100,11 @@ export class NzDemoTableNestedTableComponent implements OnInit { }); } for (let i = 0; i < 3; ++i) { - this.innerTableData.push({ + this.listOfChildrenData.push({ key : i, date : '2014-12-24 23:12:00', name : 'This is production name', - upgradeNum: 'Upgraded: 56', + upgradeNum: 'Upgraded: 56' }); } } diff --git a/components/table/demo/reset-filter.ts b/components/table/demo/reset-filter.ts index cc9402e322a..4d408a67a64 100644 --- a/components/table/demo/reset-filter.ts +++ b/components/table/demo/reset-filter.ts @@ -8,12 +8,12 @@ import { Component } from '@angular/core';
- + - Name - Age - Address + Name + Age + Address @@ -37,25 +37,17 @@ import { Component } from '@angular/core'; ] }) export class NzDemoTableResetFilterComponent { - searchNameList = []; - searchAddressList = []; - filterNameList = [ + listOfSearchName = []; + listOfSearchAddress = []; + listOfFilterName = [ { text: 'Joe', value: 'Joe' }, { text: 'Jim', value: 'Jim' } ]; - filterAddressList = [ + listOfFilterAddress = [ { text: 'London', value: 'London' }, { text: 'Sidney', value: 'Sidney' } ]; - sortMap = { - name : null, - age : null, - address: null - }; - sortName = null; - sortValue = null; - - data = [ + listOfData = [ { name : 'John Brown', age : 32, @@ -77,52 +69,59 @@ export class NzDemoTableResetFilterComponent { address: 'London No. 2 Lake Park' } ]; - displayData = [ ...this.data ]; + listOfDisplayData = [ ...this.listOfData ]; + mapOfSort = { + name : null, + age : null, + address: null + }; + sortName = null; + sortValue = null; sort(sortName: string, value: string): void { this.sortName = sortName; this.sortValue = value; - for (const key in this.sortMap) { - this.sortMap[ key ] = (key === sortName ? value : null); + for (const key in this.mapOfSort) { + this.mapOfSort[ key ] = (key === sortName ? value : null); } - this.search(this.searchNameList, this.searchAddressList); + this.search(this.listOfSearchName, this.listOfSearchAddress); } - search(searchNameList: string[], searchAddressList: string[]): void { - this.searchNameList = searchNameList; - this.searchAddressList = searchAddressList; - const filterFunc = item => (this.searchAddressList.length ? this.searchAddressList.some(address => item.address.indexOf(address) !== -1) : true) && (this.searchNameList.length ? this.searchNameList.some(name => item.name.indexOf(name) !== -1) : true); - const data = this.data.filter(item => filterFunc(item)); + search(listOfSearchName: string[], listOfSearchAddress: string[]): void { + this.listOfSearchName = listOfSearchName; + this.listOfSearchAddress = listOfSearchAddress; + const filterFunc = item => (this.listOfSearchAddress.length ? this.listOfSearchAddress.some(address => item.address.indexOf(address) !== -1) : true) && (this.listOfSearchName.length ? this.listOfSearchName.some(name => item.name.indexOf(name) !== -1) : true); + const listOfData = this.listOfData.filter(item => filterFunc(item)); if (this.sortName && this.sortValue) { - this.displayData = data.sort((a, b) => (this.sortValue === 'ascend') ? (a[ this.sortName ] > b[ this.sortName ] ? 1 : -1) : (b[ this.sortName ] > a[ this.sortName ] ? 1 : -1)); + this.listOfDisplayData = listOfData.sort((a, b) => (this.sortValue === 'ascend') ? (a[ this.sortName ] > b[ this.sortName ] ? 1 : -1) : (b[ this.sortName ] > a[ this.sortName ] ? 1 : -1)); } else { - this.displayData = data; + this.listOfDisplayData = listOfData; } } resetFilters(): void { - this.filterNameList = [ + this.listOfFilterName = [ { text: 'Joe', value: 'Joe' }, { text: 'Jim', value: 'Jim' } ]; - this.filterAddressList = [ + this.listOfFilterAddress = [ { text: 'London', value: 'London' }, { text: 'Sidney', value: 'Sidney' } ]; - this.searchNameList = []; - this.searchAddressList = []; - this.search(this.searchNameList, this.searchAddressList); + this.listOfSearchName = []; + this.listOfSearchAddress = []; + this.search(this.listOfSearchName, this.listOfSearchAddress); } resetSortAndFilters(): void { this.sortName = null; this.sortValue = null; - this.sortMap = { + this.mapOfSort = { name : null, age : null, address: null }; this.resetFilters(); - this.search(this.searchNameList, this.searchAddressList); + this.search(this.listOfSearchName, this.listOfSearchAddress); } } diff --git a/components/table/demo/row-selection-and-operation.md b/components/table/demo/row-selection-and-operation.md index acdd71b9b48..5a67ea65b0c 100644 --- a/components/table/demo/row-selection-and-operation.md +++ b/components/table/demo/row-selection-and-operation.md @@ -7,11 +7,11 @@ title: ## zh-CN -选择后进行操作，完成后清空选择，请注意：数据逻辑需要自行控制。 +第一列是联动的选择框，增加 `nzShowCheckbox` 后，`th` 获得和 `nz-checkbox` 一样的功能，选择后进行操作，完成后清空选择，请注意：数据逻辑需要自行控制。 ## en-US -To perform operations and clear selections after selecting some rows, all data strategy should be controlled by the developers. +Rows can be selectable by making first column as a selectable column, to perform operations and clear selections after selecting some rows, all data strategy should be controlled by the developers. diff --git a/components/table/demo/row-selection-and-operation.ts b/components/table/demo/row-selection-and-operation.ts index f3c0215d492..022bd530f0c 100644 --- a/components/table/demo/row-selection-and-operation.ts +++ b/components/table/demo/row-selection-and-operation.ts @@ -3,21 +3,18 @@ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'nz-demo-table-row-selection-and-operation', template: ` -
- - Selected {{checkedNumber}} items +
+ + Selected {{numberOfChecked}} items
- + - + Name Age Address @@ -25,58 +22,67 @@ import { Component, OnInit } from '@angular/core'; - + {{data.name}} {{data.age}} {{data.address}} `, - styles : [] + styles : [ + ` + .operate { + margin-bottom: 16px; + } + + .operate span { + margin-left: 8px; + } + ` + ] }) export class NzDemoTableRowSelectionAndOperationComponent implements OnInit { - allChecked = false; - disabledButton = true; - checkedNumber = 0; - displayData: Array<{ name: string; age: number; address: string; checked: boolean }> = []; - operating = false; - dataSet = []; - indeterminate = false; + isAllDisplayDataChecked = false; + isOperating = false; + isIndeterminate = false; + listOfDisplayData = []; + listOfAllData = []; + mapOfCheckedId = {}; + numberOfChecked = 0; - currentPageDataChange($event: Array<{ name: string; age: number; address: string; checked: boolean }>): void { - this.displayData = $event; + currentPageDataChange($event: Array<{ id: number, name: string; age: number; address: string; disabled: boolean }>): void { + this.listOfDisplayData = $event; + this.refreshStatus(); } refreshStatus(): void { - const allChecked = this.displayData.every(value => value.checked === true); - const allUnChecked = this.displayData.every(value => !value.checked); - this.allChecked = allChecked; - this.indeterminate = (!allChecked) && (!allUnChecked); - this.disabledButton = !this.dataSet.some(value => value.checked); - this.checkedNumber = this.dataSet.filter(value => value.checked).length; + this.isAllDisplayDataChecked = this.listOfDisplayData.filter(item => !item.disabled).every(item => this.mapOfCheckedId[ item.id ]); + this.isIndeterminate = this.listOfDisplayData.filter(item => !item.disabled).some(item => this.mapOfCheckedId[ item.id ]) && !this.isAllDisplayDataChecked; + this.numberOfChecked = this.listOfAllData.filter(item => this.mapOfCheckedId[ item.id ]).length; } checkAll(value: boolean): void { - this.displayData.forEach(data => data.checked = value); + this.listOfDisplayData.filter(item => !item.disabled).forEach(item => this.mapOfCheckedId[ item.id ] = value); this.refreshStatus(); } operateData(): void { - this.operating = true; - setTimeout(_ => { - this.dataSet.forEach(value => value.checked = false); + this.isOperating = true; + setTimeout(() => { + this.listOfAllData.forEach(item => this.mapOfCheckedId[ item.id ] = false); this.refreshStatus(); - this.operating = false; + this.isOperating = false; }, 1000); } ngOnInit(): void { - for (let i = 0; i < 46; i++) { - this.dataSet.push({ - name : `Edward King ${i}`, - age : 32, - address: `London, Park Lane no. ${i}`, - checked: false + for (let i = 0; i < 100; i++) { + this.listOfAllData.push({ + id : i, + name : `Edward King ${i}`, + age : 32, + address : `London, Park Lane no. ${i}`, + disabled: i % 2 === 0 }); } } diff --git a/components/table/demo/row-selection-custom.ts b/components/table/demo/row-selection-custom.ts index 76c96544620..7c102e37319 100644 --- a/components/table/demo/row-selection-custom.ts +++ b/components/table/demo/row-selection-custom.ts @@ -3,15 +3,13 @@ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'nz-demo-table-row-selection-custom', template: ` - + - + Name Age Address @@ -19,14 +17,13 @@ import { Component, OnInit } from '@angular/core'; - + {{data.name}} {{data.age}} {{data.address}} - `, - styles : [] + ` }) export class NzDemoTableRowSelectionCustomComponent implements OnInit { listOfSelection = [ @@ -39,41 +36,46 @@ export class NzDemoTableRowSelectionCustomComponent implements OnInit { { text : 'Select Odd Row', onSelect: () => { - this.dataSet.forEach((data, index) => data.checked = index % 2 !== 0); + this.listOfDisplayData.forEach((data, index) => this.mapOfCheckedId[data.id] = index % 2 !== 0); this.refreshStatus(); } }, { text : 'Select Even Row', onSelect: () => { - this.dataSet.forEach((data, index) => data.checked = index % 2 === 0); + this.listOfDisplayData.forEach((data, index) => this.mapOfCheckedId[data.id] = index % 2 === 0); this.refreshStatus(); } } ]; - allChecked = false; - dataSet: Array<{ name: string; age: number; address: string; checked: boolean }> = []; - indeterminate = false; + isAllDisplayDataChecked = false; + isIndeterminate = false; + listOfDisplayData = []; + listOfAllData = []; + mapOfCheckedId = {}; + + currentPageDataChange($event: Array<{ id: number, name: string; age: number; address: string}>): void { + this.listOfDisplayData = $event; + this.refreshStatus(); + } refreshStatus(): void { - const allChecked = this.dataSet.every(value => value.checked === true); - const allUnChecked = this.dataSet.every(value => !value.checked); - this.allChecked = allChecked; - this.indeterminate = (!allChecked) && (!allUnChecked); + this.isAllDisplayDataChecked = this.listOfDisplayData.every(item => this.mapOfCheckedId[ item.id ]); + this.isIndeterminate = this.listOfDisplayData.some(item => this.mapOfCheckedId[ item.id ]) && !this.isAllDisplayDataChecked; } checkAll(value: boolean): void { - this.dataSet.forEach(data => data.checked = value); + this.listOfDisplayData.forEach(item => this.mapOfCheckedId[ item.id ] = value); this.refreshStatus(); } ngOnInit(): void { - for (let i = 0; i < 46; i++) { - this.dataSet.push({ - name : `Edward King ${i}`, - age : 32, - address: `London, Park Lane no. ${i}`, - checked: false + for (let i = 0; i < 100; i++) { + this.listOfAllData.push({ + id : i, + name : `Edward King ${i}`, + age : 32, + address : `London, Park Lane no. ${i}` }); } } diff --git a/components/table/demo/row-selection.md b/components/table/demo/row-selection.md deleted file mode 100644 index 61b942efa97..00000000000 --- a/components/table/demo/row-selection.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -order: 2 -title: - en-US: selection - zh-CN: 可选择 ---- - -## zh-CN - -第一列是联动的选择框，增加 `nzShowCheckbox` 后，`th` 获得和 `nz-checkbox` 一样的功能，请注意：数据逻辑需要自行控制。 - -## en-US - -Rows can be selectable by making first column as a selectable column, all data strategy should be controlled by the developers. - - diff --git a/components/table/demo/row-selection.ts b/components/table/demo/row-selection.ts deleted file mode 100644 index b59dd496323..00000000000 --- a/components/table/demo/row-selection.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'nz-demo-table-row-selection', - template: ` - - - - - Name - Age - Address - - - - - - {{data.name}} - {{data.age}} - {{data.address}} - - - `, - styles : [] -}) -export class NzDemoTableRowSelectionComponent { - allChecked = false; - indeterminate = false; - displayData = []; - data = [ - { - name : 'John Brown', - age : 32, - address : 'New York No. 1 Lake Park', - checked : false, - disabled: false - }, - { - name : 'Jim Green', - age : 42, - address : 'London No. 1 Lake Park', - checked : false, - disabled: false - }, - { - name : 'Joe Black', - age : 32, - address : 'Sidney No. 1 Lake Park', - checked : false, - disabled: false - }, - { - name : 'Disabled User', - age : 32, - address : 'Sidney No. 1 Lake Park', - checked : false, - disabled: true - } - ]; - - currentPageDataChange($event: Array<{ name: string; age: number; address: string; checked: boolean; disabled: boolean; }>): void { - this.displayData = $event; - this.refreshStatus(); - } - - refreshStatus(): void { - const allChecked = this.displayData.filter(value => !value.disabled).every(value => value.checked === true); - const allUnChecked = this.displayData.filter(value => !value.disabled).every(value => !value.checked); - this.allChecked = allChecked; - this.indeterminate = (!allChecked) && (!allUnChecked); - } - - checkAll(value: boolean): void { - this.displayData.forEach(data => { - if (!data.disabled) { - data.checked = value; - } - }); - this.refreshStatus(); - } -} diff --git a/components/table/demo/template.md b/components/table/demo/template.md new file mode 100644 index 00000000000..60a952cab0f --- /dev/null +++ b/components/table/demo/template.md @@ -0,0 +1,14 @@ +--- +order: 25 +title: + en-US: Template + zh-CN: 模板用法 +--- + +## zh-CN + +模板模式，显示内容仅由模板内容控制，不再需要向 `nzData` 传入数据，完全像普通 `table` 一样使用，使用 ant-design 的样式。 + +## en-US + +Template mode, same usage as `table`, there is no need to data to `nzData`. \ No newline at end of file diff --git a/components/table/demo/template.ts b/components/table/demo/template.ts new file mode 100644 index 00000000000..84dc02a5f21 --- /dev/null +++ b/components/table/demo/template.ts @@ -0,0 +1,50 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-table-template', + template: ` + + + + Company + Contact + Country + + + + + Alfreds Futterkiste + Maria Anders + Germany + + + Centro comercial Moctezuma + Francisco Chang + Mexico + + + Ernst Handel + Roland Mendel + Austria + + + Island Trading + Helen Bennett + UK + + + Laughing Bacchus Winecellars + Yoshi Tannamuri + Canada + + + Magazzini Alimentari Riuniti + Giovanni Rovelli + Italy + + + + ` +}) +export class NzDemoTableTemplateComponent { +} diff --git a/components/table/demo/virtual.md b/components/table/demo/virtual.md new file mode 100644 index 00000000000..5c7bf62112e --- /dev/null +++ b/components/table/demo/virtual.md @@ -0,0 +1,14 @@ +--- +order: 24 +title: + en-US: Virtual Scroll + zh-CN: 虚拟滚动 +--- + +## zh-CN + +虚拟滚动，结合 [cdk scrolling](https://material.angular.io/cdk/scrolling/overview) 的虚拟滚动，用于巨量数据加载。 + +## en-US + +Virtual scrolling combine with [cdk scrolling](https://material.angular.io/cdk/scrolling/overview) used to display large data. diff --git a/components/table/demo/virtual.ts b/components/table/demo/virtual.ts new file mode 100644 index 00000000000..00d0885839a --- /dev/null +++ b/components/table/demo/virtual.ts @@ -0,0 +1,61 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'nz-demo-table-virtual', + template: ` + + + + Full Name + Age + Column 1 + Column 2 + Column 3 + Column 4 + Column 5 + Column 6 + Column 7 + Column 8 + Action + + + + + + {{data.name}} {{index}} + {{data.age}} + {{data.address}} + {{data.address}} + {{data.address}} + {{data.address}} + {{data.address}} + {{data.address}} + {{data.address}} + {{data.address}} + + action + + + + + + ` +}) +export class NzDemoTableVirtualComponent implements OnInit { + listOfData = []; + + ngOnInit(): void { + for (let i = 0; i < 20000; i++) { + this.listOfData.push({ + name : `Edward King`, + age : 32, + address: `London` + }); + } + } +} diff --git a/components/table/doc/index.en-US.md b/components/table/doc/index.en-US.md index 5df449d452a..16636f6339f 100644 --- a/components/table/doc/index.en-US.md +++ b/components/table/doc/index.en-US.md @@ -82,6 +82,11 @@ The data passed to `[nzData]` will be export with [Template Context](https://ang | `[nzItemRender]` | to customize Pagination item, same as Pagination | `TemplateRef<{ $implicit: 'page'｜'prev'｜'next', page: number }>` | - | | `[nzHideOnSinglePage]` | Whether to hide pager on single page | `boolean` | `false` | | `[nzSimple]` | whether to use simple mode | `boolean` | - | +| `[nzTemplateMode]` | template mode，no need to pass data to `nzData` | `boolean` | `false` | +| `[nzVirtualScroll]` | Enable virtual scroll mode，work with `[nzScroll]` | `boolean` | `false` | +| `[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` | | `(nzPageIndexChange)` | pageIndex change callback | `EventEmitter` | - | | `(nzPageSizeChange)` | pageSize change callback | `EventEmitter` | - | | `(nzCurrentPageDataChange)` | current pageData change callback | `EventEmitter` | - | @@ -179,6 +184,10 @@ Other property | `[nzExpand]` | Whether expand current row，used with `nzExpand` of `td` | `boolean` | - | +### [nz-virtual-scroll] + +virtual scroll directive work with `ng-template`, type: `TemplateRef<{ $implicit: any, index: number }>`. + ## Note diff --git a/components/table/doc/index.zh-CN.md b/components/table/doc/index.zh-CN.md index a9849e33482..c0cb1fda29d 100644 --- a/components/table/doc/index.zh-CN.md +++ b/components/table/doc/index.zh-CN.md @@ -83,6 +83,10 @@ Table 组件同时具备了易用性和高度可定制性 | `[nzItemRender]` | 用于自定义页码的结构，用法参照 Pagination 组件 | `TemplateRef<{ $implicit: 'page'｜'prev'｜'next', page: number }>` | - | | `[nzHideOnSinglePage]` | 只有一页时是否隐藏分页器 | `boolean` | `false` | | `[nzSimple]` | 当添加该属性时，显示为简单分页 | `boolean` | - | +| `[nzVirtualScroll]` | 是否启用虚拟滚动模式，与 `[nzScroll]` 配合使用 | `boolean` | `false` | +| `[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` | | `(nzPageIndexChange)` | 当前页码改版时的回调函数 | `EventEmitter` | - | | `(nzPageSizeChange)` | 页数改变时的回调函数 | `EventEmitter` | - | | `(nzCurrentPageDataChange)` | 当前页面展示数据改变的回调函数 | `EventEmitter` | - | @@ -188,6 +192,10 @@ Table 组件同时具备了易用性和高度可定制性 | --- | --- | --- | --- | | `[nzExpand]` | 当前列是否展开，与 `td` 上的 `nzExpand` 属性配合使用 | `boolean` | - | +### [nz-virtual-scroll] + +虚拟滚动时配合 `ng-template` 使用, 格式为： `TemplateRef<{ $implicit: any, index: number }>`. + ## 注意 diff --git a/components/table/nz-table.component.html b/components/table/nz-table.component.html index ad6c904bb10..e2bda1698af 100644 --- a/components/table/nz-table.component.html +++ b/components/table/nz-table.component.html @@ -9,6 +9,12 @@ + + + + + +
-
- - - - +
-
+ + + + + + + + + +
+ + +
diff --git a/components/table/nz-table.component.ts b/components/table/nz-table.component.ts index e09e8e7fb83..c1397a00c70 100644 --- a/components/table/nz-table.component.ts +++ b/components/table/nz-table.component.ts @@ -1,9 +1,10 @@ +import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, - Component, + Component, ContentChild, ContentChildren, ElementRef, EventEmitter, @@ -20,14 +21,15 @@ import { ViewChild, ViewEncapsulation } from '@angular/core'; -import { fromEvent, merge, Subject } from 'rxjs'; +import { fromEvent, merge, EMPTY, Subject } from 'rxjs'; import { flatMap, startWith, takeUntil } from 'rxjs/operators'; import { NzMeasureScrollbarService } from '../core/services/nz-measure-scrollbar.service'; import { NzSizeMDSType } from '../core/types/size'; -import { InputBoolean } from '../core/util/convert'; +import { InputBoolean, InputNumber } from '../core/util/convert'; import { NzI18nService } from '../i18n/nz-i18n.service'; import { NzThComponent } from './nz-th.component'; import { NzTheadComponent } from './nz-thead.component'; +import { NzVirtualScrollDirective } from './nz-virtual-scroll.directive'; @Component({ selector : 'nz-table', @@ -56,12 +58,18 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy, OnCha headerBottomStyle = {}; private destroy$ = new Subject(); @ContentChildren(NzThComponent, { descendants: true }) listOfNzThComponent: QueryList; - @ViewChild('tableHeaderElement') tableHeaderElement: ElementRef; - @ViewChild('tableBodyElement') tableBodyElement: ElementRef; - @ViewChild('tableMainElement') tableMainElement: ElementRef; + @ViewChild('tableHeaderElement', { read: ElementRef }) tableHeaderElement: ElementRef; + @ViewChild('tableBodyElement', { read: ElementRef }) tableBodyElement: ElementRef; + @ViewChild('tableMainElement', { read: ElementRef }) tableMainElement: ElementRef; + @ViewChild(CdkVirtualScrollViewport, { read: ElementRef }) cdkVirtualScrollElement: ElementRef; + @ContentChild(NzVirtualScrollDirective) nzVirtualScrollDirective: NzVirtualScrollDirective; @Input() nzSize: NzSizeMDSType = 'default'; @Input() nzShowTotal: TemplateRef<{ $implicit: number, range: [ number, number ] }>; @Input() nzPageSizeOptions = [ 10, 20, 30, 40, 50 ]; + @Input() @InputBoolean() nzVirtualScroll = false; + @Input() @InputNumber() nzVirtualItemSize = 0; + @Input() @InputNumber() nzVirtualMaxBufferPx = 200; + @Input() @InputNumber() nzVirtualMinBufferPx = 100; @Input() nzLoadingDelay = 0; @Input() nzTotal = 0; @Input() nzTitle: string | TemplateRef; @@ -75,6 +83,7 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy, OnCha @Input() nzScroll: { x: string; y: string } = { x: null, y: null }; @Input() @ViewChild('renderItemTemplate') nzItemRender: TemplateRef<{ $implicit: 'page' | 'prev' | 'next', page: number }>; @Input() @InputBoolean() nzFrontPagination = true; + @Input() @InputBoolean() nzTemplateMode = false; @Input() @InputBoolean() nzBordered = false; @Input() @InputBoolean() nzShowPagination = true; @Input() @InputBoolean() nzLoading = false; @@ -87,26 +96,44 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy, OnCha /* tslint:disable-next-line:no-any */ @Output() readonly nzCurrentPageDataChange: EventEmitter = new EventEmitter(); + get tableBodyNativeElement(): HTMLElement { + return this.tableBodyElement && this.tableBodyElement.nativeElement; + } + + get tableHeaderNativeElement(): HTMLElement { + return this.tableHeaderElement && this.tableHeaderElement.nativeElement; + } + + get cdkVirtualScrollNativeElement(): HTMLElement { + return this.cdkVirtualScrollElement && this.cdkVirtualScrollElement.nativeElement; + } + + get mixTableBodyNativeElement(): HTMLElement { + return this.tableBodyNativeElement || this.cdkVirtualScrollNativeElement; + } + emitPageSizeOrIndex(size: number, index: number): void { - if (this.nzPageSize !== size) { - this.nzPageSize = size; - this.nzPageSizeChange.emit(this.nzPageSize); - } - if (this.nzPageIndex !== index) { - this.nzPageIndex = index; - this.nzPageIndexChange.emit(this.nzPageIndex); + if (this.nzPageSize !== size || this.nzPageIndex !== index) { + if (this.nzPageSize !== size) { + this.nzPageSize = size; + this.nzPageSizeChange.emit(this.nzPageSize); + } + if (this.nzPageIndex !== index) { + this.nzPageIndex = index; + this.nzPageIndexChange.emit(this.nzPageIndex); + } + this.updateFrontPaginationDataIfNeeded(); } - this.updateFrontPaginationDataIfNeeded(); } syncScrollTable(e: MouseEvent): void { if (e.currentTarget === e.target) { const target = e.target as HTMLElement; if (target.scrollLeft !== this.lastScrollLeft && this.nzScroll && this.nzScroll.x) { - if (target === this.tableBodyElement.nativeElement && this.tableHeaderElement) { - this.tableHeaderElement.nativeElement.scrollLeft = target.scrollLeft; - } else if (target === this.tableHeaderElement.nativeElement && this.tableBodyElement) { - this.tableBodyElement.nativeElement.scrollLeft = target.scrollLeft; + if (target === this.mixTableBodyNativeElement && this.tableHeaderNativeElement) { + this.tableHeaderNativeElement.scrollLeft = target.scrollLeft; + } else if (target === this.tableHeaderNativeElement && this.mixTableBodyNativeElement) { + this.mixTableBodyNativeElement.scrollLeft = target.scrollLeft; } this.setScrollPositionClassName(); } @@ -115,12 +142,12 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy, OnCha } setScrollPositionClassName(): void { - if (this.tableBodyElement && this.nzScroll && this.nzScroll.x) { - if ((this.tableBodyElement.nativeElement.scrollWidth === this.tableBodyElement.nativeElement.clientWidth) && (this.tableBodyElement.nativeElement.scrollWidth !== 0)) { + if (this.mixTableBodyNativeElement && this.nzScroll && this.nzScroll.x) { + if ((this.mixTableBodyNativeElement.scrollWidth === this.mixTableBodyNativeElement.clientWidth) && (this.mixTableBodyNativeElement.scrollWidth !== 0)) { this.setScrollName(); - } else if (this.tableBodyElement.nativeElement.scrollLeft === 0) { + } else if (this.mixTableBodyNativeElement.scrollLeft === 0) { this.setScrollName('left'); - } else if (this.tableBodyElement.nativeElement.scrollWidth === (this.tableBodyElement.nativeElement.scrollLeft + this.tableBodyElement.nativeElement.clientWidth)) { + } else if (this.mixTableBodyNativeElement.scrollWidth === (this.mixTableBodyNativeElement.scrollLeft + this.mixTableBodyNativeElement.clientWidth)) { this.setScrollName('right'); } else { this.setScrollName('middle'); @@ -151,18 +178,21 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy, OnCha } updateFrontPaginationDataIfNeeded(): void { + let data = []; if (this.nzFrontPagination) { - const syncData = [ ...this.nzData ]; - this.nzTotal = syncData.length; - const maxPageIndex = Math.ceil(syncData.length / this.nzPageSize); + this.nzTotal = this.nzData.length; + const maxPageIndex = Math.ceil(this.nzData.length / this.nzPageSize); const pageIndex = !this.nzPageIndex ? 1 : (this.nzPageIndex > maxPageIndex ? maxPageIndex : this.nzPageIndex); if (pageIndex !== this.nzPageIndex) { this.nzPageIndex = pageIndex; Promise.resolve().then(() => this.nzPageIndexChange.emit(pageIndex)); } - this.data = syncData.slice((this.nzPageIndex - 1) * this.nzPageSize, this.nzPageIndex * this.nzPageSize); - this.nzCurrentPageDataChange.emit(this.data); + data = this.nzData.slice((this.nzPageIndex - 1) * this.nzPageSize, this.nzPageIndex * this.nzPageSize); + } else { + data = this.nzData; } + this.data = [ ...data ]; + this.nzCurrentPageDataChange.next(this.data); } constructor(private renderer: Renderer2, private ngZone: NgZone, private cdr: ChangeDetectorRef, private nzMeasureScrollbarService: NzMeasureScrollbarService, private i18n: NzI18nService, elementRef: ElementRef) { @@ -185,12 +215,6 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy, OnCha } this.setScrollPositionClassName(); } - if (changes.nzFrontPagination || changes.nzData) { - if (!this.nzFrontPagination) { - this.data = [ ...this.nzData ]; - this.nzCurrentPageDataChange.emit(this.data); - } - } if (changes.nzPageIndex || changes.nzPageSize || changes.nzFrontPagination || changes.nzData) { this.updateFrontPaginationDataIfNeeded(); } @@ -200,17 +224,12 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy, OnCha ngAfterViewInit(): void { setTimeout(() => this.setScrollPositionClassName()); this.ngZone.runOutsideAngular(() => { - if (this.tableHeaderElement - && this.tableHeaderElement.nativeElement - && this.tableBodyElement - && this.tableBodyElement.nativeElement) { - merge( - fromEvent(this.tableHeaderElement.nativeElement, 'scroll'), - fromEvent(this.tableBodyElement.nativeElement, 'scroll') - ).pipe(takeUntil(this.destroy$)).subscribe((data: MouseEvent) => { - this.syncScrollTable(data); - }); - } + merge( + this.tableHeaderNativeElement ? fromEvent(this.tableHeaderNativeElement, 'scroll') : EMPTY, + this.mixTableBodyNativeElement ? fromEvent(this.mixTableBodyNativeElement, 'scroll') : EMPTY + ).pipe(takeUntil(this.destroy$)).subscribe((data: MouseEvent) => { + this.syncScrollTable(data); + }); fromEvent(window, 'resize').pipe(startWith(true), takeUntil(this.destroy$)).subscribe(() => { this.fitScrollBar(); this.setScrollPositionClassName(); diff --git a/components/table/nz-table.module.ts b/components/table/nz-table.module.ts index 6a0549f5d29..06e1e9fbd13 100644 --- a/components/table/nz-table.module.ts +++ b/components/table/nz-table.module.ts @@ -1,7 +1,7 @@ +import { ScrollingModule } from '@angular/cdk/scrolling'; import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; - import { NzCheckboxModule } from '../checkbox/nz-checkbox.module'; import { NzAddOnModule } from '../core/addon/addon.module'; import { NzDropDownModule } from '../dropdown/nz-dropdown.module'; @@ -19,10 +19,11 @@ import { NzTdComponent } from './nz-td.component'; import { NzThComponent } from './nz-th.component'; import { NzTheadComponent } from './nz-thead.component'; import { NzTrDirective } from './nz-tr.directive'; +import { NzVirtualScrollDirective } from './nz-virtual-scroll.directive'; @NgModule({ - declarations: [ NzTableComponent, NzThComponent, NzTdComponent, NzTheadComponent, NzTbodyDirective, NzTrDirective ], - exports : [ NzTableComponent, NzThComponent, NzTdComponent, NzTheadComponent, NzTbodyDirective, NzTrDirective ], + declarations: [ NzTableComponent, NzThComponent, NzTdComponent, NzTheadComponent, NzTbodyDirective, NzTrDirective, NzVirtualScrollDirective ], + exports : [ NzTableComponent, NzThComponent, NzTdComponent, NzTheadComponent, NzTbodyDirective, NzTrDirective, NzVirtualScrollDirective ], imports : [ NzMenuModule, FormsModule, @@ -35,7 +36,8 @@ import { NzTrDirective } from './nz-tr.directive'; NzSpinModule, NzI18nModule, NzIconModule, - NzEmptyModule + NzEmptyModule, + ScrollingModule ] }) export class NzTableModule { diff --git a/components/table/nz-th.component.html b/components/table/nz-th.component.html index eedad432864..27dacb65907 100644 --- a/components/table/nz-th.component.html +++ b/components/table/nz-th.component.html @@ -38,7 +38,7 @@ [class.off]="nzSort != 'descend'">
- +
    @@ -48,7 +48,7 @@
  • - +
diff --git a/components/table/nz-virtual-scroll.directive.ts b/components/table/nz-virtual-scroll.directive.ts new file mode 100644 index 00000000000..677e0fed7e6 --- /dev/null +++ b/components/table/nz-virtual-scroll.directive.ts @@ -0,0 +1,11 @@ +import { Directive, TemplateRef } from '@angular/core'; + +@Directive({ + selector: '[nz-virtual-scroll]' +}) + +export class NzVirtualScrollDirective { + /* tslint:disable-next-line:no-any */ + constructor(public templateRef: TemplateRef<{ $implicit: any, index: number }>) { + } +} diff --git a/scripts/site/_site/doc/app/share/share.module.ts b/scripts/site/_site/doc/app/share/share.module.ts index 42517cc4852..09d071d0d0c 100644 --- a/scripts/site/_site/doc/app/share/share.module.ts +++ b/scripts/site/_site/doc/app/share/share.module.ts @@ -1,4 +1,5 @@ -import { ScrollDispatchModule } from '@angular/cdk/scrolling'; +import { DragDropModule } from '@angular/cdk/drag-drop'; +import { ScrollingModule } from '@angular/cdk/scrolling'; import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @@ -7,7 +8,6 @@ import { NgZorroAntdModule } from 'ng-zorro-antd'; import { ColorSketchModule } from 'ngx-color/sketch'; - import { NzCodeBoxModule } from './nz-codebox/nz-codebox.module'; import { NzHighlightModule } from './nz-highlight/nz-highlight.module'; import { NzNavBottomModule } from './nz-nav-bottom/nz-nav-bottom.module'; @@ -23,7 +23,8 @@ import { NzNavBottomModule } from './nz-nav-bottom/nz-nav-bottom.module'; NzHighlightModule, NzNavBottomModule, // third libs - ColorSketchModule + ColorSketchModule, + DragDropModule ], exports: [ CommonModule, @@ -35,8 +36,10 @@ import { NzNavBottomModule } from './nz-nav-bottom/nz-nav-bottom.module'; NzHighlightModule, NzNavBottomModule, // third libs - ScrollDispatchModule, - ColorSketchModule + ScrollingModule, + ColorSketchModule, + DragDropModule ] }) -export class ShareModule { } +export class ShareModule { +}