From 106e09f5b131c5a98242c70223c834e666357488 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=89=A7=E8=A1=A1?= Date: Fri, 1 Sep 2017 18:48:45 +0800 Subject: [PATCH] feat(module:table): support filter & fixed header add more table demo close #86 close #174 close #218 --- .../dropdown/nz-dropdown.component.ts | 23 ++- .../dropdown/nz-dropdown.directive.ts | 4 +- src/components/menu/nz-menu-item.component.ts | 4 +- .../table/nz-table-filter.component.ts | 33 ++++ src/components/table/nz-table.component.ts | 97 ++++++++--- src/components/table/nz-table.module.ts | 5 +- src/components/table/nz-th.directive.ts | 19 ++- src/components/util/mesureScrollBar.ts | 30 ++++ src/showcase/app.module.ts | 4 +- .../nz-demo-dropdown/nz-demo-dropdown.html | 7 +- .../nz-demo-table-ajax.component.ts | 54 +++++- ...nz-demo-table-colspan-rowspan.component.ts | 73 ++++++++ .../nz-demo-table-custom-filter.component.ts | 149 ++++++++++++++++ .../nz-demo-table-edit.component.ts | 83 +++++++++ .../nz-demo-table-fixed-header.component.ts | 42 +++++ .../nz-demo-table-reset-filter.component.ts | 160 ++++++++++++++++++ .../nz-demo-table-size.component.ts | 31 +++- .../nz-demo-table-sort.component.ts | 72 -------- .../nz-demo-table/nz-demo-table.component.ts | 6 +- src/showcase/nz-demo-table/nz-demo-table.html | 87 +++++++--- .../nz-demo-table/nz-demo-table.module.ts | 8 +- .../nz-demo-table/randomUser.service.ts | 35 ++-- 22 files changed, 841 insertions(+), 185 deletions(-) create mode 100644 src/components/table/nz-table-filter.component.ts create mode 100644 src/components/util/mesureScrollBar.ts create mode 100644 src/showcase/nz-demo-table/nz-demo-table-colspan-rowspan.component.ts create mode 100644 src/showcase/nz-demo-table/nz-demo-table-custom-filter.component.ts create mode 100644 src/showcase/nz-demo-table/nz-demo-table-edit.component.ts create mode 100644 src/showcase/nz-demo-table/nz-demo-table-fixed-header.component.ts create mode 100644 src/showcase/nz-demo-table/nz-demo-table-reset-filter.component.ts delete mode 100644 src/showcase/nz-demo-table/nz-demo-table-sort.component.ts diff --git a/src/components/dropdown/nz-dropdown.component.ts b/src/components/dropdown/nz-dropdown.component.ts index 79d1ccb57d1..2ebb8647eeb 100644 --- a/src/components/dropdown/nz-dropdown.component.ts +++ b/src/components/dropdown/nz-dropdown.component.ts @@ -26,13 +26,13 @@ import { ConnectionPositionPair } from '../core/overlay'; export type NzPlacement = 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight'; @Component({ - selector : 'nz-dropdown', - encapsulation: ViewEncapsulation.None, - animations : [ + selector : 'nz-dropdown', + encapsulation : ViewEncapsulation.None, + animations : [ DropDownAnimation ], changeDetection: ChangeDetectionStrategy.OnPush, - template : ` + template : `
@@ -53,16 +53,21 @@ export type NzPlacement = 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLe (mouseleave)="_onMouseLeaveEvent($event)" [style.minWidth.px]="_triggerWidth" (click)="_clickDropDown($event)"> - +
+ + +
+ `, - styleUrls : [ + styleUrls : [ './style/index.less', './style/patch.less' ] }) export class NzDropDownComponent implements OnInit, OnDestroy, AfterViewInit { + hasFilterButton = false; _triggerWidth = 0; _placement: NzPlacement = 'bottomLeft'; _dropDownPosition: 'top' | 'bottom' = 'bottom'; @@ -143,7 +148,9 @@ export class NzDropDownComponent implements OnInit, OnDestroy, AfterViewInit { } ngOnInit() { - this._nzMenu.setDropDown(true); + if (this._nzMenu) { + this._nzMenu.setDropDown(true); + } } ngOnDestroy() { @@ -180,7 +187,7 @@ export class NzDropDownComponent implements OnInit, OnDestroy, AfterViewInit { mouse$, this.nzVisibleChange.asObservable() ) - , 300); + , 300); this._startSubscribe(observable$); } diff --git a/src/components/dropdown/nz-dropdown.directive.ts b/src/components/dropdown/nz-dropdown.directive.ts index 56dde1da3bf..59c8ec265d2 100644 --- a/src/components/dropdown/nz-dropdown.directive.ts +++ b/src/components/dropdown/nz-dropdown.directive.ts @@ -1,8 +1,10 @@ -import { Directive, ElementRef } from '@angular/core'; +import { Directive, ElementRef, HostBinding } from '@angular/core'; + @Directive({ selector: '[nz-dropdown]', }) export class NzDropDownDirective { + @HostBinding('class.ant-dropdown-trigger') _dropDownTrigger = true; constructor(public elementRef: ElementRef) { } } diff --git a/src/components/menu/nz-menu-item.component.ts b/src/components/menu/nz-menu-item.component.ts index 6e9b3e29456..374c5036314 100644 --- a/src/components/menu/nz-menu-item.component.ts +++ b/src/components/menu/nz-menu-item.component.ts @@ -31,9 +31,9 @@ export class NzMenuItemComponent implements AfterViewInit { set nzSelected(value: boolean) { this.selected = value; if (value) { - this._renderer.addClass(this.hostElement.nativeElement, 'ant-menu-item-selected') + this._renderer.addClass(this.hostElement.nativeElement, this.isInDropDown ? 'ant-dropdown-menu-item-selected' : 'ant-menu-item-selected') } else { - this._renderer.removeClass(this.hostElement.nativeElement, 'ant-menu-item-selected') + this._renderer.removeClass(this.hostElement.nativeElement, this.isInDropDown ? 'ant-dropdown-menu-item-selected' : 'ant-menu-item-selected') } } diff --git a/src/components/table/nz-table-filter.component.ts b/src/components/table/nz-table-filter.component.ts new file mode 100644 index 00000000000..11c6691e993 --- /dev/null +++ b/src/components/table/nz-table-filter.component.ts @@ -0,0 +1,33 @@ +import { + Component, + HostBinding, OnInit +} from '@angular/core'; +import { NzDropDownComponent } from '../dropdown/nz-dropdown.component'; + +@Component({ + selector: '[nz-table-filter]', + template: ` + + + + + + + ` +}) +export class NzTableFilterComponent implements OnInit { + @HostBinding('class.ant-table-filter-dropdown-btns') _dropDownButton = true; + + hideDropDown() { + this.nzDropDownComponent.nzVisible = false; + this.nzDropDownComponent._hide(); + } + + constructor(private nzDropDownComponent: NzDropDownComponent) { + } + + ngOnInit() { + this.nzDropDownComponent.hasFilterButton = true; + this.nzDropDownComponent.nzClickHide = false; + } +} diff --git a/src/components/table/nz-table.component.ts b/src/components/table/nz-table.component.ts index e6d7583d6a3..4c2c56f68f1 100644 --- a/src/components/table/nz-table.component.ts +++ b/src/components/table/nz-table.component.ts @@ -5,8 +5,12 @@ import { ElementRef, AfterViewInit, EventEmitter, - Output + Output, + ContentChild, + ChangeDetectorRef, + TemplateRef, OnInit } from '@angular/core'; +import { measureScrollbar } from '../util/mesureScrollBar'; @Component({ selector : 'nz-table', @@ -19,6 +23,8 @@ import {
-
- - -
-
-
- 没有数据 -
-
- -
-
- +
+
+ + + + + +
+
+
+ + + + + +
+
+
+ 没有数据 +
+
+ +
+
+ +
+ + - - `, styleUrls : [ @@ -64,16 +83,19 @@ import { './style/patch.less' ] }) -export class NzTableComponent implements AfterViewInit { +export class NzTableComponent implements AfterViewInit, OnInit { /** public data for ngFor tr */ data = []; + _scroll; _el: HTMLElement; + _headerBottomStyle; _current = 1; _total: number; _pageSize = 10; _dataSet = []; _isInit = false; _isAjax = false; + ths = []; @Output() nzPageSizeChange: EventEmitter = new EventEmitter(); @Output() nzPageIndexChange: EventEmitter = new EventEmitter(); @Output() nzDataChange: EventEmitter = new EventEmitter(); @@ -88,6 +110,17 @@ export class NzTableComponent implements AfterViewInit { @Input() nzShowTotal = false; @Input() nzShowFooter = false; @Input() nzShowTitle = false; + @ContentChild('nzFixedHeader') fixedHeader: TemplateRef; + + @Input() + set nzScroll(value) { + this._scroll = value; + this._cd.detectChanges(); + } + + get nzScroll() { + return this._scroll; + } /** async data */ @Input() @@ -172,7 +205,15 @@ export class NzTableComponent implements AfterViewInit { } } - constructor(private _elementRef: ElementRef) { + ngOnInit() { + const scrollbarWidth = measureScrollbar(); + this._headerBottomStyle = { + marginBottom : `-${scrollbarWidth}px`, + paddingBottom: `0px` + } + } + + constructor(private _elementRef: ElementRef, private _cd: ChangeDetectorRef) { this._el = this._elementRef.nativeElement; } diff --git a/src/components/table/nz-table.module.ts b/src/components/table/nz-table.module.ts index 562ac5b10a0..d3a9effe8df 100644 --- a/src/components/table/nz-table.module.ts +++ b/src/components/table/nz-table.module.ts @@ -2,6 +2,7 @@ import { NgModule } from '@angular/core'; import { NzTableComponent } from './nz-table.component'; import { NzThDirective } from './nz-th.directive'; import { NzTdDirective } from './nz-td.directive'; +import { NzTableFilterComponent } from './nz-table-filter.component'; import { NzTheadDirective } from './nz-thead.directive'; import { NzTbodyDirective } from './nz-tbody.directive'; import { NzTbodyTrDirective } from './nz-tbody-tr.directive'; @@ -13,8 +14,8 @@ import { NzPaginationModule } from '../pagination/nz-pagination.module'; import { CommonModule } from '@angular/common'; @NgModule({ - declarations: [ NzTableComponent, NzThDirective, NzTdDirective, NzTheadDirective, NzTbodyDirective, NzTbodyTrDirective, NzTableDividerDirective, NzTableSortComponent ], - exports : [ NzTableComponent, NzThDirective, NzTdDirective, NzTheadDirective, NzTbodyDirective, NzTbodyTrDirective, NzTableDividerDirective, NzTableSortComponent ], + declarations: [ NzTableFilterComponent, NzTableComponent, NzThDirective, NzTdDirective, NzTheadDirective, NzTbodyDirective, NzTbodyTrDirective, NzTableDividerDirective, NzTableSortComponent ], + exports : [ NzTableFilterComponent, NzTableComponent, NzThDirective, NzTdDirective, NzTheadDirective, NzTbodyDirective, NzTbodyTrDirective, NzTableDividerDirective, NzTableSortComponent ], imports : [ CommonModule, NzPaginationModule, NzSpinModule ] }) diff --git a/src/components/table/nz-th.directive.ts b/src/components/table/nz-th.directive.ts index ea4780fec96..39372e3ebab 100644 --- a/src/components/table/nz-th.directive.ts +++ b/src/components/table/nz-th.directive.ts @@ -2,17 +2,30 @@ import { Directive, Input, HostBinding, - ElementRef + ElementRef, OnInit, OnDestroy } from '@angular/core'; +import { NzTableComponent } from './nz-table.component'; @Directive({ selector: '[nz-th]' }) -export class NzThDirective { +export class NzThDirective implements OnInit, OnDestroy { _el: HTMLElement; + @Input() nzWidth; @Input() @HostBinding(`class.ant-table-selection-column`) nzCheckbox; - constructor(private _elementRef: ElementRef) { + constructor(private _elementRef: ElementRef, private nzTableComponent: NzTableComponent) { this._el = this._elementRef.nativeElement; } + + ngOnInit() { + this.nzTableComponent.ths.push(this); + } + + ngOnDestroy() { + const index = this.nzTableComponent.ths.indexOf(this); + if (index > -1) { + this.nzTableComponent.ths.splice(index, 1); + } + } } diff --git a/src/components/util/mesureScrollBar.ts b/src/components/util/mesureScrollBar.ts new file mode 100644 index 00000000000..3bafcc1c795 --- /dev/null +++ b/src/components/util/mesureScrollBar.ts @@ -0,0 +1,30 @@ +let scrollbarWidth; + +// Measure scrollbar width for padding body during modal show/hide +const scrollbarMeasure = { + position: 'absolute', + top: '-9999px', + width: '50px', + height: '50px', + overflow: 'scroll', +}; + +export function measureScrollbar() { + if (typeof document === 'undefined' || typeof window === 'undefined') { + return 0; + } + if (scrollbarWidth) { + return scrollbarWidth; + } + const scrollDiv = document.createElement('div'); + for (const scrollProp in scrollbarMeasure) { + if (scrollbarMeasure.hasOwnProperty(scrollProp)) { + scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp]; + } + } + document.body.appendChild(scrollDiv); + const width = scrollDiv.offsetWidth - scrollDiv.clientWidth; + document.body.removeChild(scrollDiv); + scrollbarWidth = width; + return scrollbarWidth; +} diff --git a/src/showcase/app.module.ts b/src/showcase/app.module.ts index a1f26071a9e..bbe3e022b35 100644 --- a/src/showcase/app.module.ts +++ b/src/showcase/app.module.ts @@ -2,7 +2,7 @@ import { BrowserModule, Title } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { FormsModule } from '@angular/forms'; -import { HttpModule } from '@angular/http'; +import { HttpClientModule } from '@angular/common/http'; import { RouterModule, PreloadAllModules } from '@angular/router'; import { routes } from './app.routing.module'; import { AppComponent } from './app.component'; @@ -18,7 +18,7 @@ import { NzHighlightModule } from './share/nz-highlight/nz-highlight.module'; BrowserModule, BrowserAnimationsModule, FormsModule, - HttpModule, + HttpClientModule, NgZorroAntdModule.forRoot({ extraFontName: 'anticon', extraFontUrl: './assets/fonts/iconfont' }), NzCodeBoxModule, NzHighlightModule, diff --git a/src/showcase/nz-demo-dropdown/nz-demo-dropdown.html b/src/showcase/nz-demo-dropdown/nz-demo-dropdown.html index 1311bd21835..6e3c393a939 100644 --- a/src/showcase/nz-demo-dropdown/nz-demo-dropdown.html +++ b/src/showcase/nz-demo-dropdown/nz-demo-dropdown.html @@ -2,7 +2,6 @@

Dropdown 下拉菜单

向下弹出的列表。

何时使用 -

当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。

@@ -90,6 +89,12 @@

nz-dropdown Directive - + + [nz-dropdown-custom] + 自定义下拉菜单内容，不可与menu混用 + ng-content + - + nzTrigger 触发下拉的行为 diff --git a/src/showcase/nz-demo-table/nz-demo-table-ajax.component.ts b/src/showcase/nz-demo-table/nz-demo-table-ajax.component.ts index 5452fac35cd..46da5931e29 100644 --- a/src/showcase/nz-demo-table/nz-demo-table-ajax.component.ts +++ b/src/showcase/nz-demo-table/nz-demo-table-ajax.component.ts @@ -11,13 +11,32 @@ import { RandomUserService } from './randomUser.service'; [nzLoading]="_loading" [nzTotal]="_total" [(nzPageIndex)]="_current" - (nzPageIndexChange)="_refreshData()" + (nzPageIndexChange)="refreshData()" [(nzPageSize)]="_pageSize" - (nzPageSizeChange)="_refreshData()"> + (nzPageSizeChange)="refreshData(true)"> - Name - Age + + Name + + + + Age + + +
    +
  • + +
    • +
+
+ OK + Reset +
+ + Email @@ -39,13 +58,34 @@ export class NzDemoTableAjaxComponent implements OnInit { _total = 1; _dataSet = []; _loading = true; + _sortValue = null; + _filterGender = [ + { name: 'male', value: false }, + { name: 'female', value: false } + ]; + + sort(value) { + this._sortValue = value; + this.refreshData(); + } + + reset() { + this._filterGender.forEach(item => { + item.value = false; + }); + this.refreshData(true); + } constructor(private _randomUser: RandomUserService) { } - _refreshData = () => { + refreshData(reset = false) { + if (reset) { + this._current = 1; + } this._loading = true; - this._randomUser.getUsers(this._current, this._pageSize).subscribe((data: any) => { + const selectedGender = this._filterGender.filter(item => item.value).map(item => item.name); + this._randomUser.getUsers(this._current, this._pageSize, 'name', this._sortValue, selectedGender).subscribe((data: any) => { this._loading = false; this._total = 200; this._dataSet = data.results; @@ -53,7 +93,7 @@ export class NzDemoTableAjaxComponent implements OnInit { }; ngOnInit() { - this._refreshData(); + this.refreshData(); } } diff --git a/src/showcase/nz-demo-table/nz-demo-table-colspan-rowspan.component.ts b/src/showcase/nz-demo-table/nz-demo-table-colspan-rowspan.component.ts new file mode 100644 index 00000000000..4b68dbd6231 --- /dev/null +++ b/src/showcase/nz-demo-table/nz-demo-table-colspan-rowspan.component.ts @@ -0,0 +1,73 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'nz-demo-table-colspan-rowspan', + template: ` + + + + Name + Age + Home phone + Address + + + + + + {{data.name}} + + {{data.age}} + {{data.tel}} + {{data.phone}} + {{data.address}} + + + `, + styles : [] +}) +export class NzDemoTableColspanRowspanComponent implements OnInit { + data = [ { + key : '1', + name : 'John Brown', + age : 32, + tel : '0571-22098909', + phone : 18889898989, + address: 'New York No. 1 Lake Park', + }, { + key : '2', + name : 'Jim Green', + tel : '0571-22098333', + phone : 18889898888, + age : 42, + address: 'London No. 1 Lake Park', + }, { + key : '3', + name : 'Joe Black', + age : 32, + tel : '0575-22098909', + phone : 18900010002, + address: 'Sidney No. 1 Lake Park', + }, { + key : '4', + name : 'Jim Red', + age : 18, + tel : '0575-22098909', + phone : 18900010002, + address: 'London No. 2 Lake Park', + }, { + key : '5', + name : 'Jake White', + age : 18, + tel : '0575-22098909', + phone : 18900010002, + address: 'Dublin No. 2 Lake Park', + } ]; + + constructor() { + } + + ngOnInit() { + } +} + diff --git a/src/showcase/nz-demo-table/nz-demo-table-custom-filter.component.ts b/src/showcase/nz-demo-table/nz-demo-table-custom-filter.component.ts new file mode 100644 index 00000000000..c2da33d6f46 --- /dev/null +++ b/src/showcase/nz-demo-table/nz-demo-table-custom-filter.component.ts @@ -0,0 +1,149 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'nz-demo-table-custom-filter', + template: ` + + + + + Name + + +
+ + +
+ + + + Age + + + Address + + +
    +
  • + +
    • +
+
+ OK + Reset +
+ + + + + + + + {{data.name}} + + {{data.age}} + {{data.address}} + + + `, + styles : [ + ` + .custom-filter-dropdown { + padding: 8px; + border-radius: 6px; + background: #fff; + box-shadow: 0 1px 6px rgba(0, 0, 0, .2); + } + + .custom-filter-dropdown ::ng-deep nz-input { + width: 130px; + margin-right: 8px; + } + + .highlight { + color: #f50; + } + ` + ] +}) +export class NzDemoTableCustomFilterComponent implements OnInit { + searchValue = ''; + filterAddressArray = [ + { name: 'London', value: false }, + { name: 'Sidney', value: false } + ]; + sortMap = { + name : null, + age : null, + address: null + }; + sortName = null; + sortValue = null; + data = [ + { + name : 'John Brown', + age : 32, + address: 'New York No. 1 Lake Park', + }, { + name : 'Jim Green', + age : 42, + address: 'London No. 1 Lake Park', + }, { + name : 'Joe Black', + age : 32, + address: 'Sidney No. 1 Lake Park', + }, { + name : 'Jim Red', + age : 32, + address: 'London No. 2 Lake Park', + } + ]; + copyData = [ ...this.data ]; + + sort(sortName, value) { + this.sortName = sortName; + this.sortValue = value; + Object.keys(this.sortMap).forEach(key => { + if (key !== sortName) { + this.sortMap[ key ] = null; + } else { + this.sortMap[ key ] = value; + } + }); + this.search(); + } + + search() { + const searchAddress = this.filterAddressArray.filter(address => address.value); + const filterFunc = (item) => { + return (searchAddress.length ? searchAddress.some(address => item.address.indexOf(address.name) !== -1) : true) && + (item.name.indexOf(this.searchValue) !== -1) + }; + this.data = [ ...this.copyData.filter(item => filterFunc(item)) ]; + this.data = [ ...this.data.sort((a, b) => { + if (a[ this.sortName ] > b[ this.sortName ]) { + return (this.sortValue === 'ascend') ? 1 : -1; + } else if (a[ this.sortName ] < b[ this.sortName ]) { + return (this.sortValue === 'ascend') ? -1 : 1; + } else { + return 0; + } + }) ]; + } + + reset(array) { + array.forEach(item => { + item.value = false; + }); + this.search(); + } + + constructor() { + } + + ngOnInit() { + } +} + diff --git a/src/showcase/nz-demo-table/nz-demo-table-edit.component.ts b/src/showcase/nz-demo-table/nz-demo-table-edit.component.ts new file mode 100644 index 00000000000..31e497f1b30 --- /dev/null +++ b/src/showcase/nz-demo-table/nz-demo-table-edit.component.ts @@ -0,0 +1,83 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'nz-demo-table-edit', + template: ` + + + + name + age + address + action + + + + + + {{data.name}} + + + + + + {{data.age}} + + + + + {{data.address}} + + + Edit + + + Save + + + Cancel + + + + + + `, + styles : [] +}) +export class NzDemoTableEditComponent implements OnInit { + editRow = null; + tempEditObject = {}; + data = [ + { + key : 0, + name : 'Edward King 0', + age : 32, + address: 'London, Park Lane no. 0', + } + ]; + + edit(data) { + this.tempEditObject[ data.key ] = { ...data }; + this.editRow = data.key; + } + + save(data) { + Object.assign(data, this.tempEditObject[ data.key ]); + this.editRow = null; + } + + cancel(data) { + this.tempEditObject[ data.key ] = {}; + this.editRow = null; + } + + constructor() { + } + + ngOnInit() { + this.data.forEach(item => { + this.tempEditObject[ item.key ] = {}; + }) + } +} + diff --git a/src/showcase/nz-demo-table/nz-demo-table-fixed-header.component.ts b/src/showcase/nz-demo-table/nz-demo-table-fixed-header.component.ts new file mode 100644 index 00000000000..f5b1702c957 --- /dev/null +++ b/src/showcase/nz-demo-table/nz-demo-table-fixed-header.component.ts @@ -0,0 +1,42 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'nz-demo-table-fixed-header', + template: ` + + + + + Name + Age + Address + + + + + + {{data.name}} + {{data.age}} + {{data.address}} + + + `, + styles : [] +}) +export class NzDemoTableFixedHeaderComponent implements OnInit { + data = []; + + constructor() { + } + + ngOnInit() { + for (let i = 0; i < 100; i++) { + this.data.push({ + name : `Edward King ${i}`, + age : 32, + address: `London, Park Lane no. ${i}`, + }); + } + } +} + diff --git a/src/showcase/nz-demo-table/nz-demo-table-reset-filter.component.ts b/src/showcase/nz-demo-table/nz-demo-table-reset-filter.component.ts new file mode 100644 index 00000000000..a3d27519ca0 --- /dev/null +++ b/src/showcase/nz-demo-table/nz-demo-table-reset-filter.component.ts @@ -0,0 +1,160 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'nz-demo-table-reset-filter', + template: ` +
+ + + +
+ + + + + Name + + + +
    +
  • + +
    • +
+
+ OK + Reset +
+ + + + Age + + + + Address + + + +
    +
  • + +
    • +
+
+ OK + Reset +
+ + + + + + + + {{data.name}} + + {{data.age}} + {{data.address}} + + + `, + styles : [ + ` + .table-operations { + margin-bottom: 16px; + } + + .table-operations > button { + margin-right: 8px; + } + ` + ] +}) +export class NzDemoTableResetFilterComponent implements OnInit { + filterNameArray = [ + { name: 'Joe', value: false }, + { name: 'Jim', value: false }, + ]; + filterAddressArray = [ + { name: 'London', value: false }, + { name: 'Sidney', value: false } + ]; + sortMap = { + name : null, + age : null, + address: null + }; + sortName = null; + sortValue = null; + data = [ + { + name : 'John Brown', + age : 32, + address: 'New York No. 1 Lake Park', + }, { + name : 'Jim Green', + age : 42, + address: 'London No. 1 Lake Park', + }, { + name : 'Joe Black', + age : 32, + address: 'Sidney No. 1 Lake Park', + }, { + name : 'Jim Red', + age : 32, + address: 'London No. 2 Lake Park', + } + ]; + copyData = [ ...this.data ]; + + sort(sortName, value) { + this.sortName = sortName; + this.sortValue = value; + Object.keys(this.sortMap).forEach(key => { + if (key !== sortName) { + this.sortMap[ key ] = null; + } else { + this.sortMap[ key ] = value; + } + }); + this.search(); + } + + search() { + const searchAddress = this.filterAddressArray.filter(address => address.value); + const searchName = this.filterNameArray.filter(name => name.value); + const filterFunc = (item) => { + return (searchAddress.length ? searchAddress.some(address => item.address.indexOf(address.name) !== -1) : true) && + (searchName.length ? searchName.some(name => item.name.indexOf(name.name) !== -1) : true) + }; + this.data = [ ...this.copyData.filter(item => filterFunc(item)) ]; + this.data = [ ...this.data.sort((a, b) => { + if (a[ this.sortName ] > b[ this.sortName ]) { + return (this.sortValue === 'ascend') ? 1 : -1; + } else if (a[ this.sortName ] < b[ this.sortName ]) { + return (this.sortValue === 'ascend') ? -1 : 1; + } else { + return 0; + } + }) ]; + } + + reset(array) { + array.forEach(item => { + item.value = false; + }); + this.search(); + } + + constructor() { + } + + ngOnInit() { + } +} + diff --git a/src/showcase/nz-demo-table/nz-demo-table-size.component.ts b/src/showcase/nz-demo-table/nz-demo-table-size.component.ts index 3785162ee50..ca8ac878274 100644 --- a/src/showcase/nz-demo-table/nz-demo-table-size.component.ts +++ b/src/showcase/nz-demo-table/nz-demo-table-size.component.ts @@ -53,6 +53,14 @@ import { Component, OnInit } from '@angular/core'; +
+
+ +
+
+ +
+
@@ -75,6 +83,7 @@ import { Component, OnInit } from '@angular/core';
Here is Title - - - Name - Age - Address - Action - - + + + + Name + Age + Address + Action + + + {{data.name}} @@ -130,6 +141,7 @@ import { Component, OnInit } from '@angular/core'; .components-table-demo-control-bar { margin-bottom: 10px; } + .components-table-demo-control-bar ::ng-deep .ant-form-item { margin-right: 16px; margin-bottom: 8px; @@ -139,12 +151,13 @@ import { Component, OnInit } from '@angular/core'; }) export class NzDemoTableSizeComponent implements OnInit { _dataSet = []; - _bordered = false; + _bordered = true; _loading = false; _pagination = true; _header = true; _title = true; _footer = true; + _fixHeader = false; _size = 'small'; constructor() { diff --git a/src/showcase/nz-demo-table/nz-demo-table-sort.component.ts b/src/showcase/nz-demo-table/nz-demo-table-sort.component.ts deleted file mode 100644 index c1212ebcc24..00000000000 --- a/src/showcase/nz-demo-table/nz-demo-table-sort.component.ts +++ /dev/null @@ -1,72 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'nz-demo-table-sort', - template: ` - - - - - - Name - - - - - Age - - - - Address - - - - - - {{data.name}} - - {{data.age}} - {{data.address}} - - - `, - styles : [] -}) -export class NzDemoTableSortComponent implements OnInit { - ageSort = 'false'; - data = [ { - key : '1', - name : 'John Brown', - age : 32, - address: 'New York No. 1 Lake Park', - }, { - key : '2', - name : 'Jim Green', - age : 42, - address: 'London No. 1 Lake Park', - }, { - key : '3', - name : 'Joe Black', - age : 32, - address: 'Sidney No. 1 Lake Park', - } ]; - - ageSortChange($event) { - if ($event === 'ascend') { - this.data = [ ...this.data.sort((a, b) => { - return a.age - b.age; - }) ]; - } else if ($event === 'descend') { - this.data = [ ...this.data.sort((a, b) => { - return b.age - a.age; - }) ]; - } - } - - constructor() { - } - - ngOnInit() { - } -} - diff --git a/src/showcase/nz-demo-table/nz-demo-table.component.ts b/src/showcase/nz-demo-table/nz-demo-table.component.ts index 86fff23f3c5..74b437b2d60 100644 --- a/src/showcase/nz-demo-table/nz-demo-table.component.ts +++ b/src/showcase/nz-demo-table/nz-demo-table.component.ts @@ -10,7 +10,11 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; }) export class NzDemoTableComponent implements OnInit { NzDemoTableBasicCode = require('!!raw-loader!./nz-demo-table-basic.component'); - NzDemoTableSortCode = require('!!raw-loader!./nz-demo-table-sort.component'); + NzDemoTableEditCode = require('!!raw-loader!./nz-demo-table-edit.component'); + NzDemoTableFixedHeaderCode = require('!!raw-loader!./nz-demo-table-fixed-header.component'); + NzDemoTableColspanRowspanCode = require('!!raw-loader!./nz-demo-table-colspan-rowspan.component'); + NzDemoTableResetFilterCode = require('!!raw-loader!./nz-demo-table-reset-filter.component'); + NzDemoTableCustomFilterCode = require('!!raw-loader!./nz-demo-table-custom-filter.component'); NzDemoTableSelectionCode = require('!!raw-loader!./nz-demo-table-selection.component'); NzDemoTableSelectionAndOperationCode = require('!!raw-loader!./nz-demo-table-selection-and-operation.component'); NzDemoTableSelectionPropsCode = require('!!raw-loader!./nz-demo-table-selection-props.component'); diff --git a/src/showcase/nz-demo-table/nz-demo-table.html b/src/showcase/nz-demo-table/nz-demo-table.html index 70227170f9a..a12474aa882 100644 --- a/src/showcase/nz-demo-table/nz-demo-table.html +++ b/src/showcase/nz-demo-table/nz-demo-table.html @@ -4,7 +4,6 @@

Table 表格

展示行列数据。

何时使用 -

  • 当有大量结构化的数据需要展现时；

    • @@ -22,12 +21,6 @@

    代码演示简单的表格，最后一列是各种操作。

- - -
-

对年龄进行排序

-
-
@@ -46,6 +39,20 @@

代码演示配置选择框的默认属性。

 + + +
+

使用受控属性对筛选和排序状态进行控制。

+

nzTable可以像HTML table 标签一样自定义表头和内容，通过配合 nz-table-sort与 nz-table-filter可以方便的自定义筛选和排序功能。

+
+ + + +
+

通过 nz-dropdown的 nz-dropdown-custom属性自定义筛选菜单

+

nzTable可以像HTML table 标签一样自定义表头和内容。

+
+
@@ -61,6 +68,25 @@

代码演示

 + + +
+

nzTable可以像HTML table 标签一样使用 rowspan和 colspan标签

+
+ + + +
+

方便一页内展示大量数据。

+

需要手动指定 th和 td的宽度，否则列头和内容可能不对齐。

+
+ + + +
+

通过自定义模板实现带行编辑功能的表格。

+
+
@@ -78,10 +104,8 @@

代码演示

API -

nz-table -

@@ -117,6 +141,18 @@

nz-table

+ + + + + + + + + + + + @@ -196,7 +232,7 @@

nz-table

- + @@ -235,39 +271,36 @@

nz-table

NzTableComponent -
nzScroll纵向支持滚动，也可用于指定滚动区域的高度：{{ '{' }} y: 300 {{ '}' }}Object-
#nzFixedHeader用于定位固定表头，与 nzScroll配合使用ng-template-
nzTotal 数据总量，用于与nzAjaxData共同使用false
[nz-table-table][nz-table-title] 表头内容 ng-content -

nz-table-sort -

嵌入th中显示排序状态

+

nz-table-filter +

+

与nz-dropdown结合使用，用于过滤表中的数据

- - - - - + + + - - - - + + +
参数 说明 类型默认值
nzValue当前排序状态，可双向绑定'ascend'|'descend'|nullnull[nz-table-filter-confirm]确定按钮的内容ng-content
nzValueChange当前排序状态改变回调Func-[nz-table-filter-clear]重置按钮的内容ng-content

[nz-thead] -

标定thead

[nz-th] -

标定th

@@ -286,18 +319,21 @@

[nz-th]

+ + + + + +
Boolean false
nzWidth当前列的宽度String-

[nz-table-body] -

标定tbody

[nz-tbody-tr] -

标定tbody中tr

[nz-td] -

标定td

@@ -319,7 +355,6 @@

[nz-td]

[nz-table-divider] -

用于td中分隔数据

diff --git a/src/showcase/nz-demo-table/nz-demo-table.module.ts b/src/showcase/nz-demo-table/nz-demo-table.module.ts index 7d3910a2d82..358cd2542e5 100644 --- a/src/showcase/nz-demo-table/nz-demo-table.module.ts +++ b/src/showcase/nz-demo-table/nz-demo-table.module.ts @@ -3,7 +3,11 @@ import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { NzDemoTableBasicComponent } from './nz-demo-table-basic.component'; -import { NzDemoTableSortComponent } from './nz-demo-table-sort.component'; +import { NzDemoTableEditComponent } from './nz-demo-table-edit.component'; +import { NzDemoTableFixedHeaderComponent } from './nz-demo-table-fixed-header.component'; +import { NzDemoTableColspanRowspanComponent } from './nz-demo-table-colspan-rowspan.component'; +import { NzDemoTableResetFilterComponent } from './nz-demo-table-reset-filter.component'; +import { NzDemoTableCustomFilterComponent } from './nz-demo-table-custom-filter.component'; import { NzDemoTableSelectionComponent } from './nz-demo-table-selection.component'; import { NzDemoTableSelectionAndOperationComponent } from './nz-demo-table-selection-and-operation.component'; import { NzDemoTableSelectionPropsComponent } from './nz-demo-table-selection-props.component'; @@ -20,7 +24,7 @@ import { NzDemoTableRoutingModule } from './nz-demo-table.routing.module'; @NgModule({ imports : [ NzDemoTableRoutingModule, FormsModule, CommonModule, NzCodeBoxModule, NgZorroAntdModule ], - declarations: [ NzDemoTableComponent, NzDemoTableBasicComponent, NzDemoTableSortComponent, NzDemoTableSelectionComponent, NzDemoTableSelectionAndOperationComponent, NzDemoTableSelectionPropsComponent, NzDemoTablePagingComponent, NzDemoTableAjaxComponent, NzDemoTableNoPaginationComponent, NzDemoTableSizeComponent ] + declarations: [ NzDemoTableCustomFilterComponent, NzDemoTableEditComponent, NzDemoTableComponent, NzDemoTableFixedHeaderComponent, NzDemoTableColspanRowspanComponent, NzDemoTableBasicComponent, NzDemoTableResetFilterComponent, NzDemoTableSelectionComponent, NzDemoTableSelectionAndOperationComponent, NzDemoTableSelectionPropsComponent, NzDemoTablePagingComponent, NzDemoTableAjaxComponent, NzDemoTableNoPaginationComponent, NzDemoTableSizeComponent ] }) export class NzDemoTableModule { diff --git a/src/showcase/nz-demo-table/randomUser.service.ts b/src/showcase/nz-demo-table/randomUser.service.ts index 1890643ff8f..5df0cae57dd 100644 --- a/src/showcase/nz-demo-table/randomUser.service.ts +++ b/src/showcase/nz-demo-table/randomUser.service.ts @@ -1,32 +1,25 @@ import { Injectable } from '@angular/core'; -import { Http, Response } from '@angular/http'; -import { Observable } from 'rxjs/Observable'; -import 'rxjs/add/operator/catch'; -import 'rxjs/add/operator/map'; +import { HttpClient, HttpParams } from '@angular/common/http'; @Injectable() export class RandomUserService { randomUserUrl = 'https://api.randomuser.me/'; - getUsers(PageIndex = 1, pageSize = 10, sortField = '', sortOrder = '') { - return this.http.get(`${this.randomUserUrl}?results=${pageSize}&page=${PageIndex}&sortField=${sortField}&sortOrder=${sortOrder}`) - .map(this.extractData) - .catch(this.handleError); + getUsers(pageIndex = 1, pageSize = 10, sortField, sortOrder, genders) { + let params = new HttpParams() + .append('page', `${pageIndex}`) + .append('results', `${pageSize}`) + .append('sortField', sortField) + .append('sortOrder', sortOrder); + genders.forEach(gender => { + params = params.append('gender', gender); + }); + return this.http.get(`${this.randomUserUrl}`, { + params: params + }) } - extractData(res: Response) { - const body = res.json(); - return body || {}; - } - - handleError(error: any) { - const errMsg = (error.message) ? error.message : - error.status ? `${error.status} - ${error.statusText}` : 'Server error'; - console.error(errMsg); // log to console instead - return Observable.throw(errMsg); - } - - constructor(private http: Http) { + constructor(private http: HttpClient) { }