feat(module:table): support new nzQueryParams (#4970)

NG-ZORRO · Apr 2, 2020 · 79ea999 · 79ea999
1 parent 3b45a22
commit 79ea999
Show file tree

Hide file tree

Showing 21 changed files with 467 additions and 292 deletions.
diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md
@@ -9,22 +9,40 @@ title:
 
 这个例子通过简单的 ajax 读取方式，演示了如何从服务端读取并展现数据，具有筛选、排序等功能以及页面 loading 效果。开发者可以自行接入其他数据处理方式。
 
-- 排序：可使用单列或者多列排序
-  - 单列排序：使用 `[nzSortKey]` 来指定排序的名称，在 thead 上通过 `(nzSortChange)` 来获取排序改变事件，通过 `[nzSingleSort]` 来指定是否单列排序。
-  - 多列排序：使用 `[nzSortOrder]` 来指定排序，`(nzSortOrderChange)` 获取排序事件改变。
-- 筛选：使用 `[nzFilters]` 来指定筛选选项，使用 `(nzFilterChange)` 来获取筛选事件。
+- 分页：使用 `[nzFrontPagination]="false"` 指定由服务端分页。
+- 排序：使用 `[nzSortFn]="true"` 指定由服务端排序，如果需要多列排序可使用 `[nzSortPriority]="true"`。
+- 筛选：使用 `[nzFilters]` 来指定筛选项，使用 `[nzFilterFn]="true"` 指定由服务端筛选
+- 参数传输：通过 `(nzQueryParams)` 服务端需要的参数，数据结构为
+
+```typescript
+{
+  pageIndex: number;
+  pageSize: number;
+  sort: Array<{ key: string; value: 'ascend' | 'descend' | null }>;
+  filter: Array<{ key: string; value: any | any[] }>;
+}
+```
 
 **注意，此示例使用 [模拟接口](https://randomuser.me)，展示数据可能不准确，请打开网络面板查看请求。**
 
 ## en-US
 
-This example shows how to fetch and present data from remote server, and how to implement filtering and sorting in server side by sending related parameters to server. 
+This example shows how to fetch and present data from remote server, and how to implement filtering and sorting in server side by sending related parameters to server.
+
+- Pagination：Set `[nzFrontPagination]="false"` to disable frontend pagination.
+- Sort：Set `[nzSortFn]="true"` to enable server sort, if you need multiple sort, set `[nzSortPriority]="true"`.
+- Filter：Pass options to `[nzFilters]` and set `[nzFilterFn]="true"` to enable server filter.
+- Params：Get all params from `(nzQueryParams)`, the data structure is
+
+```typescript
+{
+  pageIndex: number;
+  pageSize: number;
+  sort: Array<{ key: string; value: 'ascend' | 'descend' | null }>;
+  filter: Array<{ key: string; value: any | any[] }>;
+}
+```
 
-- Sort: support both single sort and multiple sort
-  - Single sort: Use `[nzSortKey]` to define sort key of column, use `(nzSortChange)` of thead to watch sort change, and `[nzSingleSort]` to indicate whether it is single column sort.
-  - Multiple sort: Use `[nzSortOrder]` to define sort order, use `(nzSortOrderChange)` to get the sort order change event.
-- Filter: Use `[nzFilters]` to set the filter options, use `(nzFilterChange)` to get the filter change event.
-
 **Note, this example uses a [Mock API](https://randomuser.me) that you can look up in Network Console.**
 
 
diff --git a/components/table/demo/ajax.ts b/components/table/demo/ajax.ts
@@ -1,5 +1,6 @@
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Component, Injectable, OnInit } from '@angular/core';
+import { NzTableQueryParams } from 'ng-zorro-antd/table';
 import { Observable } from 'rxjs';
 
 interface RandomUser {
@@ -17,19 +18,21 @@ export class RandomUserService {
   randomUserUrl = 'https://api.randomuser.me/';
 
   getUsers(
-    pageIndex: number = 1,
-    pageSize: number = 10,
-    sortField: string,
-    sortOrder: string,
-    genders: string[]
+    pageIndex: number,
+    pageSize: number,
+    sortField: string | null,
+    sortOrder: string | null,
+    filters: Array<{ key: string; value: string[] }>
   ): Observable<{ results: RandomUser[] }> {
     let params = new HttpParams()
       .append('page', `${pageIndex}`)
       .append('results', `${pageSize}`)
-      .append('sortField', sortField)
-      .append('sortOrder', sortOrder);
-    genders.forEach(gender => {
-      params = params.append('gender', gender);
+      .append('sortField', `${sortField}`)
+      .append('sortOrder', `${sortOrder}`);
+    filters.forEach(filter => {
+      filter.value.forEach(value => {
+        params = params.append(filter.key, value);
+      });
     });
     return this.http.get<{ results: RandomUser[] }>(`${this.randomUserUrl}`, { params });
   }
@@ -46,16 +49,15 @@ export class RandomUserService {
       [nzFrontPagination]="false"
       [nzLoading]="loading"
       [nzTotal]="total"
-      [nzPageIndex]="pageIndex"
       [nzPageSize]="pageSize"
-      (nzPageIndexChange)="onPageIndexChange($event)"
-      (nzPageSizeChange)="onPageSizeChange($event)"
+      [nzPageIndex]="pageIndex"
+      (nzQueryParams)="onQueryParamsChange($event)"
     >
-      <thead (nzSortOrderChange)="onSortChange($event)" nzSingleSort>
+      <thead>
         <tr>
-          <th nzSortKey="name">Name</th>
-          <th [nzFilters]="filterGender" (nzFilterChange)="onFilterChange($event)">Gender</th>
-          <th nzSortKey="email"><span>Email</span></th>
+          <th nzColumnKey="name" [nzSortFn]="true">Name</th>
+          <th nzColumnKey="gender" [nzFilters]="filterGender" [nzFilterFn]="true">Gender</th>
+          <th nzColumnKey="email" [nzSortFn]="true">Email</th>
         </tr>
       </thead>
       <tbody>
@@ -69,55 +71,43 @@ export class RandomUserService {
   `
 })
 export class NzDemoTableAjaxComponent implements OnInit {
-  pageIndex = 1;
-  pageSize = 10;
   total = 1;
   listOfRandomUser: RandomUser[] = [];
   loading = true;
-  sortOrder: string | null = null;
-  sortKey: string | null = null;
+  pageSize = 10;
+  pageIndex = 1;
   filterGender = [
     { text: 'male', value: 'male' },
     { text: 'female', value: 'female' }
   ];
-  searchGenderList: string[] = [];
-
-  onSortChange(sort: { key: string; value: string }): void {
-    this.sortKey = sort.key;
-    this.sortOrder = sort.value;
-    this.getRandomUserList();
-  }
 
-  onPageIndexChange(index: number): void {
-    this.pageIndex = index;
-    this.getRandomUserList();
-  }
-
-  onPageSizeChange(size: number): void {
-    this.pageSize = size;
-    this.getRandomUserList();
-  }
-
-  onFilterChange(value: string[]): void {
-    this.searchGenderList = value;
-    this.pageIndex = 1;
-    this.getRandomUserList();
+  loadDataFromServer(
+    pageIndex: number,
+    pageSize: number,
+    sortField: string | null,
+    sortOrder: string | null,
+    filter: Array<{ key: string; value: string[] }>
+  ): void {
+    this.loading = true;
+    this.randomUserService.getUsers(pageIndex, pageSize, sortField, sortOrder, filter).subscribe(data => {
+      this.loading = false;
+      this.total = 200; // mock the total data here
+      this.listOfRandomUser = data.results;
+    });
   }
 
-  getRandomUserList(): void {
-    this.loading = true;
-    this.randomUserService
-      .getUsers(this.pageIndex, this.pageSize, this.sortKey!, this.sortOrder!, this.searchGenderList)
-      .subscribe(data => {
-        this.loading = false;
-        this.total = 200;
-        this.listOfRandomUser = data.results;
-      });
+  onQueryParamsChange(params: NzTableQueryParams): void {
+    console.log(params);
+    const { pageSize, pageIndex, sort, filter } = params;
+    const currentSort = sort.find(item => item.value !== null);
+    const sortField = (currentSort && currentSort.key) || null;
+    const sortOrder = (currentSort && currentSort.value) || null;
+    this.loadDataFromServer(pageIndex, pageSize, sortField, sortOrder, filter);
   }
 
   constructor(private randomUserService: RandomUserService) {}
 
   ngOnInit(): void {
-    this.getRandomUserList();
+    this.loadDataFromServer(this.pageIndex, this.pageSize, null, null, []);
   }
 }
diff --git a/components/table/demo/reset-filter.ts b/components/table/demo/reset-filter.ts
@@ -1,15 +1,18 @@
 import { Component } from '@angular/core';
+import { NzTableFilterFn, NzTableFilterList, NzTableSortFn, NzTableSortOrder } from 'ng-zorro-antd/table';
 
 interface DataItem {
   name: string;
   age: number;
   address: string;
 }
 
-interface OptionItem {
-  byDefault?: boolean;
-  text: string;
-  value: string;
+interface ColumnItem {
+  name: string;
+  sortOrder?: NzTableSortOrder;
+  sortFn?: NzTableSortFn;
+  listOfFilter?: NzTableFilterList;
+  filterFn?: NzTableFilterFn;
 }
 
 @Component({
@@ -23,17 +26,14 @@ interface OptionItem {
     <nz-table #filterTable [nzData]="listOfData" nzTableLayout="fixed">
       <thead>
         <tr>
-          <th [(nzSortOrder)]="nameSortOrder" [nzSortFn]="sortNameFn" [nzFilters]="listOfFilterName" [nzFilterFn]="nameFilterFn">
-            Name
-          </th>
-          <th [(nzSortOrder)]="ageSortOrder" [nzSortFn]="sortAgeFn">Age</th>
           <th
-            [(nzSortOrder)]="addressSortOrder"
-            [nzSortFn]="sortAddressLengthFn"
-            [nzFilters]="listOfFilterAddress"
-            [nzFilterFn]="addressFilterFn"
+            *ngFor="let column of listOfColumns; trackBy: trackByName"
+            [(nzSortOrder)]="column.sortOrder"
+            [nzSortFn]="column.sortFn"
+            [nzFilters]="column.listOfFilter"
+            [nzFilterFn]="column.filterFn"
           >
-            Address
+            {{ column.name }}
           </th>
         </tr>
       </thead>
@@ -59,21 +59,30 @@ interface OptionItem {
   ]
 })
 export class NzDemoTableResetFilterComponent {
-  sortNameFn = (a: DataItem, b: DataItem) => a.name.localeCompare(b.name);
-  sortAgeFn = (a: DataItem, b: DataItem) => a.age - b.age;
-  sortAddressLengthFn = (a: DataItem, b: DataItem) => a.address.length - b.address.length;
-  nameFilterFn = (list: string[], item: DataItem) => list.some(name => item.name.indexOf(name) !== -1);
-  addressFilterFn = (address: string, item: DataItem) => item.address.indexOf(address) !== -1;
-  nameSortOrder: string | null = null;
-  ageSortOrder: string | null = null;
-  addressSortOrder: string | null = null;
-  listOfFilterName: OptionItem[] = [
-    { text: 'Joe', value: 'Joe' },
-    { text: 'Jim', value: 'Jim' }
-  ];
-  listOfFilterAddress: OptionItem[] = [
-    { text: 'London', value: 'London' },
-    { text: 'Sidney', value: 'Sidney' }
+  listOfColumns: ColumnItem[] = [
+    {
+      name: 'Name',
+      sortOrder: null,
+      sortFn: (a: DataItem, b: DataItem) => a.name.localeCompare(b.name),
+      listOfFilter: [
+        { text: 'Joe', value: 'Joe' },
+        { text: 'Jim', value: 'Jim' }
+      ],
+      filterFn: (list: string[], item: DataItem) => list.some(name => item.name.indexOf(name) !== -1)
+    },
+    {
+      name: 'Age',
+      sortOrder: null,
+      sortFn: (a: DataItem, b: DataItem) => a.age - b.age
+    },
+    {
+      name: 'Address',
+      listOfFilter: [
+        { text: 'London', value: 'London' },
+        { text: 'Sidney', value: 'Sidney' }
+      ],
+      filterFn: (address: string, item: DataItem) => item.address.indexOf(address) !== -1
+    }
   ];
   listOfData: DataItem[] = [
     {
@@ -98,27 +107,40 @@ export class NzDemoTableResetFilterComponent {
     }
   ];
 
+  trackByName(_: number, item: ColumnItem): string {
+    return item.name;
+  }
+
   sortByAge(): void {
-    this.nameSortOrder = null;
-    this.ageSortOrder = 'descend';
-    this.addressSortOrder = null;
+    this.listOfColumns.forEach(item => {
+      if (item.name === 'Age') {
+        item.sortOrder = 'descend';
+      } else {
+        item.sortOrder = null;
+      }
+    });
   }
 
   resetFilters(): void {
-    this.listOfFilterName = [
-      { text: 'Joe', value: 'Joe' },
-      { text: 'Jim', value: 'Jim' }
-    ];
-    this.listOfFilterAddress = [
-      { text: 'London', value: 'London' },
-      { text: 'Sidney', value: 'Sidney' }
-    ];
+    this.listOfColumns.forEach(item => {
+      if (item.name === 'Name') {
+        item.listOfFilter = [
+          { text: 'Joe', value: 'Joe' },
+          { text: 'Jim', value: 'Jim' }
+        ];
+      } else if (item.name === 'Address') {
+        item.listOfFilter = [
+          { text: 'London', value: 'London' },
+          { text: 'Sidney', value: 'Sidney' }
+        ];
+      }
+    });
   }
 
   resetSortAndFilters(): void {
-    this.nameSortOrder = null;
-    this.ageSortOrder = null;
-    this.addressSortOrder = null;
+    this.listOfColumns.forEach(item => {
+      item.sortOrder = null;
+    });
     this.resetFilters();
   }
 }