Skip to content

Commit

Permalink
feat(module:table): support filter & fixed header add more table demo (
Browse files Browse the repository at this point in the history
…#210)

close #86 close #174 close #218
  • Loading branch information
vthinkxie authored Sep 6, 2017
1 parent 28669ae commit 5f11664
Show file tree
Hide file tree
Showing 22 changed files with 841 additions and 185 deletions.
23 changes: 15 additions & 8 deletions src/components/dropdown/nz-dropdown.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 : `
<div>
<ng-content></ng-content>
</div>
Expand All @@ -53,16 +53,21 @@ export type NzPlacement = 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLe
(mouseleave)="_onMouseLeaveEvent($event)"
[style.minWidth.px]="_triggerWidth"
(click)="_clickDropDown($event)">
<ng-content select="[nz-menu]"></ng-content>
<div [class.ant-table-filter-dropdown]="hasFilterButton">
<ng-content select="[nz-menu]"></ng-content>
<ng-content select="[nz-table-filter]"></ng-content>
</div>
<ng-content select="[nz-dropdown-custom]"></ng-content>
</div>
</ng-template>`,
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';
Expand Down Expand Up @@ -143,7 +148,9 @@ export class NzDropDownComponent implements OnInit, OnDestroy, AfterViewInit {
}

ngOnInit() {
this._nzMenu.setDropDown(true);
if (this._nzMenu) {
this._nzMenu.setDropDown(true);
}
}

ngOnDestroy() {
Expand Down Expand Up @@ -180,7 +187,7 @@ export class NzDropDownComponent implements OnInit, OnDestroy, AfterViewInit {
mouse$,
this.nzVisibleChange.asObservable()
)
, 300);
, 300);
this._startSubscribe(observable$);
}

Expand Down
4 changes: 3 additions & 1 deletion src/components/dropdown/nz-dropdown.directive.ts
Original file line number Diff line number Diff line change
@@ -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) {
}
}
4 changes: 2 additions & 2 deletions src/components/menu/nz-menu-item.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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')
}
}

Expand Down
33 changes: 33 additions & 0 deletions src/components/table/nz-table-filter.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import {
Component,
HostBinding, OnInit
} from '@angular/core';
import { NzDropDownComponent } from '../dropdown/nz-dropdown.component';

