feat(module:table): support nzSimple option (#1699)

close #1599
NG-ZORRO · Jun 22, 2018 · 4868c41 · 4868c41
1 parent 256aed0
commit 4868c41
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 8 deletions.
diff --git a/components/table/demo/dynamic-settings.ts b/components/table/demo/dynamic-settings.ts
@@ -79,22 +79,30 @@ import { Component, OnInit } from '@angular/core';
         </nz-form-item>
         <nz-form-item>
           <nz-form-label>
-            <label>Size</label>
+            <label>No Result</label>
           </nz-form-label>
           <nz-form-control>
-            <nz-radio-group [(ngModel)]="size" name="size">
-              <label nz-radio-button nzValue="default">Default</label>
-              <label nz-radio-button nzValue="middle">Middle</label>
-              <label nz-radio-button nzValue="small">Small</label>
-            </nz-radio-group>
+            <nz-switch [(ngModel)]="noResult" (ngModelChange)="noResultChange($event)" name="noResult"></nz-switch>
           </nz-form-control>
         </nz-form-item>
         <nz-form-item>
           <nz-form-label>
-            <label>No Result</label>
+            <label>Simple Pagination</label>
           </nz-form-label>
           <nz-form-control>
-            <nz-switch [(ngModel)]="noResult" (ngModelChange)="noResultChange($event)" name="noResult"></nz-switch>
+            <nz-switch [(ngModel)]="simple" name="simple"></nz-switch>
+          </nz-form-control>
+        </nz-form-item>
+        <nz-form-item>
+          <nz-form-label>
+            <label>Size</label>
+          </nz-form-label>
+          <nz-form-control>
+            <nz-radio-group [(ngModel)]="size" name="size">
+              <label nz-radio-button nzValue="default">Default</label>
+              <label nz-radio-button nzValue="middle">Middle</label>
+              <label nz-radio-button nzValue="small">Small</label>
+            </nz-radio-group>
           </nz-form-control>
         </nz-form-item>
       </form>
@@ -105,6 +113,7 @@ import { Component, OnInit } from '@angular/core';
       [nzScroll]="fixHeader?{ y: '240px' }:null"
       [nzData]="dataSet"
       [nzBordered]="bordered"
+      [nzSimple]="simple"
       [nzLoading]="loading"
       [nzFrontPagination]="pagination"
       [nzShowPagination]="pagination"
@@ -170,6 +179,7 @@ export class NzDemoTableDynamicSettingsComponent implements OnInit {
   allChecked = false;
   indeterminate = false;
   displayData = [];
+  simple = false;
   noResult = false;
 
   currentPageDataChange($event: Array<{ name: string; age: number; address: string; checked: boolean; expand: boolean; description: string; }>): void {

diff --git a/components/table/doc/index.en-US.md b/components/table/doc/index.en-US.md
@@ -79,6 +79,7 @@ The data passed to `[nzData]` will be export with [Template Context](https://ang
 | `[nzShowSizeChanger]` | Determine whether `nzPageSize` can be changed | boolean | false |
 | `[nzShowTotal]` | To display the total number and range	 | `TemplateRef<{ $implicit: number, range: [ number, number ] }>` | - |
 | `[nzHideOnSinglePage]` | Whether to hide pager on single page | boolean | false |
+| `[nzSimple]` | whether to use simple mode | boolean | - |
 | `(nzPageIndexChange)` | pageIndex change callback | `EventEmitter<number>` | - |
 | `(nzPageSizeChange)` | pageSize change callback | `EventEmitter<number>` | - |
 | `(nzCurrentPageDataChange)` | current pageData change callback | `EventEmitter<any[]>` | - |

diff --git a/components/table/doc/index.zh-CN.md b/components/table/doc/index.zh-CN.md
@@ -80,6 +80,7 @@ Table 组件同时具备了易用性和高度可定制性
 | `[nzShowSizeChanger]` | 是否可以改变 `nzPageSize` | boolean | false |
 | `[nzShowTotal]` | 用于显示数据总量和当前数据范围 | `TemplateRef<{ $implicit: number, range: [ number, number ] }>` | - |
 | `[nzHideOnSinglePage]` | 只有一页时是否隐藏分页器 | boolean | false |
+| `[nzSimple]` | 当添加该属性时，显示为简单分页 | boolean | - |
 | `(nzPageIndexChange)` | 当前页码改版时的回调函数 | `EventEmitter<number>` | - |
 | `(nzPageSizeChange)` | 页数改变时的回调函数 | `EventEmitter<number>` | - |
 | `(nzCurrentPageDataChange)` | 当前页面展示数据改变的回调函数 | `EventEmitter<any[]>` | - |

diff --git a/components/table/nz-table.component.html b/components/table/nz-table.component.html
@@ -97,6 +97,7 @@
       [nzPageSize]="nzPageSize"
       (nzPageSizeChange)="emitPageSize($event)"
       [nzTotal]="nzTotal"
+      [nzSimple]="nzSimple"
       [nzPageIndex]="nzPageIndex"
       (nzPageIndexChange)="emitPageIndex($event)">
     </nz-pagination>

diff --git a/components/table/nz-table.component.ts b/components/table/nz-table.component.ts
@@ -48,6 +48,7 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy {
   private _pageSize = 10;
   private _widthConfig: string[] = [];
   private _frontPagination = true;
+  private _simple = false;
   /* tslint:disable-next-line:no-any */
   locale: any = {};
   nzTheadComponent: NzTheadComponent;
@@ -82,6 +83,14 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy {
   @Input() nzLoadingDelay = 0;
   @Input() nzTotal: number;
 
+  @Input()
+  set nzSimple(value: boolean) {
+    this._simple = toBoolean(value);
+  }
+
+  get nzSimple(): boolean {
+    return this._simple;
+  }
   @Input()
   set nzFrontPagination(value: boolean) {
     this._frontPagination = toBoolean(value);

diff --git a/components/table/nz-table.spec.ts b/components/table/nz-table.spec.ts
@@ -121,6 +121,13 @@ describe('nz-table', () => {
       fixture.detectChanges();
       expect(console.warn).toHaveBeenCalledTimes(1);
     });
+    it('should pagination simple work', () => {
+      fixture.detectChanges();
+      expect(table.nativeElement.querySelector('.ant-pagination-simple')).toBeNull();
+      testComponent.simple = true;
+      fixture.detectChanges();
+      expect(table.nativeElement.querySelector('.ant-pagination-simple')).toBeDefined();
+    });
     it('should pagination work', () => {
       fixture.detectChanges();
       expect(table.nativeElement.querySelector('.ant-pagination')).toBeDefined();
@@ -322,6 +329,7 @@ describe('nz-table', () => {
       [nzBordered]="bordered"
       [nzLoading]="loading"
       [nzShowSizeChanger]="showSizeChanger"
+      [nzSimple]="simple"
       [nzShowQuickJumper]="showQuickJumper"
       [nzHideOnSinglePage]="hideOnSinglePage"
       [nzWidthConfig]="widthConfig"
@@ -373,6 +381,7 @@ export class NzTestTableBasicComponent implements OnInit {
   title = true;
   footer = true;
   fixHeader = false;
+  simple = false;
   size = 'small';
   widthConfig = [];