@Component({
selector: '[nz-table-filter]',
template: `
<a class="ant-table-filter-dropdown-link confirm" (click)="hideDropDown()">
<ng-content select="[nz-table-filter-confirm]"></ng-content>
</a>
<a class="ant-table-filter-dropdown-link clear" (click)="hideDropDown()">
<ng-content select="[nz-table-filter-clear]"></ng-content>
</a>
`
})
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;
}
}
97 changes: 69 additions & 28 deletions src/components/table/nz-table.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -19,6 +23,8 @@ import {
<div>
<div
class="ant-table"
[class.ant-table-fixed-header]="nzScroll"
[class.ant-table-scroll-position-left]="nzScroll"
[class.ant-table-bordered]="nzBordered"
[class.ant-table-large]="(nzSize!=='middle')&&(nzSize!=='small')"
[class.ant-table-middle]="nzSize=='middle'"
Expand All @@ -27,53 +33,69 @@ import {
<ng-content select="[nz-table-title]"></ng-content>
</div>
<div class="ant-table-content">
<div class="ant-table-body">
<table>
<ng-content></ng-content>
</table>
</div>
<div class="ant-table-placeholder" *ngIf="data.length==0 && !nzCustomNoResult">
<span>没有数据</span>
</div>
<div class="ant-table-placeholder" *ngIf="data.length==0 && nzCustomNoResult">
<ng-content select="[noResult]"></ng-content>
</div>
<div class="ant-table-footer" *ngIf="nzShowFooter">
<ng-content select="[nz-table-footer]"></ng-content>
<div [class.ant-table-scroll]="nzScroll">
<div class="ant-table-header" [ngStyle]="_headerBottomStyle" *ngIf="nzScroll">
<table>
<colgroup>
<col *ngFor="let th of ths" [style.width]="th.nzWidth" [style.minWidth]="th.nzWidth">
</colgroup>
<ng-template [ngTemplateOutlet]="fixedHeader"></ng-template>
</table>
</div>
<div class="ant-table-body" [style.maxHeight.px]="nzScroll?.y" [style.overflowY]="nzScroll?.y?'scroll':''">
<table>
<colgroup>
<col [style.width]="th.nzWidth" [style.minWidth]="th.nzWidth" *ngFor="let th of ths">
</colgroup>
<ng-content></ng-content>
</table>
</div>
<div class="ant-table-placeholder" *ngIf="data.length==0 && !nzCustomNoResult">
<span>没有数据</span>
</div>
<div class="ant-table-placeholder" *ngIf="data.length==0 && nzCustomNoResult">
<ng-content select="[noResult]"></ng-content>
</div>
<div class="ant-table-footer" *ngIf="nzShowFooter">
<ng-content select="[nz-table-footer]"></ng-content>
</div>
</div>
</div>
</div>
</div>
<nz-pagination
*ngIf="nzIsPagination&&data.length"
class="ant-table-pagination"
[nzShowSizeChanger]="nzShowSizeChanger"
[nzShowQuickJumper]="nzShowQuickJumper"
[nzShowTotal]="nzShowTotal"
[nzSize]="(nzSize=='middle'||nzSize=='small')?'small':''"
[(nzPageSize)]="nzPageSize"
[nzTotal]="nzTotal"
[(nzPageIndex)]="nzPageIndex"
(nzPageIndexClickChange)="pageChangeClick($event)">
</nz-pagination>
</nz-spin>
<nz-pagination
*ngIf="nzIsPagination&&data.length"
class="ant-table-pagination"
[nzShowSizeChanger]="nzShowSizeChanger"
[nzShowQuickJumper]="nzShowQuickJumper"
[nzShowTotal]="nzShowTotal"
[nzSize]="(nzSize=='middle'||nzSize=='small')?'small':''"
[(nzPageSize)]="nzPageSize"
[nzTotal]="nzTotal"
[(nzPageIndex)]="nzPageIndex"
(nzPageIndexClickChange)="pageChangeClick($event)">
</nz-pagination>
</div>
`,
styleUrls : [
'./style/index.less',
'./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<any> = new EventEmitter();
@Output() nzPageIndexChange: EventEmitter<any> = new EventEmitter();
@Output() nzDataChange: EventEmitter<any> = new EventEmitter();
Expand All @@ -88,6 +110,17 @@ export class NzTableComponent implements AfterViewInit {
@Input() nzShowTotal = false;
@Input() nzShowFooter = false;
@Input() nzShowTitle = false;
@ContentChild('nzFixedHeader') fixedHeader: TemplateRef<any>;

@Input()
set nzScroll(value) {
this._scroll = value;
this._cd.detectChanges();
}

get nzScroll() {
return this._scroll;
}

/** async data */
@Input()
Expand Down Expand Up @@ -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;
}

Expand Down
5 changes: 3 additions & 2 deletions src/components/table/nz-table.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 ]
})

Expand Down
19 changes: 16 additions & 3 deletions src/components/table/nz-th.directive.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}
30 changes: 30 additions & 0 deletions src/components/util/mesureScrollBar.ts
Original file line number Diff line number Diff line change
@@ -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;
}
4 changes: 2 additions & 2 deletions src/showcase/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand Down
7 changes: 6 additions & 1 deletion src/showcase/nz-demo-dropdown/nz-demo-dropdown.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
<section class="markdown"><h1>Dropdown 下拉菜单</h1>
<section class="markdown"><p>向下弹出的列表。</p>
<h2 id="何时使用"><span>何时使用</span>
<!-- <a class="anchor">#</a> -->
</h2>
<p>当页面上的操作命令过多时,用此组件可以收纳操作元素。点击或移入触点,会出现一个下拉菜单。可在列表中进行选择,并执行相应的命令。</p>
</section>
Expand Down Expand Up @@ -90,6 +89,12 @@ <h3 id="nz-dropdown"><span>nz-dropdown</span>
<td>Directive</td>
<td>-</td>
</tr>
<tr>
<td>[nz-dropdown-custom]</td>
<td>自定义下拉菜单内容,不可与menu混用</td>
<td>ng-content</td>
<td>-</td>
</tr>
<tr>
<td>nzTrigger</td>
<td>触发下拉的行为</td>
Expand Down
Loading

0 comments on commit 5f11664

Please sign in to comment.